diff options
Diffstat (limited to 'src/components/Icons/Hamburger/Hamburger.module.scss')
| -rw-r--r-- | src/components/Icons/Hamburger/Hamburger.module.scss | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss new file mode 100644 index 0000000..1ae01bb --- /dev/null +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -0,0 +1,54 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + position: relative; + + &, + &::before, + &::after { + background: var(--color-primary); + background-image: linear-gradient( + to right, + var(--color-primary-light) 0%, + var(--color-highlight) 100% + ); + border: fun.convert-px(1) solid var(--color-border); + border-radius: fun.convert-px(3); + display: block; + width: var(--btn-size, fun.convert-px(50)); + height: fun.convert-px(6); + margin: auto; + transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; + } + + &::before, + &::after { + content: ""; + position: absolute; + } + + &::before { + bottom: fun.convert-px(15); + } + + &::after { + top: fun.convert-px(15); + } + + &--active { + background: transparent; + border: transparent; + + &::before { + transform-origin: 50% 50%; + transform: rotate(45deg); + bottom: 0; + } + + &::after { + transform-origin: 50% 50%; + transform: rotate(-45deg); + top: 0; + } + } +} |
