Option to change active classname through variable

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

Hide file tree

Showing 23 changed files with 24 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -146,9 +146,10 @@ $hamburger-bar-spacing:                     round($hamburger-size / 5); // How f
 $hamburger-animation-speed:                 1; // The timings of the animations are carefully chosen. But you 
                                             // can use this factor variable to slow down or speed up the animations. 
                                             // Use .5 for twice as slow, 2 for twice as fast etc.
-$hamburger-class-name:                      'hamburger' // The main class and prefixes of the animation classes 
+$hamburger-class-name:                      'hamburger'; // The main class and prefixes of the animation classes 
                                             // can be changed. This allows for different styled buttons on the 
                                             // same page.
+$hamburger-active-class-name:               'active'; // Change the classname that triggers the animation
 $hamburger-extra-transition-rules:          &; // = null. If you need extra transition rules on the base element
                                             // you can set this variable and it gets appended. This way you don't 
                                             // need to overwrite the plugin transition rules. Example:

diff --git a/scss/_base.scss b/scss/_base.scss
@@ -60,7 +60,7 @@ div.#{$hamburger-class-name} {
         }
     }
 
-    &.active {
+    &.#{$hamburger-active-class-name} {
         background-color: $hamburger-background-active;
 
         span.bar {

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

diff --git a/scss/animations/_apple.scss b/scss/animations/_apple.scss
@@ -25,7 +25,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: rotate(90deg) translate3d($hamburger-thickness / 2, -$hamburger-thickness / 2, 0);
                 transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing;

diff --git a/scss/animations/_arrow-right.scss b/scss/animations/_arrow-right.scss
@@ -18,7 +18,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: rotate(-180deg) translate3d(0, -$hamburger-thickness, 0);
             }

diff --git a/scss/animations/_arrow.scss b/scss/animations/_arrow.scss
@@ -23,7 +23,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: rotate(180deg) translate3d(0, -$hamburger-thickness, 0);
             }

diff --git a/scss/animations/_chop.scss b/scss/animations/_chop.scss
@@ -23,7 +23,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 top: 0;
 

diff --git a/scss/animations/_collapse.scss b/scss/animations/_collapse.scss
@@ -27,7 +27,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 transition: transform 0.25s / $hamburger-animation-speed $hamburger-easing, 
                     opacity 0.25s / $hamburger-animation-speed $hamburger-easing;

diff --git a/scss/animations/_converge.scss b/scss/animations/_converge.scss
@@ -23,7 +23,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 top: 0;
 

diff --git a/scss/animations/_criss-cross.scss b/scss/animations/_criss-cross.scss
@@ -40,7 +40,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 &::before,
                 &::after {

diff --git a/scss/animations/_default.scss b/scss/animations/_default.scss
@@ -2,7 +2,7 @@
 
 @if index($hamburger-animations, default) {
     .#{$hamburger-class-name}--default {
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 top: 0;
 

diff --git a/scss/animations/_dive.scss b/scss/animations/_dive.scss
@@ -21,7 +21,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 &:nth-child(1) {
                     transform: rotate(135deg);

diff --git a/scss/animations/_flatten.scss b/scss/animations/_flatten.scss
@@ -6,7 +6,7 @@
             transition: transform 0.3s / $hamburger-animation-speed $hamburger-easing;
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 &:nth-child(1) {
                     transform: translate3d(0, $hamburger-bar-spacing, 0);

diff --git a/scss/animations/_magnetic.scss b/scss/animations/_magnetic.scss
@@ -30,7 +30,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 transition: transform 0.2s / $hamburger-animation-speed $hamburger-easing;
 

diff --git a/scss/animations/_minimal.scss b/scss/animations/_minimal.scss
@@ -21,7 +21,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 transition:
                     transform 0.4s / $hamburger-animation-speed $hamburger-easing,

diff --git a/scss/animations/_parallel.scss b/scss/animations/_parallel.scss
@@ -34,7 +34,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 top: 0;
                 transition:

diff --git a/scss/animations/_push.scss b/scss/animations/_push.scss
@@ -22,7 +22,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: translate3d(0, $hamburger-size * 1.1, 0);
             }

diff --git a/scss/animations/_shelf.scss b/scss/animations/_shelf.scss
@@ -39,7 +39,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 transition: 
                     transform 0.3s / $hamburger-animation-speed $hamburger-easing,

diff --git a/scss/animations/_simple.scss b/scss/animations/_simple.scss
@@ -22,7 +22,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 &:nth-child(1) {
                     transform: rotate(-45deg) translate3d(0, 0, 0);

diff --git a/scss/animations/_spin.scss b/scss/animations/_spin.scss
@@ -30,7 +30,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: rotate(180deg) translate3d(0, -$hamburger-thickness, 0);
             }

diff --git a/scss/animations/_stack.scss b/scss/animations/_stack.scss
@@ -27,7 +27,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 transition: transform 0.25s / $hamburger-animation-speed $hamburger-easing, 
                     opacity 0.25s / $hamburger-animation-speed $hamburger-easing;

diff --git a/scss/animations/_twist.scss b/scss/animations/_twist.scss
@@ -27,7 +27,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             span.bar {
                 &:nth-child(1) {
                     transform: rotate(45deg);

diff --git a/scss/animations/_vertical.scss b/scss/animations/_vertical.scss
@@ -32,7 +32,7 @@
             }
         }
 
-        &.active {
+        &.#{$hamburger-active-class-name} {
             > .inner {
                 transform: rotate(90deg) translate3d($hamburger-thickness / 2, -$hamburger-thickness / 2, 0);
                 transition: transform 0.4s / $hamburger-animation-speed $hamburger-easing-out;