From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 7 Oct 2023 18:44:14 +0200
Subject: feat(components): add a generic Flip component

The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.
---
 src/components/atoms/flip/flip.module.scss | 49 ++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/atoms/flip/flip.module.scss

(limited to 'src/components/atoms/flip/flip.module.scss')

diff --git a/src/components/atoms/flip/flip.module.scss b/src/components/atoms/flip/flip.module.scss
new file mode 100644
index 0000000..20b1715
--- /dev/null
+++ b/src/components/atoms/flip/flip.module.scss
@@ -0,0 +1,49 @@
+@use "../../../styles/abstracts/functions" as fun;
+
+.front,
+.back {
+  grid-area: 1 / 1 / 2 / 2;
+  backface-visibility: hidden;
+  transition: all var(--flipper-speed, 0.6s) linear 0s;
+}
+
+.back {
+  transform: var(--rotation);
+}
+
+.wrapper {
+  display: grid;
+  transform-style: preserve-3d;
+
+  &--dynamic {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      .back {
+        transform: rotate(0);
+      }
+
+      .front {
+        transform: var(--rotation);
+      }
+    }
+  }
+
+  &--manual#{&}--is-back {
+    .back {
+      transform: rotate(0);
+    }
+
+    .front {
+      transform: var(--rotation);
+    }
+  }
+
+  &--horizontal {
+    --rotation: rotateY(180deg);
+  }
+
+  &--vertical {
+    --rotation: rotateX(180deg);
+  }
+}
-- 
cgit v1.2.3