Issue 5385 - Create Site Header Component for Help Center

static/scss/components/_search-form.scss

 // 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
-{
-  display: none;
-  clear: both;
-
-  &.open
-  {
-    display: block;
-  }
-
-  @media (min-width: $tablet-breakpoint)
-  {
-    display: block;
-    clear: none;
-    width: auto;
-  }
-}
-
-.no-js #site-search
-{
-  display: block;
-}
-
 // Product Website Link
 
 #product-website-link
 {
   float: right;
+}
+
+html[dir="rtl"] #product-website-link
+{
+  float: left;
 }
 
 #product-website-link img
 {
   height: 1em;
   margin-left: 0.5em;
 }
 
-#site-search.open #product-website-link,
+html[dir="rtl"] #product-website-link img
+{
+  margin-right: 0.5em;
+  margin-left: 0;
+}
+
+.navbar-collapse.open #product-website-link,
 .no-js #product-website-link
 {
   float: none;
 
-  @media (min-width: $mobile-breakpoint)
+  @media (min-width: $phablet-breakpoint)
   {
     float: right;
     margin-top: 20px;
   }
 
   @media (min-width: $tablet-breakpoint)
   {
     margin-top: 0;
   }
 }
 
 // Search Form
 
 #search-form
 {
   display: inline-block;
   position: relative;
   overflow: hidden;
   width: 100%;
   height: $search-form-height;
-  border-radius: 3px;
+  border-radius: 4px;
   color: $gray;
   background: #fff;
   line-height: 1;
   vertical-align: middle;
 
-  @media (min-width: $mobile-breakpoint)
+  @media (min-width: $phablet-breakpoint)
   {
     max-width: $search-form-width;
   }
 }
 
-#site-search.open #search-form,
+.navbar-collapse.open #search-form,
 .no-js #search-form
 {
   margin-top: 20px;
 
   @media (min-width: $tablet-breakpoint)
   {
     margin-top: 0;
   }
 }
 
 #search-form input
 {
   width: 100%;
-  height: $search-form-height - 2px;

[juliandoucette, 2017/08/18 15:03:57]

Why -2px?

[ire, 2017/08/21 15:23:22]

It was slightly misaligned if I used the same height. 

[juliandoucette, 2017/08/21 16:28:40]

This seems to ~cause the placeholder text alignment issue I mentioned elsewhere
because the text is vertically aligned inside a form element that has less
height than the white area behind it.

[ire, 2017/08/22 12:15:16]

Oh okay, I've removed it. Doesn't seem to cause a significant issue on my end.

+  height: $search-form-height;
   padding-right: $search-form-height + 5px;

[juliandoucette, 2017/08/18 15:03:57]

NIT: It seems strange to calculate an x value using a y. And why not use ems?
Should this not scale with font-size?

[ire, 2017/08/21 15:23:22]

This padding is used to create an exact square around the submit button (plus
5px for extra space with any text). This is why it uses the height of the search
form. 

[juliandoucette, 2017/08/21 16:28:40]

Acknowledged.

   padding-left: 10px;
   border: 0;
   font-family: $primary-font;
   font-size: $small-font;
+}
+
+html[dir="rtl"] #search-form input
+{
+  padding-right: 10px;
+  padding-left: $search-form-height + 5px;
 }
 
 #search-form button
 {
   position: absolute;
   top: 0;
   right: 0;
   width: $search-form-height;
   height: 100%;
   border: 0;
   background-color: transparent;
+  font-size: 1em;
+}
+
+html[dir="rtl"] #search-form button
+{
+  right: auto;
+  left: 0;
 }
 
 #search-form button img
 {
-  height: 15px;

[juliandoucette, 2017/08/18 15:03:56]

NIT: Shouldn't this be an em value to match the font?

[ire, 2017/08/21 15:23:22]

Yes you're right. Done.

+  height: 1em;
 }
-
-html[dir="rtl"]
-{
-  #search-form input
-  {
-    padding-right: 10px;
-    padding-left: $search-form-height + 5px;
-  }
-
-  #search-form button
-  {
-    right: auto;
-    left: 0;
-  }
-
-  #product-website-link
-  {
-    float: left;
-  }
-
-  #product-website-link img
-  {
-    margin-right: 0.5em;
-    margin-left: 0;
-  }
-}