Index: static/scss/components/_searchform.scss |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/static/scss/components/_searchform.scss |
@@ -0,0 +1,138 @@ |
+// This file is part of help.eyeo.com. |
+// Copyright (C) 2017 Eyeo GmbH |
+// |
+// help.eyeo.com is free software: you can redistribute it and/or modify |
+// it under the terms of the GNU General Public License as published by |
+// the Free Software Foundation, either version 3 of the License, or |
+// (at your option) any later version. |
+// |
+// help.eyeo.com is distributed in the hope that it will be useful, |
+// but WITHOUT ANY WARRANTY; without even the implied warranty of |
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
+// GNU General Public License for more details. |
+// |
+// You should have received a copy of the GNU General Public License |
+// along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>. |
+ |
+#site-search |
+{ |
+ clear: both; |
+ width: 100%; |
+ |
+ &:not(.open) |
juliandoucette
2017/07/14 14:11:29
http://caniuse.com/#feat=css-sel3
ire
2017/07/17 09:25:54
The only issue is IE8. So this will also be depend
|
+ { |
+ display: none; |
+ } |
+ |
+ @media (min-width: $tablet-breakpoint) |
+ { |
+ clear: none; |
+ width: auto; |
+ |
+ &:not(.open) |
+ { |
+ display: block; |
+ } |
+ } |
+} |
+ |
+// Product Website Link |
+ |
+#product-website-link |
+{ |
+ float: right; |
+} |
+ |
+#site-search.open #product-website-link |
+{ |
+ float: none; |
+ |
+ @media (min-width: $mobile-breakpoint) |
+ { |
+ float: right; |
+ margin-top: 20px; |
+ } |
+ |
+ @media (min-width: $tablet-breakpoint) |
+ { |
+ margin-top: 0; |
+ } |
+} |
+ |
+// Search Form |
+ |
+#searchform |
+{ |
+ display: inline-block; |
+ position: relative; |
+ overflow: hidden; |
+ width: 100%; |
+ height: $searchform-height; |
+ border-radius: 3px; |
+ color: $gray; |
+ background: #fff; |
+ line-height: 1; |
+ vertical-align: middle; |
+ |
+ @media (min-width: $mobile-breakpoint) |
+ { |
+ max-width: $searchform-width; |
+ } |
+} |
+ |
+#site-search.open #searchform |
+{ |
+ margin-top: 20px; |
+ |
+ @media (min-width: $tablet-breakpoint) |
+ { |
+ margin-top: 0; |
+ } |
+} |
+ |
+#searchform input |
+{ |
+ width: 100%; |
+ height: $searchform-height - 2px; |
+ padding-right: $searchform-height + 5px; |
+ padding-left: 10px; |
+ border: 0; |
+ font-family: $primary-font; |
+ font-size: $small-font; |
+} |
+ |
+#searchform button |
+{ |
+ position: absolute; |
+ top: 0; |
+ right: 0; |
+ width: $searchform-height; |
+ height: 100%; |
+ border: 0; |
+ background-color: transparent; |
+} |
+ |
+#searchform button img |
+{ |
+ height: 15px; |
+} |
+ |
+html[dir="rtl"] |
+{ |
+ #searchform input |
+ { |
+ padding-right: 10px; |
+ padding-left: $searchform-height + 5px; |
+ } |
+ |
+ #searchform button |
+ { |
+ right: auto; |
+ left: 0; |
+ } |
+ |
+ #product-website-link |
+ { |
+ float: left; |
+ } |
+} |