Add flexbox mode to title bar

diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss
index 341cea968f00c10901161f0fe1c3e1c398cbf93d..60e89c6f6bd2cb62d45e7cb6b6d171ca39ecdb50 100644 (file)
--- a/scss/components/_title-bar.scss
+++ b/scss/components/_title-bar.scss
@@ -36,24 +36,44 @@ $titlebar-icon-spacing: 0.25rem !default;
 
 @mixin foundation-title-bar {
   .title-bar {
-    @include clearfix;
     background: $titlebar-background;
     color: $titlebar-color;
     padding: $titlebar-padding;
 
+    @if $global-flexbox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    @else {
+      @include clearfix;
+    }
+
     .menu-icon {
       margin-#{$global-left}: $titlebar-icon-spacing;
       margin-#{$global-right}: $titlebar-padding;
     }
   }
 
-  .title-bar-left {
-    float: left;
+  @if $global-flexbox {
+    .title-bar-left,
+    .title-bar-right {
+      flex: 1 1 0px;
+    }
+
+    .title-bar-right {
+      text-align: right;
+    }
   }
+  @else {
+    .title-bar-left {
+      float: left;
+    }
 
-  .title-bar-right {
-    float: right;
-    text-align: right;
+    .title-bar-right {
+      float: right;
+      text-align: right;
+    }
   }
 
   .title-bar-title {