From f9df5cbce7db38ce83cc8b40346c9cabde5debc4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Dec 2021 19:03:17 +0100
Subject: chore: add a button to open/close search in toolbar

---
 src/components/Buttons/Buttons.module.scss | 54 ++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

(limited to 'src/components/Buttons/Buttons.module.scss')

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);
+  }
+}
-- 
cgit v1.2.3