@profitlich/template-toolkit 2.1.2 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "2.1.2",
+    "version": "2.2.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {

package/scss/core/hamburger.scss

@@ -10,6 +10,7 @@
     $hamburger-hover-opacity       : 1 !default;
     $hamburger-active-layer-color  : $hamburger-color-active !default;
     $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+    $hamburger-color-timing: 0s;
     $hamburger-animation-timing: 0.195s;
     $hamburger-compression-speed: 0.12s;
     $hamburger-turn-speed: $hamburger-animation-timing - $hamburger-compression-speed;
@@ -21,9 +22,20 @@
     $hamburger-hover-filter       : opacity(50%) !default;
     $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 
-
-    // padding: $hamburger-padding-y $hamburger-padding-x;
-
+    // Base styles (Normalize <button>)
+    display: block;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: 0;
 
     &:hover {
         @if $hamburger-hover-use-filter==true {
@@ -35,25 +47,6 @@
         }
     }
 
-    body[data-menu-active='true'] & {
-        &: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;
-            transition: 0s $hamburger-compression-speed linear;
-        }
-    }
-
     .hamburger-box {
         width: $hamburger-breite;
         height: calc($hamburger-line-width * 3 + $hamburger-line-gap * 2);
@@ -65,6 +58,9 @@
         display: block;
         top: 50%;
         margin-top: calc($hamburger-line-width / -2);
+        transition:
+            transform $hamburger-turn-speed cubic-bezier(0.55, 0.055, 0.675, 0.19),
+            color $hamburger-color-timing;
 
         &,
         &::before,
@@ -74,9 +70,6 @@
             background-color: $hamburger-color;
             border-radius: $hamburger-layer-border-radius;
             position: absolute;
-            transition-property: transform;
-            transition-duration: 0.15s;
-            transition-timing-function: ease;
         }
 
         &::before,
@@ -87,65 +80,55 @@
 
         &::before {
             top: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+            transition:
+                top $hamburger-turn-speed $hamburger-compression-speed ease,
+                opacity $hamburger-turn-speed ease,
+                color $hamburger-color-timing;
         }
 
         &::after {
             bottom: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+            transition: 
+                bottom $hamburger-turn-speed $hamburger-compression-speed ease,
+                transform $hamburger-turn-speed cubic-bezier(0.55, 0.055, 0.675, 0.19),
+                color $hamburger-color-timing;
         }
     }
 
+    body[data-menu-active='true'] & {
+        &:hover {
+            @if $hamburger-hover-use-filter==true {
+                filter: $hamburger-active-hover-filter;
+            }
 
-
-    // Aus Basis
-    display: block;
-    cursor: pointer;
-
-    transition-property: opacity, filter;
-    transition-duration: 0.15s;
-    transition-timing-function: linear;
-
-    // Normalize (<button>)
-    font: inherit;
-    color: inherit;
-    text-transform: none;
-    background-color: transparent;
-    border: 0;
-    margin: 0;
-    overflow: visible;
-    line-height: 0;
-
-    .hamburger-inner {
-        transition-duration: $hamburger-turn-speed;
-        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-
-        &::before {
-            transition: top $hamburger-turn-speed $hamburger-compression-speed ease,
-                opacity $hamburger-turn-speed ease;
+            @else {
+                opacity: $hamburger-active-hover-opacity;
+            }
         }
 
-        &::after {
-            transition: bottom $hamburger-turn-speed $hamburger-compression-speed ease,
-                transform $hamburger-turn-speed cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+            background-color: $hamburger-active-layer-color;
+            transition: 0s $hamburger-compression-speed linear;
         }
-    }
 
-    body[data-menu-active='true'] & {
         .hamburger-inner {
-            transform: rotate(45deg);
-            transition-delay: $hamburger-compression-speed;
-            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+            transform: rotate(45deg) cubic-bezier(0.215, 0.61, 0.355, 1) $hamburger-compression-speed;
 
             &::before {
                 top: 0;
                 opacity: 0;
-                transition: top $hamburger-turn-speed ease,
+                transition:
+                    top $hamburger-turn-speed ease,
                     opacity $hamburger-turn-speed $hamburger-compression-speed ease;
             }
 
             &::after {
                 bottom: 0;
                 transform: rotate(-90deg);
-                transition: bottom $hamburger-turn-speed ease,
+                transition:
+                    bottom $hamburger-turn-speed ease,
                     transform $hamburger-turn-speed $hamburger-compression-speed cubic-bezier(0.215, 0.61, 0.355, 1);
             }
         }