From fdaf40eb363204176580b742ee5ebc5783aa714c Mon Sep 17 00:00:00 2001 From: dGs- Date: Thu, 5 Jun 2014 13:19:13 +1000 Subject: [PATCH] Fix hamburger for topbar and offcanvas --- .../examples_offcanvas_variables.html | 3 +-- scss/foundation/_settings.scss | 1 - scss/foundation/components/_global.scss | 19 ++++++++++++------- scss/foundation/components/_offcanvas.scss | 2 -- scss/foundation/components/_top-bar.scss | 9 +++------ 5 files changed, 16 insertions(+), 18 deletions(-) diff --git a/doc/includes/off_canvas/examples_offcanvas_variables.html b/doc/includes/off_canvas/examples_offcanvas_variables.html index 3525d8bc7..c31aa070b 100644 --- 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 597904ad7..e96f7443a 100644 --- 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 ae6b801d6..16762dc4e 100644 --- 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 8390102b8..1dbffb821 100755 --- 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 10eb92bce..2976cf0ae 100644 --- 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); } } } -- 2.47.2