Fix hamburger for topbar and offcanvas

diff --git a/doc/includes/off_canvas/examples_offcanvas_variables.html b/doc/includes/off_canvas/examples_offcanvas_variables.html
index 3525d8bc70516b6bcd65cc11bb551101f987d545..c31aa070b1e407db695abd964b5f02b215f76dd0 100644 (file)
--- a/doc/includes/off_canvas/examples_offcanvas_variables.html
+++ b/doc/includes/off_canvas/examples_offcanvas_variables.html
@@ -43,7 +43,6 @@ $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
 $tabbar-menu-icon-width: $tabbar-height !default;
 $tabbar-menu-icon-height: $tabbar-height !default;
-$tabbar-menu-icon-line-height: rem-calc(33) !default;
 $tabbar-menu-icon-padding: 0 !default;
 
 $tabbar-hamburger-icon-width: rem-calc(16) !default;
@@ -60,4 +59,4 @@ $off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;
 // Transition Variabls
 $menu-slide: "transform 500ms ease" !default;
 ```
-{{/markdown}}
\ No newline at end of file
+{{/markdown}}

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 597904ad7784a8cc8afacb1e44b0fe9fcf140694..e96f7443a24e9cdf25f648ed208570fa3b838cc9 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -716,7 +716,6 @@
 // $tabbar-menu-icon-text-indent: rem-calc(35);
 // $tabbar-menu-icon-width: $tabbar-height;
 // $tabbar-menu-icon-height: $tabbar-height;
-// $tabbar-menu-icon-line-height: rem-calc(33);
 // $tabbar-menu-icon-padding: 0;
 
 // $tabbar-hamburger-icon-width: rem-calc(16);

diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index ae6b801d6017fe34de2f69df803fad383bd4c2eb..16762dc4ebf35142e1a850fa22b3dc820f59ff5f 100644 (file)
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -31,7 +31,7 @@ $base-line-height: 150% !default;
 
 // @mixins
 //
-// We use this to optionally include experimental or 
+// We use this to optionally include experimental or
 // explicitly vendor prefixed properties
 @mixin experimental() {
   @if $experimental {
@@ -135,12 +135,12 @@ $base-line-height: 150% !default;
 // $hover-color - icon color during hover
 // $offcanvas - Set to true of @include in offcanvas
 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
-  span:after {
-    content: '';
+  span::after {
+    content: "";
     position: absolute;
     display: block;
     height: 0;
-    
+
     @if $offcanvas {
       @if $top {
         top: $top;
@@ -156,7 +156,12 @@ $base-line-height: 150% !default;
          left: ($tabbar-menu-icon-width - $width)/2;
        }
     }
-       
+    @else {
+      top: 50%;
+      margin-top: -$width/2;
+      #{$opposite-direction}: $topbar-link-padding;
+    }
+
     box-shadow:
       0 0px 0 $thickness $color,
       0 $gap + $thickness 0 $thickness $color,
@@ -320,11 +325,11 @@ $cursor-text-value: text !default;
   // Meta styles are included in all builds, as they are a dependancy of the Javascript.
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
-  
+
   meta.foundation-version {
     font-family: "/5.2.3/";
   }
-  
+
   meta.foundation-mq-small {
     font-family: "/" + unquote($small-up) + "/";
     width: lower-bound($small-range);

diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
index 8390102b814dbf56a6f3f5c9a14791334e8ff365..1dbffb821bd604abb7b35bcf4edf2a78854eb0cf 100755 (executable)
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -50,7 +50,6 @@ $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%)
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
 $tabbar-menu-icon-width: $tabbar-height !default;
 $tabbar-menu-icon-height: $tabbar-height !default;
-$tabbar-menu-icon-line-height: rem-calc(33) !default;
 $tabbar-menu-icon-padding: 0 !default;
 
 $tabbar-hamburger-icon-width: rem-calc(16) !default;
@@ -288,7 +287,6 @@ $menu-slide: "transform 500ms ease" !default;
       width: $tabbar-height;
       height: $tabbar-height;
       display: block;
-      line-height: $tabbar-menu-icon-line-height;
       padding: $tabbar-menu-icon-padding;
       color: $tabbar-menu-icon-color;
       position: relative;

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 10eb92bce044678283f424ee602586917e45d165..2976cf0ae521ae5e9195f0bdbd11ff9b0528fd22 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -216,10 +216,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         // 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 {
@@ -227,11 +225,11 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
             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
@@ -243,8 +241,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               // $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);
             }
           }
         }