From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 9 Feb 2016 17:31:00 +0000 (-0800)
Subject: Add $topbar-unstack-breakpoint to configure when the top bar switches from mobile... 
X-Git-Tag: v6.2.0-rc.1~26
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a08dfb5b44dca382b872ac7dd8791e07b96be3c8;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add $topbar-unstack-breakpoint to configure when the top bar switches from mobile to desktop view, closes #7502
---

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 4f2c6c650..6e5bdda87 100644
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -26,6 +26,9 @@ $topbar-title-spacing: 1rem !default;
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+$topbar-unstack-breakpoint: medium !default;
+
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
   @if $global-flexbox {
@@ -45,7 +48,7 @@ $topbar-input-width: 200px !default;
     background-color: $topbar-background;
   }
 
-  // check if $topbar-background is differnt from $topbar-background-submenu
+  // Check if $topbar-background is differnt from $topbar-background-submenu
   @if ($topbar-background != $topbar-submenu-background) {
     ul ul {
       background-color: $topbar-submenu-background;
@@ -63,7 +66,7 @@ $topbar-input-width: 200px !default;
   }
 }
 
-/// makes sections stacked
+/// Makes sections of a top bar stack on top of each other.
 @mixin top-bar-stacked {
   @if $global-flexbox {
     flex-wrap: wrap;
@@ -84,6 +87,24 @@ $topbar-input-width: 200px !default;
   }
 }
 
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
+  }
+}
+
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
@@ -99,9 +120,11 @@ $topbar-input-width: 200px !default;
     }
   }
 
-  // Stack on small screens as default
-  @include breakpoint(small only) {
-    @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