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;
+  height: $search-form-height;
   padding-right: $search-form-height + 5px;
   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;
+  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;
-  }
-}