#7502 - generate stacked-for- classes for each screen size (in $breakpoint-classes...

default behaviour is stacking sections on small screens only.

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 4ee45a7d8472f02cdd70a8dc14464c75d4274268..2ef91bf6362876cc4ad39b8fedad5b00b3b5f5a6 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -48,6 +48,7 @@ $topbar-input-width: 200px !default;
 
 /// makes sections stacked
 @mixin top-bar-stacked() {
+  // Sub-sections
   .top-bar-right {
     width: 100%;
   }
@@ -56,35 +57,22 @@ $topbar-input-width: 200px !default;
   }
 }
 
-/// unstack sections
-@mixin top-bar-unstack() {
-  .top-bar-right {
-    width: auto;
-  }
-  .top-bar-left {
-    width: auto;
-  }
-}
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
     @include top-bar-container;
   }
-  // Stack on medium screens smaller
-  .stacked-for-medium {
-    @include breakpoint(medium down) {
-      @include top-bar-stacked;
+  // 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
-  .stacked,
-  .stacked-for-small {
-    @include breakpoint(small) {
-      @include top-bar-stacked;
-    }
-    @include breakpoint(medium) {
-      @include top-bar-unstack;
-    }
+  // stack on small screens as default
+  @include breakpoint(small down) {
+    @include top-bar-stacked;
   }
 
   // Sub-sections