Issue 6237 - Implement wd navbar component in help.eyeo.com

static/src/scss/layout/_header.scss

Index: static/src/scss/layout/_header.scss
===================================================================
--- a/static/src/scss/layout/_header.scss
+++ b/static/src/scss/layout/_header.scss
@@ -15,72 +15,72 @@
 // along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
 
 /*******************************************************************************
  * Site Header
  ******************************************************************************/
 
 #site-header
 {
-  min-height: $site-header-height;
-  font-size: $small-font;
-  line-height: $site-header-content-line-height;
-}
+  /* .toggle-navbar-collapse img
+   ******************************************************************************/
+  
+  .toggle-navbar-collapse img { width: $small-space; }
 
-#site-title
-{
-  float: left;
-  margin-right: $large-space;
-}
+  /* .navbar-collapse
+   ******************************************************************************/
 
-html[dir="rtl"] #site-title
-{
-  float: right;
-  margin-right: 0;
-  margin-left: $large-space;
-}
+  .navbar-collapse
+  {
+    padding-top: $navbar-padding;
+    padding-bottom: $navbar-padding;
 
-#site-title img
-{
-  height: $medium-space;
-  vertical-align: middle;
-}
+    @media (min-width: $tablet-breakpoint)
+    {
+      float: none;
+    }
+  }
 
-.toggle-navbar-collapse
-{
-  width: $site-header-content-line-height;
-  float: right;
-  line-height: $site-header-content-line-height;
-  text-align: right;
-  cursor: pointer;
+  /* #search-form
+   ******************************************************************************/
 
-  img
+  #search-form
   {
-    width: $small-space;
-    vertical-align: middle;
+    @media (min-width: $tablet-breakpoint)
+    {
+      margin: 0 $navbar-padding * 2;
+    }
   }
 }
 
-html[dir="rtl"] .toggle-navbar-collapse
+/* #product-website-link
+ ******************************************************************************/
+
+#product-website-link a { line-height: $navbar-padding * 3; }
+
+#product-website-link img { margin-left: $x-small-space; }
+
+html[dir="rtl"] #product-website-link img { margin-right: $x-small-space; }
+
+.no-js #product-website-link
 {
-  float: left;
-}
+  @media (min-width: $phablet-breakpoint)
+  {
+    margin-top: $navbar-padding;
+  }
 
-.no-js .toggle-navbar-collapse
-{
-  display: none;
+  @media (min-width: $tablet-breakpoint)
+  {
+    margin-top: 0;
+  }
 }
 
 /* Minimal header for non-product pages
  ******************************************************************************/
 
 @media (min-width: $tablet-breakpoint)
 {
-  .site-header-minimal .navbar-collapse
-  {
-    text-align: right;
-  }
+  #site-header.site-header-minimal #search-form { margin: 0; }
+  
+  .site-header-minimal .navbar-collapse { text-align: right; }
 
-  [dir="rtl"] .site-header-minimal .navbar-collapse
-  {
-    text-align: left;
-  }
+  [dir="rtl"] .site-header-minimal .navbar-collapse { text-align: left; }
 }