#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

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 0a74b43aeed3f22be1740ffc0024d74b8dc967a4..4ee45a7d8472f02cdd70a8dc14464c75d4274268 100644 (file)
--- 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;
+  }
 }