summaryrefslogtreecommitdiff
path: root/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers
diff options
context:
space:
mode:
authorRoger Gonzalez <roger@rogs.me>2023-01-08 22:12:24 -0300
committerRoger Gonzalez <roger@rogs.me>2023-01-08 22:12:24 -0300
commitb15ab4adb837e43409e5e3cf3a40a83ef4dbf62f (patch)
tree3b7d7e5dc84aabc839dd1d9174c4593cbd6b2f82 /themes/hugo-whisper-theme/assets/scss/libraries/hamburgers
Initial commit
Diffstat (limited to 'themes/hugo-whisper-theme/assets/scss/libraries/hamburgers')
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss86
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/hamburgers.scss118
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx-r.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy-r.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy-r.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy.scss35
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow-r.scss16
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow.scss16
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt-r.scss36
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt.scss36
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn-r.scss18
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn.scss18
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_boring.scss30
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse-r.scss47
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse.scss47
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic-r.scss41
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic.scss41
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic-r.scss53
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic.scss53
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_minus.scss34
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider-r.scss38
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider.scss38
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin-r.scss43
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin.scss43
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring-r.scss47
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring.scss44
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_squeeze.scss43
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand-r.scss45
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand.scss45
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex-r.scss48
-rwxr-xr-xthemes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex.scss48
33 files changed, 1382 insertions, 0 deletions
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss
new file mode 100755
index 0000000..7263067
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss
@@ -0,0 +1,86 @@
+// Hamburger
+// ==================================================
+.hamburger {
+ padding: $hamburger-padding-y $hamburger-padding-x;
+ display: inline-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;
+
+ &:hover {
+ @if $hamburger-hover-use-filter == true {
+ filter: $hamburger-hover-filter;
+ }
+ @else {
+ 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 {
+ width: $hamburger-layer-width;
+ height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+ display: inline-block;
+ position: relative;
+}
+
+.hamburger-inner {
+ display: block;
+ top: 50%;
+ margin-top: $hamburger-layer-height / -2;
+
+ &,
+ &::before,
+ &::after {
+ width: $hamburger-layer-width;
+ height: $hamburger-layer-height;
+ background-color: $hamburger-layer-color;
+ border-radius: $hamburger-layer-border-radius;
+ position: absolute;
+ transition-property: transform;
+ transition-duration: 0.15s;
+ transition-timing-function: ease;
+ }
+
+ &::before,
+ &::after {
+ content: "";
+ display: block;
+ }
+
+ &::before {
+ top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+ }
+
+ &::after {
+ bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/hamburgers.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/hamburgers.scss
new file mode 100755
index 0000000..977f0a3
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/hamburgers.scss
@@ -0,0 +1,118 @@
+@charset "UTF-8";
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+// Settings
+// ==================================================
+$hamburger-padding-x : 15px !default;
+$hamburger-padding-y : 15px !default;
+$hamburger-layer-width : 32px !default;
+$hamburger-layer-height : 3px !default;
+$hamburger-layer-spacing : 5px !default;
+$hamburger-layer-color : $primary !default;
+$hamburger-layer-border-radius : 3px !default;
+$hamburger-hover-opacity : 0.7 !default;
+$hamburger-active-layer-color : #FFF !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !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-active-hover-filter: $hamburger-hover-filter !default;
+
+// Types (Remove or comment out what you don’t need)
+// ==================================================
+$hamburger-types: (
+ 3dx,
+ 3dx-r,
+ 3dy,
+ 3dy-r,
+ 3dxy,
+ 3dxy-r,
+ arrow,
+ arrow-r,
+ arrowalt,
+ arrowalt-r,
+ arrowturn,
+ arrowturn-r,
+ boring,
+ collapse,
+ collapse-r,
+ elastic,
+ elastic-r,
+ emphatic,
+ emphatic-r,
+ minus,
+ slider,
+ slider-r,
+ spin,
+ spin-r,
+ spring,
+ spring-r,
+ stand,
+ stand-r,
+ squeeze,
+ vortex,
+ vortex-r
+) !default;
+
+// Base Hamburger (We need this)
+// ==================================================
+@import "base";
+
+// Hamburger types
+// ==================================================
+// @import "types/3dx";
+// @import "types/3dx-r";
+// @import "types/3dy";
+// @import "types/3dy-r";
+// @import "types/3dxy";
+// @import "types/3dxy-r";
+// @import "types/arrow";
+// @import "types/arrow-r";
+// @import "types/arrowalt";
+// @import "types/arrowalt-r";
+// @import "types/arrowturn";
+// @import "types/arrowturn-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/minus";
+@import "types/slider";
+// @import "types/slider-r";
+// @import "types/spin";
+// @import "types/spin-r";
+// @import "types/spring";
+// @import "types/spring-r";
+// @import "types/stand";
+// @import "types/stand-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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx-r.scss
new file mode 100755
index 0000000..3d86813
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx-r.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dx-r) {
+ /*
+ * 3DX Reverse
+ */
+ .hamburger--3dx-r {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ 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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx.scss
new file mode 100755
index 0000000..c38bd7d
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dx.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dx) {
+ /*
+ * 3DX
+ */
+ .hamburger--3dx {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ 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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy-r.scss
new file mode 100755
index 0000000..c76e0a4
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy-r.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dxy-r) {
+ /*
+ * 3DXY Reverse
+ */
+ .hamburger--3dxy-r {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ transform: rotateX(180deg) rotateY(180deg) rotateZ(-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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy.scss
new file mode 100755
index 0000000..e658d57
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dxy.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dxy) {
+ /*
+ * 3DXY
+ */
+ .hamburger--3dxy {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ transform: rotateX(180deg) 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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy-r.scss
new file mode 100755
index 0000000..eda3b9f
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy-r.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dy-r) {
+ /*
+ * 3DY Reverse
+ */
+ .hamburger--3dy-r {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ 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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy.scss
new file mode 100755
index 0000000..7c6f01a
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_3dy.scss
@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dy) {
+ /*
+ * 3DY
+ */
+ .hamburger--3dy {
+ .hamburger-box {
+ perspective: $hamburger-layer-width * 2;
+ }
+
+ .hamburger-inner {
+ transition: transform 0.15s 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);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ background-color: transparent !important;
+ 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/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow-r.scss
new file mode 100755
index 0000000..bb77ae9
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow-r.scss
@@ -0,0 +1,16 @@
+@if index($hamburger-types, arrow-r) {
+ /*
+ * Arrow Right
+ */
+ .hamburger--arrow-r.is-active {
+ .hamburger-inner {
+ &::before {
+ transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1);
+ }
+
+ &::after {
+ transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow.scss
new file mode 100755
index 0000000..a5946a6
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrow.scss
@@ -0,0 +1,16 @@
+@if index($hamburger-types, arrow) {
+ /*
+ * Arrow
+ */
+ .hamburger--arrow.is-active {
+ .hamburger-inner {
+ &::before {
+ transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
+ }
+
+ &::after {
+ transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt-r.scss
new file mode 100755
index 0000000..5ba3b39
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt-r.scss
@@ -0,0 +1,36 @@
+@if index($hamburger-types, arrowalt-r) {
+ /*
+ * Arrow Alt Right
+ */
+ .hamburger--arrowalt-r {
+ .hamburger-inner {
+ &::before {
+ transition: top 0.1s 0.1s ease,
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
+ }
+
+ &::after {
+ transition: bottom 0.1s 0.1s ease,
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ &::before {
+ top: 0;
+ transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
+ transition: top 0.1s ease,
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+ }
+
+ &::after {
+ bottom: 0;
+ transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
+ transition: bottom 0.1s ease,
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt.scss
new file mode 100755
index 0000000..6c5f2e2
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowalt.scss
@@ -0,0 +1,36 @@
+@if index($hamburger-types, arrowalt) {
+ /*
+ * Arrow Alt
+ */
+ .hamburger--arrowalt {
+ .hamburger-inner {
+ &::before {
+ transition: top 0.1s 0.1s ease,
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
+ }
+
+ &::after {
+ transition: bottom 0.1s 0.1s ease,
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ &::before {
+ top: 0;
+ transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
+ transition: top 0.1s ease,
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+ }
+
+ &::after {
+ bottom: 0;
+ transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
+ transition: bottom 0.1s ease,
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn-r.scss
new file mode 100755
index 0000000..058b6f4
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn-r.scss
@@ -0,0 +1,18 @@
+@if index($hamburger-types, arrowturn-r) {
+ /*
+ * Arrow Turn Right
+ */
+ .hamburger--arrowturn-r.is-active {
+ .hamburger-inner {
+ transform: rotate(-180deg);
+
+ &::before {
+ transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
+ }
+
+ &::after {
+ transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn.scss
new file mode 100755
index 0000000..7599978
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_arrowturn.scss
@@ -0,0 +1,18 @@
+@if index($hamburger-types, arrowturn) {
+ /*
+ * Arrow Turn
+ */
+ .hamburger--arrowturn.is-active {
+ .hamburger-inner {
+ transform: rotate(-180deg);
+
+ &::before {
+ transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
+ }
+
+ &::after {
+ transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_boring.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_boring.scss
new file mode 100755
index 0000000..23214b4
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_boring.scss
@@ -0,0 +1,30 @@
+@if index($hamburger-types, boring) {
+ /*
+ * Boring
+ */
+ .hamburger--boring {
+ .hamburger-inner {
+ &,
+ &::before,
+ &::after {
+ transition-property: none;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(45deg);
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(-90deg);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse-r.scss
new file mode 100755
index 0000000..36a80a2
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse-r.scss
@@ -0,0 +1,47 @@
+@if index($hamburger-types, collapse-r) {
+ /*
+ * Collapse Reverse
+ */
+ .hamburger--collapse-r {
+ .hamburger-inner {
+ top: auto;
+ bottom: 0;
+ transition-duration: 0.13s;
+ transition-delay: 0.13s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::after {
+ top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ opacity 0.1s linear;
+ }
+
+ &::before {
+ transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(45deg);
+ transition-delay: 0.22s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::after {
+ top: 0;
+ opacity: 0;
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ opacity 0.1s 0.22s linear;
+ }
+
+ &::before {
+ top: 0;
+ transform: rotate(90deg);
+ transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse.scss
new file mode 100755
index 0000000..93a5231
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_collapse.scss
@@ -0,0 +1,47 @@
+@if index($hamburger-types, collapse) {
+ /*
+ * Collapse
+ */
+ .hamburger--collapse {
+ .hamburger-inner {
+ top: auto;
+ bottom: 0;
+ transition-duration: 0.13s;
+ transition-delay: 0.13s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::after {
+ top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ opacity 0.1s linear;
+ }
+
+ &::before {
+ transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
+ transition-delay: 0.22s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::after {
+ top: 0;
+ opacity: 0;
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ opacity 0.1s 0.22s linear;
+ }
+
+ &::before {
+ top: 0;
+ transform: rotate(-90deg);
+ transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic-r.scss
new file mode 100755
index 0000000..367c019
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic-r.scss
@@ -0,0 +1,41 @@
+@if index($hamburger-types, elastic-r) {
+ /*
+ * Elastic Reverse
+ */
+ .hamburger--elastic-r {
+ .hamburger-inner {
+ top: $hamburger-layer-height / 2;
+ transition-duration: 0.275s;
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+ &::before {
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
+ transition: opacity 0.125s 0.275s ease;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+ transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+ transform: translate3d(0, $y-offset, 0) rotate(-135deg);
+ transition-delay: 0.075s;
+
+ &::before {
+ transition-delay: 0s;
+ opacity: 0;
+ }
+
+ &::after {
+ transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
+ transition-delay: 0.075s;
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic.scss
new file mode 100755
index 0000000..ef06a71
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_elastic.scss
@@ -0,0 +1,41 @@
+@if index($hamburger-types, elastic) {
+ /*
+ * Elastic
+ */
+ .hamburger--elastic {
+ .hamburger-inner {
+ top: $hamburger-layer-height / 2;
+ transition-duration: 0.275s;
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+ &::before {
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
+ transition: opacity 0.125s 0.275s ease;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+ transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+ transform: translate3d(0, $y-offset, 0) rotate(135deg);
+ transition-delay: 0.075s;
+
+ &::before {
+ transition-delay: 0s;
+ opacity: 0;
+ }
+
+ &::after {
+ transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
+ transition-delay: 0.075s;
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic-r.scss
new file mode 100755
index 0000000..6c5263b
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic-r.scss
@@ -0,0 +1,53 @@
+@if index($hamburger-types, emphatic-r) {
+ /*
+ * Emphatic Reverse
+ */
+ .hamburger--emphatic-r {
+ overflow: hidden;
+
+ .hamburger-inner {
+ transition: background-color 0.125s 0.175s ease-in;
+
+ &::before {
+ left: 0;
+ transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+ top 0.05s 0.125s linear,
+ left 0.125s 0.175s ease-in;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
+ right: 0;
+ transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+ top 0.05s 0.125s linear,
+ right 0.125s 0.175s ease-in;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transition-delay: 0s;
+ transition-timing-function: ease-out;
+ background-color: transparent !important;
+
+ &::before {
+ left: $hamburger-layer-width * -2;
+ top: $hamburger-layer-width * 2;
+ transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
+ transition: left 0.125s ease-out,
+ top 0.05s 0.125s linear,
+ transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+ }
+
+ &::after {
+ right: $hamburger-layer-width * -2;
+ top: $hamburger-layer-width * 2;
+ transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
+ transition: right 0.125s ease-out,
+ top 0.05s 0.125s linear,
+ transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic.scss
new file mode 100755
index 0000000..24fb365
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_emphatic.scss
@@ -0,0 +1,53 @@
+@if index($hamburger-types, emphatic) {
+ /*
+ * Emphatic
+ */
+ .hamburger--emphatic {
+ overflow: hidden;
+
+ .hamburger-inner {
+ transition: background-color 0.125s 0.175s ease-in;
+
+ &::before {
+ left: 0;
+ transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+ top 0.05s 0.125s linear,
+ left 0.125s 0.175s ease-in;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
+ right: 0;
+ transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+ top 0.05s 0.125s linear,
+ right 0.125s 0.175s ease-in;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transition-delay: 0s;
+ transition-timing-function: ease-out;
+ background-color: transparent !important;
+
+ &::before {
+ left: $hamburger-layer-width * -2;
+ top: $hamburger-layer-width * -2;
+ transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
+ transition: left 0.125s ease-out,
+ top 0.05s 0.125s linear,
+ transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+ }
+
+ &::after {
+ right: $hamburger-layer-width * -2;
+ top: $hamburger-layer-width * -2;
+ transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
+ transition: right 0.125s ease-out,
+ top 0.05s 0.125s linear,
+ transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_minus.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_minus.scss
new file mode 100755
index 0000000..415f8dc
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_minus.scss
@@ -0,0 +1,34 @@
+@if index($hamburger-types, minus) {
+ /*
+ * Minus
+ */
+ .hamburger--minus {
+ .hamburger-inner {
+ &::before,
+ &::after {
+ transition: bottom 0.08s 0s ease-out,
+ top 0.08s 0s ease-out,
+ opacity 0s linear;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ &::before,
+ &::after {
+ opacity: 0;
+ transition: bottom 0.08s ease-out,
+ top 0.08s ease-out,
+ opacity 0s 0.08s linear;
+ }
+ &::before {
+ top: 0;
+ }
+
+ &::after {
+ bottom: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider-r.scss
new file mode 100755
index 0000000..ff3cb53
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider-r.scss
@@ -0,0 +1,38 @@
+@if index($hamburger-types, slider-r) {
+ /*
+ * Slider Reverse
+ */
+ .hamburger--slider-r {
+ .hamburger-inner {
+ top: $hamburger-layer-height / 2;
+
+ &::before {
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
+ transition-property: transform, opacity;
+ transition-timing-function: ease;
+ transition-duration: 0.15s;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+ transform: translate3d(0, $y-offset, 0) rotate(-45deg);
+
+ &::before {
+ transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
+ opacity: 0;
+ }
+
+ &::after {
+ transform: translate3d(0, $y-offset * -2, 0) rotate(90deg);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider.scss
new file mode 100755
index 0000000..2ba9cc2
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_slider.scss
@@ -0,0 +1,38 @@
+@if index($hamburger-types, slider) {
+ /*
+ * Slider
+ */
+ .hamburger--slider {
+ .hamburger-inner {
+ top: $hamburger-layer-height / 2;
+
+ &::before {
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
+ transition-property: transform, opacity;
+ transition-timing-function: ease;
+ transition-duration: 0.15s;
+ }
+
+ &::after {
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+ transform: translate3d(0, $y-offset, 0) rotate(45deg);
+
+ &::before {
+ transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
+ opacity: 0;
+ }
+
+ &::after {
+ transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin-r.scss
new file mode 100755
index 0000000..70dc047
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin-r.scss
@@ -0,0 +1,43 @@
+@if index($hamburger-types, spin-r) {
+ /*
+ * Spin Reverse
+ */
+ .hamburger--spin-r {
+ .hamburger-inner {
+ transition-duration: 0.22s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::before {
+ transition: top 0.1s 0.25s ease-in,
+ opacity 0.1s ease-in;
+ }
+
+ &::after {
+ transition: bottom 0.1s 0.25s ease-in,
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(-225deg);
+ transition-delay: 0.12s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ transition: top 0.1s ease-out,
+ opacity 0.1s 0.12s ease-out;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(90deg);
+ transition: bottom 0.1s ease-out,
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin.scss
new file mode 100755
index 0000000..e89da55
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spin.scss
@@ -0,0 +1,43 @@
+@if index($hamburger-types, spin) {
+ /*
+ * Spin
+ */
+ .hamburger--spin {
+ .hamburger-inner {
+ transition-duration: 0.22s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::before {
+ transition: top 0.1s 0.25s ease-in,
+ opacity 0.1s ease-in;
+ }
+
+ &::after {
+ transition: bottom 0.1s 0.25s ease-in,
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(225deg);
+ transition-delay: 0.12s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ transition: top 0.1s ease-out,
+ opacity 0.1s 0.12s ease-out;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(-90deg);
+ transition: bottom 0.1s ease-out,
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring-r.scss
new file mode 100755
index 0000000..af099a8
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring-r.scss
@@ -0,0 +1,47 @@
+@if index($hamburger-types, spring-r) {
+ /*
+ * Spring Reverse
+ */
+ .hamburger--spring-r {
+ .hamburger-inner {
+ top: auto;
+ bottom: 0;
+ transition-duration: 0.13s;
+ transition-delay: 0s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::after {
+ top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ opacity 0s linear;
+ }
+
+ &::before {
+ transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
+ transition-delay: 0.22s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::after {
+ top: 0;
+ opacity: 0;
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ opacity 0s 0.22s linear;
+ }
+
+ &::before {
+ top: 0;
+ transform: rotate(90deg);
+ transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring.scss
new file mode 100755
index 0000000..cdf77d9
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_spring.scss
@@ -0,0 +1,44 @@
+@if index($hamburger-types, spring) {
+ /*
+ * Spring
+ */
+ .hamburger--spring {
+ .hamburger-inner {
+ top: $hamburger-layer-height / 2;
+ transition: background-color 0s 0.13s linear;
+
+ &::before {
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
+ transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ &::after {
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transition-delay: 0.22s;
+ background-color: transparent !important;
+
+ &::before {
+ top: 0;
+ transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
+ }
+
+ &::after {
+ top: 0;
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_squeeze.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_squeeze.scss
new file mode 100755
index 0000000..1e9e946
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_squeeze.scss
@@ -0,0 +1,43 @@
+@if index($hamburger-types, squeeze) {
+ /*
+ * Squeeze
+ */
+ .hamburger--squeeze {
+ .hamburger-inner {
+ transition-duration: 0.075s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+ &::before {
+ transition: top 0.075s 0.12s ease,
+ opacity 0.075s ease;
+ }
+
+ &::after {
+ transition: bottom 0.075s 0.12s ease,
+ transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(45deg);
+ transition-delay: 0.12s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ transition: top 0.075s ease,
+ opacity 0.075s 0.12s ease;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(-90deg);
+ transition: bottom 0.075s ease,
+ transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand-r.scss
new file mode 100755
index 0000000..f56b162
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand-r.scss
@@ -0,0 +1,45 @@
+@if index($hamburger-types, stand-r) {
+ /*
+ * Stand Reverse
+ */
+ .hamburger--stand-r {
+ .hamburger-inner {
+ transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+ background-color 0s 0.075s linear;
+
+ &::before {
+ transition: top 0.075s 0.075s ease-in,
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ &::after {
+ transition: bottom 0.075s 0.075s ease-in,
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(-90deg);
+ background-color: transparent !important;
+
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
+ background-color 0s 0.15s linear;
+
+ &::before {
+ top: 0;
+ transform: rotate(-45deg);
+ transition: top 0.075s 0.1s ease-out,
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(45deg);
+ transition: bottom 0.075s 0.1s ease-out,
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand.scss
new file mode 100755
index 0000000..f391d14
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_stand.scss
@@ -0,0 +1,45 @@
+@if index($hamburger-types, stand) {
+ /*
+ * Stand
+ */
+ .hamburger--stand {
+ .hamburger-inner {
+ transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+ background-color 0s 0.075s linear;
+
+ &::before {
+ transition: top 0.075s 0.075s ease-in,
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ &::after {
+ transition: bottom 0.075s 0.075s ease-in,
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(90deg);
+ background-color: transparent !important;
+
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
+ background-color 0s 0.15s linear;
+
+ &::before {
+ top: 0;
+ transform: rotate(-45deg);
+ transition: top 0.075s 0.1s ease-out,
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(45deg);
+ transition: bottom 0.075s 0.1s ease-out,
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex-r.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex-r.scss
new file mode 100755
index 0000000..cd3bcfa
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex-r.scss
@@ -0,0 +1,48 @@
+@if index($hamburger-types, vortex-r) {
+ /*
+ * Vortex Reverse
+ */
+ .hamburger--vortex-r {
+ .hamburger-inner {
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+ &::before,
+ &::after {
+ transition-duration: 0s;
+ transition-delay: 0.1s;
+ transition-timing-function: linear;
+ }
+
+ &::before {
+ transition-property: top, opacity;
+ }
+
+ &::after {
+ transition-property: bottom, transform;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(-765deg);
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+ &::before,
+ &::after {
+ transition-delay: 0s;
+ }
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(-90deg);
+ }
+ }
+ }
+ }
+}
diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex.scss b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex.scss
new file mode 100755
index 0000000..c329424
--- /dev/null
+++ b/themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/types/_vortex.scss
@@ -0,0 +1,48 @@
+@if index($hamburger-types, vortex) {
+ /*
+ * Vortex
+ */
+ .hamburger--vortex {
+ .hamburger-inner {
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+ &::before,
+ &::after {
+ transition-duration: 0s;
+ transition-delay: 0.1s;
+ transition-timing-function: linear;
+ }
+
+ &::before {
+ transition-property: top, opacity;
+ }
+
+ &::after {
+ transition-property: bottom, transform;
+ }
+ }
+
+ &.is-active {
+ .hamburger-inner {
+ transform: rotate(765deg);
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+ &::before,
+ &::after {
+ transition-delay: 0s;
+ }
+
+ &::before {
+ top: 0;
+ opacity: 0;
+ }
+
+ &::after {
+ bottom: 0;
+ transform: rotate(90deg);
+ }
+ }
+ }
+ }
+}