diff options
Diffstat (limited to 'themes/hugo-whisper-theme/assets/scss/libraries')
34 files changed, 1444 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); + } + } + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/libraries/pygments/github.scss b/themes/hugo-whisper-theme/assets/scss/libraries/pygments/github.scss new file mode 100644 index 0000000..16e727f --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/libraries/pygments/github.scss @@ -0,0 +1,62 @@ +.highlight { background: #f5f5f5; } +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { color: #000000; font-weight: bold } /* Keyword */ +.highlight .o { color: #000000; font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d01040 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d01040 } /* Literal.String.Backtick */ +.highlight .sc { color: #d01040 } /* Literal.String.Char */ +.highlight .sd { color: #d01040 } /* Literal.String.Doc */ +.highlight .s2 { color: #d01040 } /* Literal.String.Double */ +.highlight .se { color: #d01040 } /* Literal.String.Escape */ +.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ +.highlight .si { color: #d01040 } /* Literal.String.Interpol */ +.highlight .sx { color: #d01040 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d01040 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
\ No newline at end of file |