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.

1 files changed, 49 insertions, 0 deletions

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