From eb40fb11afd1f73e0528eac2d219978ea862ccf1 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 7 Mar 2020 13:29:48 +0100
Subject: [PATCH] fix: ripple effects work again

---
 client/src/assets/css/transition.css    | 35 +++++++++++++++++++++++++
 client/src/components/Common/Ripple.vue | 32 ----------------------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index b7f3d1a..917d8c7 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -35,6 +35,7 @@
   transform: scale(1);
 }
 
+/* Fade transition */
 .fade-enter-active, .fade-leave-active {
   transition: opacity 2s;
 }
@@ -43,6 +44,7 @@
   opacity: 0;
 }
 
+/* Slide fade transition (match details) */
 .slide-fade-enter-active,
 .slide-fade-leave-active {
   transition: all 0.4s;
@@ -54,6 +56,7 @@
   opacity: 0;
 }
 
+/* Tab transition */
 .tab-enter-active {
   @apply transition-all transition-fast ease-out-quad;
 }
@@ -66,6 +69,7 @@
   opacity: 1;
 }
 
+/* Scale-fade transition */
 .scale-fade-enter-active {
   @apply transition-all transition-fastest ease-out-quad;
 }
@@ -84,4 +88,35 @@
   @apply opacity-100 scale-100;
 }
 
+/* Grow transition (ripples) */
+.grow-enter-active,
+.grow-enter-to-active {
+  transition: all 1500ms ease-out;
+}
+
+.grow-leave-active,
+.grow-leave-to-active {
+  transition: all 700ms ease-out;
+}
+
+.grow-enter {
+  transform: scale(0);
+  opacity: 1;
+}
+
+.grow-enter-to {
+  transform: scale(4);
+  opacity: 1;
+}
+
+.grow-leave {
+  transform: scale(4);
+  opacity: 1;
+}
+
+.grow-leave-to {
+  transform: scale(4);
+  opacity: 0;
+}
+
 /* purgecss end ignore */
diff --git a/client/src/components/Common/Ripple.vue b/client/src/components/Common/Ripple.vue
index 7467a5f..9b80f0a 100644
--- a/client/src/components/Common/Ripple.vue
+++ b/client/src/components/Common/Ripple.vue
@@ -75,35 +75,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.grow-enter-active,
-.grow-enter-to-active {
-  transition: all 1500ms ease-out;
-}
-
-.grow-leave-active,
-.grow-leave-to-active {
-  transition: all 700ms ease-out;
-}
-
-.grow-enter {
-  transform: scale(0);
-  opacity: 1;
-}
-
-.grow-enter-to {
-  transform: scale(4);
-  opacity: 1;
-}
-
-.grow-leave {
-  transform: scale(4);
-  opacity: 1;
-}
-
-.grow-leave-to {
-  transform: scale(4);
-  opacity: 0;
-}
-</style>