Merge pull request jonsuh#20 from andreamaiolo/dev-active-state

Added sass variables for active state

README.md

@@ -179,12 +179,15 @@ $hamburger-layer-border-radius             : 4px;
 $hamburger-hover-opacity                   : 0.7;
 $hamburger-hover-transition-duration       : 0.15s;
 $hamburger-hover-transition-timing-function: linear;
+$hamburger-active-layer-color              : #8c8c8c;
+$hamburger-active-hover-opacity            : 1;
 
 // To use CSS filters as the hover effect instead of opacity,
 // set $hamburger-hover-use-filter as true and
 // change the value of $hamburger-hover-filter accordingly.
-$hamburger-hover-use-filter: false;
-$hamburger-hover-filter    : opacity(50%);
+$hamburger-hover-use-filter   : false;
+$hamburger-hover-filter       : opacity(50%);
+$hamburger-active-hover-filter: opacity(100%);
 
 // Remove or comment out the hamburger types you don’t want
 // or need, so they get excluded from the compiled CSS.

_sass/hamburgers/_base.scss

@@ -26,6 +26,23 @@
       opacity: $hamburger-hover-opacity;
     }
   }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
 }
 
 .hamburger-box {

_sass/hamburgers/hamburgers.scss

@@ -19,12 +19,15 @@ $hamburger-layer-border-radius             : 4px !default;
 $hamburger-hover-opacity                   : 0.7 !default;
 $hamburger-hover-transition-duration       : 0.15s !default;
 $hamburger-hover-transition-timing-function: linear !default;
+$hamburger-active-layer-color              : #8c8c8c !default;
+$hamburger-active-hover-opacity            : 1 !default;
 
 // To use CSS filters as the hover effect instead of opacity,
 // set $hamburger-hover-use-filter as true and
 // change the value of $hamburger-hover-filter accordingly.
-$hamburger-hover-use-filter: false !default;
-$hamburger-hover-filter    : opacity(50%) !default;
+$hamburger-hover-use-filter   : false !default;
+$hamburger-hover-filter       : opacity(50%) !default;
+$hamburger-active-hover-filter: opacity(100%) !default;
 
 // Types (Remove or comment out what you don’t need)
 // ==================================================

dist/hamburgers.css

@@ -21,6 +21,12 @@
   overflow: visible; }
   .hamburger:hover {
     opacity: 0.7; }
+  .hamburger.is-active:hover {
+    opacity: 1; }
+  .hamburger.is-active .hamburger-inner,
+  .hamburger.is-active .hamburger-inner::before,
+  .hamburger.is-active .hamburger-inner::after {
+    background-color: #8c8c8c; }
 
 .hamburger-box {
   width: 40px;