_top-bar.scss in foundation-rails-6.2.1.0

- old
+ new

@@ -20,11 +20,11 @@
 
 /// Spacing for the top bar title.
 /// @type Number
 $topbar-title-spacing: 1rem !default;
 
-/// Width of `<input>` elements inside the top bar.
+/// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
 /// Breakpoint at which top bar switches from mobile to desktop view.
 /// @type Breakpoint
@@ -56,11 +56,11 @@
     }
   }
 
   // Restrain width of inputs by default to make them easier to arrange
   input {
-    width: $topbar-input-width;
+    max-width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
 
   // The above styles shouldn't apply to input group fields
   .input-group-field {
@@ -116,28 +116,30 @@
 
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
     @include top-bar-container;
-  }
 
-  // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
-  @each $size in $breakpoint-classes {
-    .stacked-for-#{$size} {
-      @include breakpoint($size down) {
-        @include top-bar-stacked;
+    // Stack on small screens by default
+    @include top-bar-stacked;
+
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
+
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        &.stacked-for-#{$size} {
+          @include breakpoint($size down) {
+            @include top-bar-stacked;
+          }
+        }
       }
     }
   }
 
-  // Stack on small screens by default
-  @include top-bar-stacked;
-
-  @include breakpoint($topbar-unstack-breakpoint) {
-    @include top-bar-unstack;
-  }
-
   // Sub-sections
   @if $global-flexbox {
     .top-bar-title {
       flex: 0 0 auto;
       margin-right: $topbar-title-spacing;
@@ -150,10 +152,10 @@
   }
   @else {
     .top-bar-title {
       float: left;
       margin-right: $topbar-title-spacing;
-      
+
     }
 
     .top-bar-left {
       float: left;
     }