Fix burger menu

andrewscwei · Apr 16, 2016 · e103219 · e103219
1 parent ee6aea1
commit e103219
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "minuet",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "An experimental stylesheet library.",
   "homepage": "http://VARIANTE.github.io/minuet",
   "license": "MIT",

diff --git a/src/sass/mixins/components.scss b/src/sass/mixins/components.scss
@@ -19,7 +19,6 @@
   @include min-size($width $height);
   @include size($width $height);
   background: transparent;
-  position: relative;
 
   @include state('hover') {
     span:not(:only-of-type):nth-of-type(2) {
@@ -46,14 +45,30 @@
 
       &:nth-of-type(1) {
         transform: translate3d(#{$width / 2}, 0, 0);
-        &::before { transform: translate3d(#{$width / -2 + $thickness}, #{$height / 4}, 0) rotate(45deg); }
-        &::after { transform: translate3d(#{$width / -2 + $thickness}, #{$height / -4 + $thickness}, 0) rotate(-45deg); }
+
+        &::before {
+          @include size($width $thickness);
+          transform: translate3d(#{$width / -2 + $thickness}, #{$height / 4}, 0) rotate(45deg);
+        }
+
+        &::after {
+          @include size($width $thickness);
+          transform: translate3d(#{$width / -2 + $thickness}, #{$height / -4 + $thickness}, 0) rotate(-45deg);
+        }
       }
 
       &:nth-of-type(2) {
         transform: translate3d(#{$width / -2}, 0, 0);
-        &::before { transform: translate3d(#{$thickness * -1}, #{$height / 4}, 0) rotate(-45deg); }
-        &::after { transform: translate3d(#{$thickness * -1}, #{$height / -4 + $thickness}, 0) rotate(45deg); }
+
+        &::before {
+          @include size($width $thickness);
+          transform: translate3d(#{$thickness * -1}, #{$height / 4}, 0) rotate(-45deg);
+        }
+
+        &::after {
+          @include size($width $thickness);
+          transform: translate3d(#{$thickness * -1}, #{$height / -4 + $thickness}, 0) rotate(45deg);
+        }
       }
     }
   }

diff --git a/src/stylus/mixins/components.styl b/src/stylus/mixins/components.styl
@@ -19,7 +19,6 @@ burger-button($width=27px, $height=20px, $thickness=2px, $color=#fff)
   min-size($width $height)
   size($width $height)
   background: transparent
-  position: relative
 
   +state('hover')
     span:not(:only-of-type):nth-of-type(2)
@@ -29,7 +28,7 @@ burger-button($width=27px, $height=20px, $thickness=2px, $color=#fff)
       &::after
         size($width $thickness)
 
-  +state('hover')
+  +state('active')
     span:only-of-type
       size(0 $thickness)
       &:nth-of-type(1)
@@ -49,15 +48,19 @@ burger-button($width=27px, $height=20px, $thickness=2px, $color=#fff)
       &:nth-of-type(1)
         transform: translate3d(($width / 2), 0, 0)
         &::before
+          size($width $thickness)
           transform: translate3d(($width / -2 + $thickness), ($height / 4), 0) rotate(45deg)
         &::after
+          size($width $thickness)
           transform: translate3d(($width / -2 + $thickness), ($height / -4 + $thickness), 0) rotate(-45deg)
 
       &:nth-of-type(2)
         transform: translate3d(($width / -2), 0, 0)
         &::before
+          size($width $thickness)
           transform: translate3d(($thickness * -1), ($height / 4), 0) rotate(-45deg)
         &::after
+          size($width $thickness)
           transform: translate3d(($thickness * -1), ($height / -4 + $thickness), 0) rotate(45deg)
 
   span:only-of-type,