_navigation_bar.scss in furatto-1.1.5

- old
+ new

@@ -63,19 +63,23 @@
 $navigation-bar-dropdown-header-font-size: px-to-rems(8) !default;
 $navigation-bar-dropdown-divider-height: px-to-rems(1) !default; 
 $navigation-bar-dropdown-anchor-height: 45px !default;
 $navigation-bar-dropdown-anchor-line-height: $navigation-bar-dropdown-anchor-height !default;
 $navigation-bar-dropdown-right-position: 0px !default;
-$navigation-bar-dropdown-border: 1px solid lighten($navigation-bar-background, 10%);
-$include-navigation-bar-dropdown-top-border: false;
-$navigation-bar-dropdown-radius: 3px;
+$navigation-bar-dropdown-border: 1px solid lighten($navigation-bar-background, 10%) !default;
+$include-navigation-bar-dropdown-top-border: false !default;
+$navigation-bar-dropdown-radius: 3px !default;
+$navigation-bar-dropdown-background: $navigation-bar-background !default;
+$navigation-bar-dropdown-divider-color: $navigation-bar-divider-color !default;
 
 
+//Form support
+$navigation-bar-with-form-padding: $navigation-bar-height / 4 $navigation-bar-height / 3 !default;
+$navigation-bar-with-form-input-height: $navigation-bar-height / 2 !default;
+
 //Media
-$media-collapse-width: 768px !default;
-$navigation-bar-collapse-query: "#{$media-display} and (max-width: #{$media-collapse-width})" !default;
-$navigation-bar-uncollapse-query: "#{$media-display} and (min-width: #{$media-collapse-width})" !default;
+$navigation-bar-collapse-width: 768px !default;
 
 .navigation-bar {
   background: $navigation-bar-background;
   height: $navigation-bar-height;
   margin-bottom: $navigation-margin-bottom;
@@ -95,22 +99,51 @@
     } 
 
     ul:not(.brand-section) {
       width: 100%;
 
+      li.with-form {
+        margin-bottom: 5px;
+
+        input[type="text"],
+        input[type="search"] {
+          width: 100%;
+          display: block;
+          margin-bottom: 5px;
+        }
+
+        input[type="submit"] {
+          &.button {
+            &.pill {
+              @include border-radius($button-pill-radius); //variable extrated from _buttons.scss
+
+            }
+
+            &.radius {
+              @include border-radius($button-radius); //variable extrated from _buttons.scss
+            }
+          }
+        }
+      }
+
       li.with-dropdown {
         .dropdown {
           position: static;
         }
       }
 
       li {
         width: 100%;
         display: block;
+        padding: 0 $navigation-bar-height / 3;
 
+        a {
+          padding: 0;
+        }
+
         .button {
-          width: 96%;
+          width: 100%;
           margin-left: auto;
           margin-right: auto;
         }
 
         &.divider {
@@ -201,10 +234,42 @@
         height: $navigation-bar-height; 
         border-left: 1px solid $navigation-bar-divider-color;
       }
     }
 
+    li.with-form {
+      padding: $navigation-bar-with-form-padding; 
+
+      input[type="text"],
+      input[type="search"] {
+        margin: 0;
+        width: auto;
+        float: left;
+        height: $navigation-bar-with-form-input-height;
+      }
+
+      input[type="submit"] {
+        float: left;
+        height: $navigation-bar-with-form-input-height;
+        line-height: 0;
+
+        &.button {
+          margin: 0;
+
+          &.pill {
+            @include border-radius(0 $button-pill-radius $button-pill-radius 0); //variable extrated from _buttons.scss
+
+          }
+
+          &.radius {
+            @include border-radius(0 $button-radius $button-radius 0); //variable extrated from _buttons.scss
+
+          }
+        }
+      }
+    }
+
     li.with-dropdown {
       position: relative;
 
       &.opened {
         .dropdown {
@@ -220,20 +285,20 @@
         left: 0;
         z-index: $navigation-bar-dropdown-z-index;
         min-width: 100%;
         @include border-radius(0px 0px $navigation-bar-dropdown-radius $navigation-bar-dropdown-radius);
         border: $navigation-bar-dropdown-border;
+        background: $navigation-bar-dropdown-background;
 
         //Handle the top border on dropdowns as not always should be there
         @if $include-navigation-bar-dropdown-top-border == false {
           border-top: none;
         }
 
         li {
           width: 100%;
           height: auto;
-          background: $navigation-bar-background;
           white-space: nowrap;
 
           a {
             height: $navigation-bar-dropdown-anchor-height;
             line-height: $navigation-bar-dropdown-anchor-line-height;
@@ -248,11 +313,11 @@
             font-size: $navigation-bar-dropdown-header-font-size;
           }
 
           &.divider {
             height: $navigation-bar-dropdown-divider-height; 
-            border-top: 1px solid $navigation-bar-divider-color;
+            border-top: 1px solid $navigation-bar-dropdown-divider-color;
           }
         }
       }
     }
 
@@ -301,19 +366,19 @@
     z-index: $navigation-fixed-z-index;
   }
 
 }
 
-@media #{$navigation-bar-uncollapse-query} {
+@include min-screen($navigation-bar-collapse-width) {
   .navigation-bar { overflow: visible; }
 }
 
 //iPad fix
-@media only screen and (orientation: portrait) {
+@include ipad($orientation: portrait) {
   .navigation-bar { overflow: hidden; }
 }
 
-@media #{$navigation-bar-collapse-query} {
+@include max-screen($navigation-bar-collapse-width) {
   .off-screen {
     .navigation-bar {
       .brand-section {
         .brand-name {
           a {