summaryrefslogtreecommitdiffstats
path: root/src/components/Icons/Hamburger/Hamburger.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Icons/Hamburger/Hamburger.module.scss')
-rw-r--r--src/components/Icons/Hamburger/Hamburger.module.scss54
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;
+ }
+ }
+}