Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2977510 by kjay, shaal, markconroy, finnsky, Vidushi Mehta, Eli-T: Refactor/improve Umami demo's search form CSS for better responsive support 

(cherry picked from commit 26918ae4f8)
8.7.x
Gábor Hojtsy 2019-03-19 13:00:10 +01:00
parent d0aab49b3a
commit 8e162d6316
3 changed files with 100 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/profiles/demo_umami/themes/umami/css/base.css
View File

@ -79,7 +79,7 @@ blockquote a:focus {
button,
.button,
[type="button"],
.button[type="submit"],
[type="reset"],
[type="submit"] {
display: inline-block;

149
core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
View File

@ -3,106 +3,132 @@
* Stylesheet for results generated by the Search module.
*/
.search-form {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
margin: 0 0 1rem;
.path-search .region-content {
margin: 0 1.28rem;
}
.search-form #edit-basic {
background: #fff;
.search-form + .item-list > h3 {
margin: 1.28rem;
}
.search-form > .form-wrapper {
margin-bottom: 1.28rem;
padding: 0.889rem;
border: 1px solid #fcece7;
padding: 1.28rem;
margin: 0 1rem 1rem 0;
background: #fff;
}
.search-form #edit-basic {
display: flex;
align-items: flex-end;
flex: 1 1;
@media screen and (min-width: 48em) {
.search-form > .form-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin-bottom: 1.28rem;
padding: 1.28rem;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77.56em) {
.path-search .region-content {
margin: 0;
}
.search-form > .form-wrapper {
margin: 0 0 1.28rem;
}
}
.search-form .form-type-search {
margin: 0 0 0.889rem 0;
}
@media screen and (min-width: 48em) {
.search-form .form-type-search {
flex-grow: 1;
margin: 0 1.28rem 0 0; /* LTR */
}
[dir="rtl"] .search-form .form-type-search {
margin-right: 0;
margin-left: 1.28rem;
}
}
.search-form .container-inline label,
.search-form .container-inline div {
display: block;
}
.search-form .form-search {
margin: 0;
padding: 0;
}
.search-form .form-type-search label {
.search-help-link {
display: inline-block;
margin: 0 0 1ex;
padding: 0;
}
.search-form .button {
min-width: 0;
position: relative;
z-index: 1;
}
.search-form #edit-basic .button {
width: 80px;
height: 35px;
margin-left: -80px;
margin: 1.28rem;
}
.search-form .search-help-link {
padding: 1.28rem;
margin: 0 1rem 1rem 0;
flex: 1 1;
}
.search-form #edit-advanced {
background: #fff;
border: 1px solid #fcece7;
padding: 1.28rem;
margin: 0 1rem 1rem 0;
}
.search-form .search-advanced {
width: 100%;
}
.search-form .search-advanced .details-wrapper {
/**
* Advanced Search
*/
.search-form details > .details-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
box-sizing: border-box;
padding: 1.28rem 0 0;
}
.search-form .search-advanced .details-wrapper fieldset {
width: 28%;
.search-form .search-advanced .details-wrapper > fieldset {
width: 100%;
margin: 0 0 1rem;
padding: 1rem;
}
.search-form .search-advanced .action {
width: 100%;
/* 480px */
@media screen and (min-width: 30em) {
.search-form .search-advanced .details-wrapper > fieldset,
.search-form .search-advanced .details-wrapper > .action {
flex-basis: calc(33% - 2%);
flex-grow: 1;
min-width: 15rem;
margin: 1%;
}
.search-form .search-advanced .details-wrapper > .action {
padding-top: 0.7rem;
}
}
.search-form .search-advanced .form-text {
margin: 0;
padding: 0.5em 2.25em 0.5em 2.25em;
border: 1px solid #dbdbdb;
min-width: calc(100% - 80px);
width: 100%;
}
/*
Search results
*/
.search-form + h2 {
margin: 0 1.28rem 1.28rem;
}
.search-results {
margin: 0 14px 28px;
padding: 0;
list-style: none;
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
.search-results {
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
}
.search-results li {
background: #fff;
border: 1px solid #fcece7;
padding: 1.28rem;
margin: 0 0 1rem 0; /* LTR */
padding: 1.28rem;
border: 1px solid #fcece7;
background: #fff;
}
/* Apply right margin to keep aligned with title and exposed filter. */
/* Without this rule, another RTL rule from item-list.css will break the design */
[dir=rtl] .search-results li {
margin: 0 1rem 1rem 0;
margin: 0 0 1rem 0;
}
.search-results .search-result__snippet {
@ -112,3 +138,8 @@
margin-top: 1.28rem;
margin-bottom: 0;
}
.pager__items {
display: flex;
justify-content: center;
}

52
core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
View File

@ -3,10 +3,6 @@
* This file is used to style the search block.
*/
.search-form + h2 {
margin: 0 1rem 1rem;
}
.search-block-form {
display: none;
}
@ -57,24 +53,21 @@
}
/* Search input */
.form-type-search {
.search-block-form .form-type-search {
margin-top: 0;
margin-bottom: 0;
border: 1px solid #dbdbdb;
border-top-left-radius: 3px; /* LTR */
border-bottom-right-radius: 3px; /* LTR */
}
[dir=rtl] .form-type-search {
[dir=rtl] .search-block-form .form-type-search {
border-top-left-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0;
}
.search-form .form-type-search {
border: none;
}
.form-search {
.search-block-form .form-search {
width: auto;
height: auto;
margin: 0 80px 0 0; /* LTR */
@ -94,33 +87,19 @@
width: 14em;
}
}
.search-form .form-search {
border: 1px solid #dbdbdb;
border-radius: 3px;
width: 20em;
margin: 0 -2px 0 0; /* LTR */
max-width: calc(100vw - 6.25em);
}
[dir=rtl] .search-form .form-search {
margin: 0 0 0 -2px;
}
.form-search:focus {
.search-block-form .form-search:focus {
border: 2px solid #008068;
border-top-left-radius: 2px; /* LTR */
border-bottom-left-radius: 2px; /* LTR */
}
[dir=rtl] .form-search:focus {
[dir=rtl] .search-block-form .form-search:focus {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.search-form .form-search:focus {
border: 1px solid #008068;
}
.form-search::placeholder {
opacity: 1;
}
@ -147,8 +126,7 @@
border-right: none;
border-left: 1px solid #dbdbdb;
}
.search-block-form .form-submit,
.search-form .form-submit {
.search-block-form .form-submit {
padding: 0.6em 1.25em 0.4em;
margin: 0;
border: 2px solid #fff;
@ -160,34 +138,22 @@
}
@media screen and (min-width: 48em) {
.search-block-form .form-submit,
.search-form .form-submit {
.search-block-form .form-submit {
border-top-left-radius: 0; /* LTR */
border-bottom-left-radius: 0; /* LTR */
}
[dir=rtl] .search-block-form .form-submit,
[dir=rtl] .search-form .form-submit {
[dir=rtl] .search-block-form .form-submit {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
}
.search-form .form-submit {
border: 1px solid #dbdbdb;
}
.search-block-form .form-submit:focus,
.search-block-form .form-submit:hover,
.search-form .form-submit:focus,
.search-form .form-submit:hover {
.search-block-form .form-submit:hover {
margin: 0;
background-color: #e6eee0;
border: 2px solid #008068;
outline-offset: 2px;
}
.search-form .form-submit:focus,
.search-form .form-submit:hover {
border: 1px solid #008068;
}