Merge branch 'develop'. Version 0.5.0.

jonsuh · Apr 4, 2016 · 31c64ce · 31c64ce
2 parents 49ab6a8 + 099f284
commit 31c64ce
Show file tree

Hide file tree

Showing 30 changed files with 828 additions and 801 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 Changelog for Hamburgers.
 
+## [0.5.0] - 04/04/2016
+### Fixed
+- `Error: Import directives may not be used within control directives or mixins.` in certain cases like when compiling with Ruby Sass.  
+Solution: `@import` all available types and instead nest Sass for each type in `@if` directive which checks to see if the type exists in `$hamburger-types`. e.g.:  
+```scss
+@if index($hamburger-types, 3dx) {
+   .hamburger--3dx {
+   }
+}
+```
+
 ## [0.4.0] - 03/28/2016
 ### Improved
 - Customize the including/excluding of hamburger types in settings as `$hamburger-types` Sass list (e.g. If someone includes Hamburgers via npm or Bower, they don’t have to modify the source files in `node_modules` or `bower_components`.)

diff --git a/_sass/hamburgers/hamburgers.scss b/_sass/hamburgers/hamburgers.scss
@@ -60,83 +60,47 @@ $hamburger-types: (
 // ==================================================
 @import "base";
 
-// Include/exclude based on $hamburger-types
+// Hamburger types (Each should have an @if directive
 // ==================================================
-@if index($hamburger-types, 3dx) {
-  @import "types/3dx";
-}
-@if index($hamburger-types, 3dx-r) {
-  @import "types/3dx-r";
-}
-@if index($hamburger-types, 3dy) {
-  @import "types/3dy";
-}
-@if index($hamburger-types, 3dy-r) {
-  @import "types/3dy-r";
-}
-@if index($hamburger-types, arrow) {
-  @import "types/arrow";
-}
-@if index($hamburger-types, arrow-r) {
-  @import "types/arrow-r";
-}
-@if index($hamburger-types, arrowalt) {
-  @import "types/arrowalt";
-}
-@if index($hamburger-types, arrowalt-r) {
-  @import "types/arrowalt-r";
-}
-@if index($hamburger-types, boring) {
-  @import "types/boring";
-}
-@if index($hamburger-types, collapse) {
-  @import "types/collapse";
-}
-@if index($hamburger-types, collapse-r) {
-  @import "types/collapse-r";
-}
-@if index($hamburger-types, elastic) {
-  @import "types/elastic";
-}
-@if index($hamburger-types, elastic-r) {
-  @import "types/elastic-r";
-}
-@if index($hamburger-types, emphatic) {
-  @import "types/emphatic";
-}
-@if index($hamburger-types, emphatic-r) {
-  @import "types/emphatic-r";
-}
-@if index($hamburger-types, slider) {
-  @import "types/slider";
-}
-@if index($hamburger-types, slider-r) {
-  @import "types/slider-r";
-}
-@if index($hamburger-types, spring) {
-  @import "types/spring";
-}
-@if index($hamburger-types, spring-r) {
-  @import "types/spring-r";
-}
-@if index($hamburger-types, stand) {
-  @import "types/stand";
-}
-@if index($hamburger-types, stand-r) {
-  @import "types/stand-r";
-}
-@if index($hamburger-types, spin) {
-  @import "types/spin";
-}
-@if index($hamburger-types, spin-r) {
-  @import "types/spin-r";
-}
-@if index($hamburger-types, squeeze) {
-  @import "types/squeeze";
-}
-@if index($hamburger-types, vortex) {
-  @import "types/vortex";
-}
-@if index($hamburger-types, vortex-r) {
-  @import "types/vortex-r";
-}
+@import "types/3dx";
+@import "types/3dx-r";
+@import "types/3dy";
+@import "types/3dy-r";
+@import "types/arrow";
+@import "types/arrow-r";
+@import "types/arrowalt";
+@import "types/arrowalt-r";
+@import "types/boring";
+@import "types/collapse";
+@import "types/collapse-r";
+@import "types/elastic";
+@import "types/elastic-r";
+@import "types/emphatic";
+@import "types/emphatic-r";
+@import "types/slider";
+@import "types/slider-r";
+@import "types/spring";
+@import "types/spring-r";
+@import "types/stand";
+@import "types/stand-r";
+@import "types/spin";
+@import "types/spin-r";
+@import "types/squeeze";
+@import "types/vortex";
+@import "types/vortex-r";
+
+// ==================================================
+// Cooking up additional types:
+//
+// The Sass for each hamburger type should be nested
+// inside an @if directive to check whether or not
+// it exists in $hamburger-types so only the CSS for
+// included types are generated.
+//
+// e.g. hamburgers/types/_new-type.scss
+//
+// @if index($hamburger-types, new-type) {
+//   .hamburger--new-type {
+//     ...
+//   }
+// }
diff --git a/_sass/hamburgers/types/_3dx-r.scss b/_sass/hamburgers/types/_3dx-r.scss
@@ -1,32 +1,34 @@
-/*
- * 3DX Reverse
- */
-.hamburger--3dx-r {
-  .hamburger-box {
-    perspective: $hamburger-layer-width * 2;
-  }
-
-  .hamburger-inner {
-    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-                background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &::before,
-    &::after {
-      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+@if index($hamburger-types, 3dx-r) {
+  /*
+   * 3DX Reverse
+   */
+  .hamburger--3dx-r {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
     }
-  }
 
-  &.is-active {
     .hamburger-inner {
-      background-color: transparent;
-      transform: rotateY(-180deg);
+      transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      &::before {
-        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
+    }
 
-      &::after {
-        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateY(-180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
       }
     }
   }

diff --git a/_sass/hamburgers/types/_3dx.scss b/_sass/hamburgers/types/_3dx.scss
@@ -1,32 +1,34 @@
-/*
- * 3DX
- */
-.hamburger--3dx {
-  .hamburger-box {
-    perspective: $hamburger-layer-width * 2;
-  }
-
-  .hamburger-inner {
-    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-                background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &::before,
-    &::after {
-      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+@if index($hamburger-types, 3dx) {
+  /*
+   * 3DX
+   */
+  .hamburger--3dx {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
     }
-  }
 
-  &.is-active {
     .hamburger-inner {
-      background-color: transparent;
-      transform: rotateY(180deg);
+      transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      &::before {
-        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
+    }
 
-      &::after {
-        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateY(180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
       }
     }
   }

diff --git a/_sass/hamburgers/types/_3dy-r.scss b/_sass/hamburgers/types/_3dy-r.scss
@@ -1,32 +1,34 @@
-/*
- * 3DY Reverse
- */
-.hamburger--3dy-r {
-  .hamburger-box {
-    perspective: $hamburger-layer-width * 2;
-  }
-
-  .hamburger-inner {
-    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-                background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &::before,
-    &::after {
-      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+@if index($hamburger-types, 3dy-r) {
+  /*
+   * 3DY Reverse
+   */
+  .hamburger--3dy-r {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
     }
-  }
 
-  &.is-active {
     .hamburger-inner {
-      background-color: transparent;
-      transform: rotateX(180deg);
+      transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      &::before {
-        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
+    }
 
-      &::after {
-        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateX(180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
       }
     }
   }

diff --git a/_sass/hamburgers/types/_3dy.scss b/_sass/hamburgers/types/_3dy.scss
@@ -1,32 +1,34 @@
-/*
- * 3DY
- */
-.hamburger--3dy {
-  .hamburger-box {
-    perspective: $hamburger-layer-width * 2;
-  }
-
-  .hamburger-inner {
-    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-                background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &::before,
-    &::after {
-      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+@if index($hamburger-types, 3dy) {
+  /*
+   * 3DY
+   */
+  .hamburger--3dy {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
     }
-  }
 
-  &.is-active {
     .hamburger-inner {
-      background-color: transparent;
-      transform: rotateX(-180deg);
+      transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      &::before {
-        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
+    }
 
-      &::after {
-        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateX(-180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
       }
     }
   }