_top-bar.scss in foundation-rails-6.2.0.0

- old
+ new

@@ -12,53 +12,108 @@
 
 /// Background color for the top bar. This color also cascades to menus within the top bar.
 /// @type Color
 $topbar-background: $light-gray !default;
 
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
+/// @type Color
+$topbar-submenu-background: $topbar-background !default;
+
 /// Spacing for the top bar title.
 /// @type Number
 $topbar-title-spacing: 1rem !default;
 
 /// Width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+/// @type Breakpoint
+$topbar-unstack-breakpoint: medium !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;
 
   &,
   ul {
     background-color: $topbar-background;
   }
 
+  // Check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
+  // Restrain width of inputs by default to make them easier to arrange
   input {
     width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
 
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
   // scss-lint:disable QualifyingElement
   input.button {
     width: auto;
   }
 }
 
-/// makes sections stacked
+/// Makes sections of a top bar stack on top of each other.
 @mixin top-bar-stacked {
-  // Sub-sections
-  .top-bar-title {
-    width: 100%;
-  }
+  @if $global-flexbox {
+    flex-wrap: wrap;
 
-  .top-bar-right {
-    width: 100%;
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
   }
+  @else {
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      width: 100%;
+    }
+  }
+}
 
-  .top-bar-left {
-    width: 100%;
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    // scss-lint:disable ZeroUnit
+    .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 {
@@ -72,23 +127,40 @@
         @include top-bar-stacked;
       }
     }
   }
 
-  // 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
-  .top-bar-title {
-    float: left;
-    margin-right: $topbar-title-spacing;
+  @if $global-flexbox {
+    .top-bar-title {
+      flex: 0 0 auto;
+      margin-right: $topbar-title-spacing;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
   }
-  .top-bar-left {
-    float: left;
-  }
+  @else {
+    .top-bar-title {
+      float: left;
+      margin-right: $topbar-title-spacing;
+      
+    }
 
-  .top-bar-right {
-    float: right;
+    .top-bar-left {
+      float: left;
+    }
+
+    .top-bar-right {
+      float: right;
+    }
   }
 }