Merge pull request #1 from ntdb/mobile-support

Add mobile variable support
ntdb · Oct 19, 2019 · eed69f2 · eed69f2
2 parents c9adb72 + 6a099c7
commit eed69f2
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/_sass/hamburgers/_base.scss b/_sass/hamburgers/_base.scss
@@ -18,12 +18,20 @@
   margin: 0;
   overflow: visible;
 
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    padding: $hamburger-padding-y-mobile $hamburger-padding-x-mobile;
+  }
+
   &:hover {
     @if $hamburger-hover-use-filter == true {
       filter: $hamburger-hover-filter;
     }
     @else {
       opacity: $hamburger-hover-opacity;
+
+      @media (max-width: $hamburger-breakpoint-mobile) {
+        opacity: $hamburger-hover-opacity-mobile;
+      }
     }
   }
 
@@ -34,13 +42,21 @@
       }
       @else {
         opacity: $hamburger-active-hover-opacity;
+
+        @media (max-width: $hamburger-breakpoint-mobile) {
+          opacity: $hamburger-hover-opacity-mobile;
+        }
       }
     }
 
     .hamburger-inner,
     .hamburger-inner::before,
     .hamburger-inner::after {
       background-color: $hamburger-active-layer-color;
+
+      @media (max-width: $hamburger-breakpoint-mobile) {
+        background-color: $hamburger-active-layer-color-mobile;
+      }
     }
   }
 }
@@ -50,13 +66,22 @@
   height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
   display: inline-block;
   position: relative;
+
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    width: $hamburger-layer-width-mobile;
+    height: $hamburger-layer-height-mobile * 3 + $hamburger-layer-spacing-mobile * 2;
+  }
 }
 
 .hamburger-inner {
   display: block;
   top: 50%;
   margin-top: $hamburger-layer-height / -2;
 
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    margin-top: $hamburger-layer-height-mobile / -2;
+  }
+
   &,
   &::before,
   &::after {
@@ -68,6 +93,13 @@
     transition-property: transform;
     transition-duration: 0.15s;
     transition-timing-function: ease;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      width: $hamburger-layer-width-mobile;
+      height: $hamburger-layer-height-mobile;
+      background-color: $hamburger-layer-color-mobile;
+      border-radius: $hamburger-layer-border-radius-mobile;
+    }
   }
 
   &::before,
@@ -78,9 +110,17 @@
 
   &::before {
     top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      top: ($hamburger-layer-spacing-mobile + $hamburger-layer-height-mobile) * -1;
+    }
   }
 
   &::after {
     bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      bottom: ($hamburger-layer-spacing-mobile + $hamburger-layer-height-mobile) * -1;
+    }
   }
 }
diff --git a/_sass/hamburgers/hamburgers.scss b/_sass/hamburgers/hamburgers.scss
@@ -9,16 +9,30 @@
 
 // Settings
 // ==================================================
-$hamburger-padding-x           : 15px !default;
-$hamburger-padding-y           : 15px !default;
-$hamburger-layer-width         : 40px !default;
-$hamburger-layer-height        : 4px !default;
-$hamburger-layer-spacing       : 6px !default;
-$hamburger-layer-color         : #000 !default;
-$hamburger-layer-border-radius : 4px !default;
-$hamburger-hover-opacity       : 0.7 !default;
-$hamburger-active-layer-color  : $hamburger-layer-color !default;
-$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-padding-x            : 15px !default;
+$hamburger-padding-y            : 15px !default;
+$hamburger-layer-width          : 40px !default;
+$hamburger-layer-height         : 4px !default;
+$hamburger-layer-spacing        : 6px !default;
+$hamburger-layer-color          : #000 !default;
+$hamburger-layer-border-radius  : 4px !default;
+$hamburger-hover-opacity        : 0.7 !default;
+$hamburger-active-layer-color   : $hamburger-layer-color !default;
+$hamburger-active-hover-opacity : $hamburger-hover-opacity !default;
+
+// Mobile settings
+// ==================================================
+$hamburger-breakpoint-mobile           : 800px !default;
+$hamburger-padding-x-mobile            : $hamburger-padding-x !default;
+$hamburger-padding-y-mobile            : $hamburger-padding-y !default;
+$hamburger-layer-width-mobile          : $hamburger-layer-width !default;
+$hamburger-layer-height-mobile         : $hamburger-layer-height !default;
+$hamburger-layer-spacing-mobile        : $hamburger-layer-spacing !default;
+$hamburger-layer-color-mobile          : $hamburger-layer-color !default;
+$hamburger-layer-border-radius-mobile  : $hamburger-layer-border-radius !default;
+$hamburger-hover-opacity-mobile        : $hamburger-hover-opacity !default;
+$hamburger-active-layer-color-mobile   : $hamburger-active-layer-color !default;
+$hamburger-active-hover-opacity-mobile : $hamburger-active-hover-opacity !default;
 
 // To use CSS filters as the hover effect instead of opacity,
 // set $hamburger-hover-use-filter as true and