From 09edd42cd70ad1bdca146585fc09f32b3acef726 Mon Sep 17 00:00:00 2001
From: kapoko <kasper.koman@gmail.com>
Date: Mon, 4 Jan 2021 19:43:55 +0100
Subject: [PATCH] Added extra transition rules variable

---
 README.md            | 4 ++++
 scss/_base.scss      | 3 ++-
 scss/_variables.scss | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d078ddc5..b5d5c5a5 100644
--- a/README.md
+++ b/README.md
@@ -149,6 +149,10 @@ $hamburger-animation-speed:                 1; // The timings of the animations
 $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-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:
+                                            // $hamburger-extra-transition-rules: box-shadow 0.15s ease-in-out;
 ```
 
 #### Select which animations to compile by variable
diff --git a/scss/_base.scss b/scss/_base.scss
index 9c222c26..95216742 100644
--- a/scss/_base.scss
+++ b/scss/_base.scss
@@ -25,6 +25,7 @@ div.#{$hamburger-class-name} {
 }
 
 .#{$hamburger-class-name} {
+    $base-transitions: opacity $hamburger-opacity-transition-speed $hamburger-easing, background $hamburger-background-transition-speed $hamburger-easing;
     background-color: $hamburger-background;
     border: $hamburger-border-width $hamburger-border-color solid;
     border-radius: $hamburger-border-radius;
@@ -36,7 +37,7 @@ div.#{$hamburger-class-name} {
     overflow: visible;
     padding: $hamburger-padding;
     text-transform: none;
-    transition: opacity $hamburger-opacity-transition-speed $hamburger-easing, background $hamburger-background-transition-speed $hamburger-easing;
+    transition: append($base-transitions, $hamburger-extra-transition-rules);
 
     &:hover {
         background-color: $hamburger-background-hover;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d40a70a4..00d8d809 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -21,6 +21,7 @@ $hamburger-border-radius: 0 !default;
 $hamburger-bar-border-radius: 0 !default;
 $hamburger-bar-spacing: round($hamburger-size / 5) !default;
 $hamburger-animation-speed: 1 !default;
+$hamburger-extra-transition-rules: & !default;
 
 // Animation types. Use this as a variable and remove the animations
 // you don't need so they won't get compiled in your css.