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, 7 insertions, 51 deletions

diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
index 4e7947f..169bde3 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss
+++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
@@ -1,61 +1,17 @@
 @use "../../../../styles/abstracts/functions" as fun;
 
-.label {
-  display: block;
-  width: var(--btn-size, #{fun.convert-px(60)});
-  height: var(--btn-size, #{fun.convert-px(60)});
+.wrapper {
+  --size: var(--btn-size, #{fun.convert-px(60)});
+  --flipper-speed: 0.5s;
+
+  width: var(--size);
+  height: var(--size);
 }
 
+.wrapper,
 .front,
 .back {
   display: flex;
   place-content: center;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  backface-visibility: hidden;
-  transition: all 0.6s ease-in 0s;
-}
-
-.front {
-  z-index: 20;
-}
-
-.back {
-  z-index: 10;
-}
-
-.wrapper {
-  display: flex;
-  place-content: center;
   place-items: center;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transition: all 0.5s ease-in-out 0s;
-  transform-style: preserve-3d;
-
-  &--active {
-    transform: rotateY(180deg);
-
-    .front {
-      transform: scale(0.2);
-    }
-
-    .back {
-      transform: scale(1) rotateY(180deg);
-    }
-  }
-
-  &--inactive {
-    .front {
-      transform: scale(1);
-    }
-
-    .back {
-      transform: scale(0.2) rotateY(180deg);
-    }
-  }
 }