Added hamburger-width variable, allowing for non-square buttons

kapoko · Jan 4, 2021 · f22e3eb · f22e3eb
1 parent 72185c6
commit f22e3eb
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -116,7 +116,8 @@ $hamburger-color:               #fff;
 Here's a full list of the customizable options available with their default values:
 
 ```scss
-$hamburger-size:                            50px;
+$hamburger-size:                            50px; // Set both width and height
+$hamburger-width:                           $hamburger-size; // Width (overrides $size, for a non square button)
 $hamburger-thickness:                       2px; // Thickness of the bars
 $hamburger-color:                           #000;
 $hamburger-color-hover:                     $hamburger-color;

diff --git a/scss/_base.scss b/scss/_base.scss
@@ -12,12 +12,12 @@
 
 button.#{$hamburger-class-name} {
     height: $hamburger-size;
-    width: $hamburger-size;    
+    width: $hamburger-width;    
 }
 
 div.#{$hamburger-class-name} {
     height: $hamburger-size - ($hamburger-border-width * 2);
-    width: $hamburger-size - ($hamburger-border-width * 2);
+    width: $hamburger-width - ($hamburger-border-width * 2);
 
     > .inner {
         top: 50%;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -4,6 +4,7 @@
 $hamburger-class-name: 'hamburger' !default;
 $hamburger-active-class-name: 'active' !default;
 $hamburger-size: 50px !default;
+$hamburger-width: $hamburger-size !default;
 $hamburger-thickness: 2px !default;
 $hamburger-color: #000 !default;
 $hamburger-color-hover: $hamburger-color !default;