From e1032192dc6ed72a849a0e63b33f259999efcdc1 Mon Sep 17 00:00:00 2001
From: Andrew Wei <andrew@variante.io>
Date: Fri, 15 Apr 2016 22:19:47 -0700
Subject: [PATCH] Fix burger menu

---
 package.json                      |  2 +-
 src/sass/mixins/components.scss   | 25 ++++++++++++++++++++-----
 src/stylus/mixins/components.styl |  7 +++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c9cdedb..7affd96 100644
--- 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
index ebb89a8..39801ad 100644
--- 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
index 9611b66..3a467e7 100644
--- 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,