chore: add a button to open/close search in toolbar

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);
+  }
+}