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, 31 insertions, 1 deletions

diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
index 4d9e32c..bacf381 100644
--- a/src/components/molecules/layout/branding.module.scss
+++ b/src/components/molecules/layout/branding.module.scss
@@ -42,7 +42,7 @@
   @include mix.media("screen") {
     @include mix.dimensions("2xs") {
       grid-template-columns:
-        var(--logo-size, fun.convert-px(100))
+        var(--logo-size)
         minmax(0, 1fr);
       grid-template-rows: 1fr min-content;
       align-items: center;
@@ -55,6 +55,8 @@
   .logo {
     grid-row: span 2;
     margin-bottom: var(--spacing-sm);
+    border-radius: 50%;
+    animation: flip-logo 9s ease-in 0s 1;
 
     @include mix.media("screen") {
       @include mix.dimensions("2xs") {
@@ -103,3 +105,31 @@
     }
   }
 }
+
+.flip {
+  width: var(--logo-size);
+  height: var(--logo-size);
+  border: fun.convert-px(2) solid var(--color-primary-dark);
+  border-radius: 50%;
+  box-shadow:
+    fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
+      var(--color-shadow-light),
+    fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
+      var(--color-shadow-light);
+
+  > * {
+    padding: fun.convert-px(2);
+    border-radius: 50%;
+  }
+}
+
+@keyframes flip-logo {
+  0%,
+  90% {
+    transform: rotateY(180deg);
+  }
+
+  100% {
+    transform: rotateY(0deg);
+  }
+}