From 26918ae4f8f021078a2bcc2d002c98935627f965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=CC=81bor=20Hojtsy?= <gabor@hojtsy.hu>
Date: Tue, 19 Mar 2019 13:00:10 +0100
Subject: [PATCH] Issue #2977510 by kjay, shaal, markconroy, finnsky, Vidushi
Mehta, Eli-T: Refactor/improve Umami demo's search form CSS for better
responsive support
---
.../demo_umami/themes/umami/css/base.css | 2 +-
.../blocks/search/search-results.css | 145 +++++++++++-------
.../css/components/blocks/search/search.css | 52 ++-----
3 files changed, 98 insertions(+), 101 deletions(-)
diff --git a/core/profiles/demo_umami/themes/umami/css/base.css b/core/profiles/demo_umami/themes/umami/css/base.css
index e16205111b61..c3955924fe69 100644
--- a/core/profiles/demo_umami/themes/umami/css/base.css
+++ b/core/profiles/demo_umami/themes/umami/css/base.css
@@ -79,7 +79,7 @@ blockquote a:focus {
button,
.button,
-[type="button"],
+.button[type="submit"],
[type="reset"],
[type="submit"] {
display: inline-block;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
index b140da4adce6..0f5457b13f16 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
@@ -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;
- border: 1px solid #fcece7;
- padding: 1.28rem;
- margin: 0 1rem 1rem 0;
+.search-form + .item-list > h3 {
+ margin: 1.28rem;
}
-.search-form #edit-basic {
- display: flex;
- align-items: flex-end;
- flex: 1 1;
+.search-form > .form-wrapper {
+ margin-bottom: 1.28rem;
+ padding: 0.889rem;
+ border: 1px solid #fcece7;
+ background: #fff;
}
-.search-form .form-type-search {
- margin: 0;
- padding: 0;
+
+@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;
+ }
}
-.search-form .form-type-search label {
- display: inline-block;
- margin: 0 0 1ex;
- padding: 0;
+
+/* 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 .button {
- min-width: 0;
- position: relative;
- z-index: 1;
+
+.search-form .form-type-search {
+ margin: 0 0 0.889rem 0;
}
-.search-form #edit-basic .button {
- width: 80px;
- height: 35px;
- margin-left: -80px;
+
+@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 .search-help-link {
- padding: 1.28rem;
- margin: 0 1rem 1rem 0;
- flex: 1 1;
+.search-form .container-inline label,
+.search-form .container-inline div {
+ display: block;
}
-.search-form #edit-advanced {
- background: #fff;
- border: 1px solid #fcece7;
- padding: 1.28rem;
- margin: 0 1rem 1rem 0;
+.search-form .form-search {
+ margin: 0;
}
-.search-form .search-advanced {
- width: 100%;
+
+.search-help-link {
+ display: inline-block;
+ margin: 1.28rem;
}
-.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;
+}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
index 21a78612471b..82e956c17dd1 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -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;
-}
--
GitLab