From ddfdba1d634e28d4f2f687ad5dc6af77f0551949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Oct 2021 17:20:28 +0200
Subject: [PATCH] Add hover effect on ButtonCircle

---
 src/style/atoms/_button-circle.scss | 63 ++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
index dd398b0..4be67c6 100644
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -1,15 +1,76 @@
 .button-circle {
+    position: relative;
+    overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
-    background-color: #fff;
+    background: #fff;
     border-radius: 100vh;
+    transition: background-color 0.7s var(--ease-quart);
 
     & > * {
         width: 22px;
         height: 22px;
         object-fit: contain;
     }
+
+    // Clones
+    .clone {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transform-origin: center center;
+        transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
+
+        &:last-child {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transform: translate3d(-100%, 0, 0);
+        }
+    }
+
+    // Hover
+    &:hover {
+        .clone {
+            &:first-child {
+                opacity: 0;
+                transform: scale(0.9) translate3d(30%, 0, 0);
+            }
+            &:last-child {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+            }
+        }
+    }
+
+
+    /*
+    ** Variants
+    */
+    // Small size
+    &--small {
+        height: 32px;
+        width: 32px;
+
+        img, svg {
+            width: 16px;
+            height: 16px;
+            object-fit: contain;
+        }
+    }
+
+    // Pink color
+    &--pink {
+        background-color: $color-secondary;
+
+        &:hover {
+            background-color: darken($color-secondary, 7);
+        }
+    }
 }
\ No newline at end of file