aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss')
-rw-r--r--src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss45
1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
new file mode 100644
index 0000000..8b8ad7e
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
@@ -0,0 +1,45 @@
+@use "../../../../../styles/abstracts/functions" as fun;
+
+.wrapper {
+ display: flex;
+ align-items: center;
+ aspect-ratio: 1/1;
+ position: relative;
+}
+
+.icon {
+ width: 100%;
+
+ &,
+ &::before,
+ &::after {
+ display: block;
+ height: 20%;
+ background: var(--color-primary-lighter);
+ background-image: linear-gradient(
+ to right,
+ var(--color-primary-light) 0%,
+ var(--color-primary-lighter) 100%
+ );
+ border: fun.convert-px(1) solid var(--color-primary-darker);
+ border-radius: fun.convert-px(4);
+ transition:
+ all 0.25s ease-in-out 0s,
+ transform 0.4s ease-in 0s;
+ }
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ inset-inline: 0;
+ }
+
+ &::before {
+ top: 3%;
+ }
+
+ &::after {
+ bottom: 3%;
+ }
+}