_header.scss in active_frontend-14.0.37

- old
+ new

@@ -1,10 +1,12 @@
 // Table of Contents
 // ==================================================
 // Header
 // Media Queries
 
+// scss-lint:disable NestingDepth
+
 // Header
 // ==================================================
 .header {
   background: color(white);
   border-bottom: 1px solid color(dark-haze);
@@ -36,10 +38,17 @@
   height: 40px;
 }
 .header-brand {
   font-size: 35px;
 
+  img {
+    border-radius: border-radius(n);
+    display: inline-block;
+    height: 40px;
+    margin: 0 auto;
+  }
+
   + .header-search,
   + .header-nav {
     margin-left: 20px;
 
     &.pull-right {
@@ -47,11 +56,11 @@
       margin-right: 20px;
     }
   }
 }
 .header-search {
-  min-width: 260px;
+  width: 260px;
 
   input { margin-bottom: 0; }
 
   + .header-nav {
     margin-left: 20px;
@@ -71,10 +80,24 @@
     float: left;
     margin-right: 20px;
 
     &:last-child { margin-right: 0; }
 
+    &.header-nav-icon {
+      font-size: text-size(l);
+      margin-top: -3px;
+
+      .indicator {
+        background: color(red);
+        border-radius: border-radius(xl);
+        height: 5px;
+        margin-left: 17px;
+        position: absolute;
+        width: 5px;
+      }
+    }
+
     .btn { margin-top: -12px; }
   }
 }
 .header-user {
   float: right;
@@ -83,25 +106,37 @@
     height: 40px;
     display: inline-block;
 
     + i { margin-left: -2px; }
   }
+
+  + .header-nav {
+    &.pull-right { margin-right: 20px; }
+  }
 }
 .header-toggle {
   float: right;
   font-size: 26px;
   padding-top: 5px;
+
+  + .header-toggle { margin-right: 20px; }
 }
 
 // Media Queries
 // ==================================================
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .header-search { width: 220px; }
+}
 @media only screen and (max-width: 767px) {
   .header {
     height: 50px;
     padding: 10px 0;
   }
   .header-brand,
   .header-toggle {
     font-size: 26px;
     padding-top: 1px;
+  }
+  .header-brand {
+    img { height: 32px; }
   }
 }