From 26d93b67503d46aec554b94e7c576e28e1b7f7f8 Mon Sep 17 00:00:00 2001
From: Tvrtko <tvrtkom@gmail.com>
Date: Tue, 15 Dec 2015 20:03:17 +0100
Subject: [PATCH] #7502 - generate stacked-for- classes for each screen size
 (in $breakpoint-classes var)

default behaviour is stacking sections on small screens only.
---
 scss/components/_top-bar.scss | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 4ee45a7d8..2ef91bf63 100644
--- 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
-- 
2.47.2