summaryrefslogtreecommitdiffstats
path: root/src/components/Buttons/Buttons.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Buttons/Buttons.module.scss')
-rw-r--r--src/components/Buttons/Buttons.module.scss54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index b5e2c75..b250eb5 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -80,3 +80,57 @@
}
}
}
+
+.search {
+ display: block;
+ width: var(--btn-size);
+ height: var(--btn-size);
+ background: none;
+ border: none;
+ font-size: var(--font-size-md);
+}
+
+.icon {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ transform-style: preserve-3d;
+ transform: translate3d(0, 0, 0);
+ transition: all 0.5s ease-in-out 0s;
+}
+
+.front,
+.back {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: var(--color-bg);
+ transition: all 0.6s ease-in 0s;
+ backface-visibility: hidden;
+}
+
+.front {
+ transform: scale(1);
+ z-index: 20;
+}
+
+.back {
+ transform: scale(0.2) rotateY(180deg);
+ z-index: 10;
+}
+
+.search--opened {
+ .icon {
+ transform: rotateY(180deg);
+ }
+
+ .front {
+ transform: scale(0.2);
+ }
+
+ .back {
+ transform: scale(1) rotateY(180deg);
+ }
+}