diff options
author | Roger Gonzalez <roger@rogs.me> | 2023-01-08 22:12:24 -0300 |
---|---|---|
committer | Roger Gonzalez <roger@rogs.me> | 2023-01-08 22:12:24 -0300 |
commit | b15ab4adb837e43409e5e3cf3a40a83ef4dbf62f (patch) | |
tree | 3b7d7e5dc84aabc839dd1d9174c4593cbd6b2f82 /themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss |
Initial commit
Diffstat (limited to 'themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss')
-rwxr-xr-x | themes/hugo-whisper-theme/assets/scss/libraries/hamburgers/_base.scss | 86 |
1 files changed, 86 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; + } +} |