From ef13f22e6e6d9933b7fbfa70243bf333e9910da8 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 9 Jun 2024 22:36:19 +0200
Subject: [PATCH] Small hover animations

---
 src/components/screens/Characters.vue | 5 +++++
 src/components/utilities/Modal.vue    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 3b711ec..0cfef1b 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -266,6 +266,7 @@ function create() {
         display: flex;
         gap: 15px;
         align-items: center;
+        transition: ease-in-out gap 0.2s;
 
         span {
           margin: auto;
@@ -280,6 +281,10 @@ function create() {
           background-color: rgba($cyan, 0.5);
           cursor: not-allowed;
         }
+
+        &:hover {
+          gap: 20px;
+        }
       }
     }
   }
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 9a55f61..3917aa4 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -139,7 +139,7 @@ onUnmounted(() => {
 
       &:hover {
         transform: rotate(180deg);
-        transition: ease-in-out 0.3s;
+        transition: ease-in-out transform 0.3s;
       }
     }
   }