Add flexbox mode to top bar

diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md
index af81e03586c49e2ca71739bd869c9402a4e2d2ec..97335fb6b647a104288bfce535384006b3c49759 100644 (file)
--- a/docs/pages/top-bar.md
+++ b/docs/pages/top-bar.md
@@ -8,6 +8,10 @@ sass: ./scss/components/_top-bar.scss
   <p>The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
 </div>
 
+<div class="primary callout">
+  <p>This component supports flexbox mode. <a href="#">Learn how to enable flexbox mode</a>.</p>
+</div>
+
 ## Basics
 
 A top bar (`.top-bar`) can have two sections: a left-hand section (`.top-bar-left`) and a right-hand section (`.top-bar-right`). On small screens, these sections stack on top of each other.

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 335d245520469286e5150fbda5bab0add441f41a..9134bccc1fc8c7f854ddf840ecea85e892bf54fb 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -24,7 +24,16 @@ $topbar-input-width: 200px !default;
 
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
-  @include clearfix;
+  @if $global-flexbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  }
+  @else {
+    @include clearfix;
+  }
+
   padding: $topbar-padding;
 
   &,
@@ -48,13 +57,24 @@ $topbar-input-width: 200px !default;
 
 /// makes sections stacked
 @mixin top-bar-stacked {
-  // Sub-sections
-  .top-bar-right {
-    width: 100%;
+  @if $global-flexbox {
+    flex-wrap: wrap;
+
+    // Sub-sections
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
   }
+  @else {
+    // Sub-sections
+    .top-bar-right {
+      width: 100%;
+    }
 
-  .top-bar-left {
-    width: 100%;
+    .top-bar-left {
+      width: 100%;
+    }
   }
 }
 
@@ -79,11 +99,19 @@ $topbar-input-width: 200px !default;
   }
 
   // Sub-sections
-  .top-bar-left {
-    float: left;
+  @if $global-flexbox {
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
   }
-  
-  .top-bar-right {
-    float: right;
+  @else {
+    .top-bar-left {
+      float: left;
+    }
+    
+    .top-bar-right {
+      float: right;
+    }
   }
 }