From c31390c1552f020cf0fa03021a4b602a60b55683 Mon Sep 17 00:00:00 2001
From: Tvrtko <tvrtkom@gmail.com>
Date: Tue, 15 Dec 2015 00:56:05 +0100
Subject: [PATCH] #7502 - add classes for top-bar stacking

- 'stacked' class must be applied to 'top-bar' for stacking to work.
- added stack breakpoints for medium and small screens
---
 scss/components/_top-bar.scss | 49 ++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 0a74b43ae..4ee45a7d8 100644
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -40,27 +40,58 @@ $topbar-input-width: 200px !default;
     width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
-  
+
   input.button {
     width:auto;
   }
 }
 
+/// makes sections stacked
+@mixin top-bar-stacked() {
+  .top-bar-right {
+    width: 100%;
+  }
+  .top-bar-left {
+    width: 100%;
+  }
+}
+
+/// 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;
   }
-
-  // Sub-sections
+  // Stack on medium screens smaller
+  .stacked-for-medium {
+    @include breakpoint(medium down) {
+      @include top-bar-stacked;
+    }
+  }
   // Stack on small screens
-  @include breakpoint(medium) {
-    .top-bar-left {
-      float: left;
+  .stacked,
+  .stacked-for-small {
+    @include breakpoint(small) {
+      @include top-bar-stacked;
     }
-
-    .top-bar-right {
-      float: right
+    @include breakpoint(medium) {
+      @include top-bar-unstack;
     }
   }
+
+  // Sub-sections
+  .top-bar-left {
+    float: left;
+  }
+  .top-bar-right {
+    float: right;
+  }
 }
-- 
2.47.3