_top-bar.scss in foundation-rails-5.3.0.0

- old
+ new

@@ -40,10 +40,11 @@
 $topbar-link-weight: $font-weight-normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg: $topbar-bg !default;
 $topbar-link-bg-hover: #272727 !default;
+$topbar-link-bg-color-hover: #555555 !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
 $topbar-link-text-transform: none !default;
 $topbar-link-padding: $topbar-height / 3 !default;
@@ -214,26 +215,24 @@
           line-height: $topbar-height;
         }
 
         // Adding the class "menu-icon" will add the 3-line icon people love and adore.
         &.menu-icon {
-          #{$opposite-direction}: $topbar-link-padding;
           top: 50%;
           margin-top: -16px;
-          padding-#{$default-float}: 40px;
 
           a {
             @if $text-direction == rtl {
               text-indent: -58px;
             }
             height: 34px;
             line-height: 33px;
-            padding: 0;
+            padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
             color: $topbar-menu-link-color;
             position: relative;
 
-            &::after {
+            & {
               // @include hamburger icon
               //
               // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
               // $width - Width of hamburger icon
               // $left - If false, icon will be centered horizontally || explicitly set value in rem
@@ -241,12 +240,11 @@
               // $thickness - thickness of lines in hamburger icon, set value in px
               // $gap - spacing between the lines in hamburger icon, set value in px
               // $color - icon color
               // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
               // $offcanvas - Set to false of @include in topbar
-              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false );
-              #{$opposite-direction}: 0;
+              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
             }
           }
         }
       }
 
@@ -333,11 +331,14 @@
           &.alert { @include button-style($bg:$alert-color); }
         }
 
         // Apply the hover link color when it has that class
         &:hover:not(.has-form) > a {
-          background: $topbar-link-bg-hover;
+          background-color: $topbar-link-bg-color-hover;
+          @if ($topbar-link-bg-hover) {
+            background: $topbar-link-bg-hover;
+          }
           color: $topbar-link-color-hover;
 
         }
 
         // Apply the active link color when it has that class
@@ -475,20 +476,28 @@
         }
 
         li {
           &.hover {
             > a:not(.button) {
-              background: $topbar-link-bg-hover;
+              background-color: $topbar-link-bg-color-hover;
+              @if ($topbar-link-bg-hover) {
+                background: $topbar-link-bg-hover;
+              }
               color: $topbar-link-color-hover;
             }
           }
           &:not(.has-form) {
             a:not(.button) {
               padding: 0 $topbar-link-padding;
               line-height: $topbar-height;
               background: $topbar-link-bg;
-              &:hover { background: $topbar-link-bg-hover; }
+              &:hover {
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
+              }
             }
           }
           &.active:not(.has-form) {
             a:not(.button) {
               padding: 0 $topbar-link-padding;
@@ -561,11 +570,14 @@
               color: $topbar-dropdown-link-color;
               background: $topbar-dropdown-link-bg;
             }
             &:not(.has-form):hover > a:not(.button) {
               color: $topbar-link-color-hover;
-              background: $topbar-link-bg-hover;
+              background-color: $topbar-link-bg-color-hover;
+              @if ($topbar-link-bg-hover) {
+                background: $topbar-link-bg-hover;
+              }
             }
 
             label {
               white-space: nowrap;
               background: $topbar-dropdown-label-bg;
@@ -618,10 +630,13 @@
       // background & text color on hover.
       .no-js .top-bar-section {
         ul li {
           // Apply the hover link color when it has that class
           &:hover > a {
-            background: $topbar-link-bg-hover;
+            background-color: $topbar-link-bg-color-hover;
+            @if ($topbar-link-bg-hover) {
+              background: $topbar-link-bg-hover;
+            }
             color: $topbar-link-color-hover;
           }
 
           // Apply the active link color when it has that class
           &:active > a {