_top-bar.scss in foundation-rails-6.3.0.0

- old
+ new

@@ -18,11 +18,11 @@
 /// @type Color
 $topbar-submenu-background: $topbar-background !default;
 
 /// Spacing for the top bar title.
 /// @type Number
-$topbar-title-spacing: 1rem !default;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
 
 /// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
@@ -32,13 +32,13 @@
 
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
   @if $global-flexbox {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
   }
   @else {
     @include clearfix;
   }
 
@@ -66,12 +66,11 @@
   .input-group-field {
     width: 100%;
     margin-#{$global-right}: 0;
   }
 
-  // scss-lint:disable QualifyingElement
-  input.button {
+  input.button { // sass-lint:disable-line no-qualifying-elements
     width: auto;
   }
 }
 
 /// Makes sections of a top bar stack on top of each other.
@@ -98,14 +97,14 @@
 /// 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 {
       flex: 1 1 auto;
     }
+
     .top-bar-right {
       flex: 0 1 auto;
     }
   }
   @else {
@@ -142,22 +141,26 @@
 
   // Sub-sections
   @if $global-flexbox {
     .top-bar-title {
       flex: 0 0 auto;
-      margin-right: $topbar-title-spacing;
+      margin: $topbar-title-spacing;
     }
 
     .top-bar-left,
     .top-bar-right {
       flex: 0 0 auto;
     }
   }
   @else {
     .top-bar-title {
+      display: inline-block;
       float: left;
-      margin-right: $topbar-title-spacing;
+      padding: $topbar-title-spacing;
 
+      .menu-icon {
+        bottom: 2px;
+      }
     }
 
     .top-bar-left {
       float: left;
     }