From 16a98bcdc72504eadc526b81aa89e5be5d70759d Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 19 Dec 2020 20:17:18 +0100
Subject: [PATCH] refactor(css): replace old transition classes by tailwind
 ones

---
 client/src/assets/css/transition.css          | 57 +++----------------
 .../src/components/Form/SearchFormRegion.vue  |  2 +-
 2 files changed, 10 insertions(+), 49 deletions(-)

diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 6c9b9d8..6ca5916 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -1,41 +1,6 @@
 /* purgecss start ignore */
-.transition-all {
-  transition-property: all;
-}
 
-.transition-fastest {
-  transition-duration: 50ms;
-}
-
-.transition-faster {
-  transition-duration: 100ms;
-}
-
-.transition-fast {
-  transition-duration: 150ms;
-}
-
-.transition-medium {
-  transition-duration: 200ms;
-}
-
-.ease-out-quad {
-  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
-}
-
-.ease-in-quad {
-  transition-timing-function: cubic-bezier(.55, .085, .68, .53);
-}
-
-.scale-90 {
-  transform: scale(.9);
-}
-
-.scale-100 {
-  transform: scale(1);
-}
-
-/* Fade transition */
+/* Fade transitions */
 .fade-enter-active, .fade-leave-active {
   transition: opacity 2s;
 }
@@ -63,24 +28,24 @@
 
 /* Tab transition */
 .tab-enter-active {
-  @apply transition-all transition-fast ease-out-quad;
+  @apply transition duration-500 ease-in-out;
 }
 
-.tab-enter {
-  opacity: 0;
+.tab-enter, .tab-enter-leave-to {
+  @apply opacity-0;
 }
 
-.tab-enter-to {
-  opacity: 1;
+.tab-enter-to, .tab-enter-leave {
+  @apply opacity-100;
 }
 
 /* Scale-fade transition */
 .scale-fade-enter-active {
-  @apply transition-all transition-fastest ease-out-quad;
+  @apply transition-all duration-75 ease-out transform;
 }
 
 .scale-fade-leave-active {
-  @apply transition-all transition-fastest ease-in-quad;
+  @apply transition-all duration-75 ease-in transform;
 }
 
 .scale-fade-enter,
@@ -109,11 +74,7 @@
   opacity: 1;
 }
 
-.grow-enter-to {
-  transform: scale(4);
-  opacity: 1;
-}
-
+.grow-enter-to,
 .grow-leave {
   transform: scale(4);
   opacity: 1;
diff --git a/client/src/components/Form/SearchFormRegion.vue b/client/src/components/Form/SearchFormRegion.vue
index d5d4e1b..6a7fadd 100644
--- a/client/src/components/Form/SearchFormRegion.vue
+++ b/client/src/components/Form/SearchFormRegion.vue
@@ -7,7 +7,7 @@
       <div
         @click="toggle"
         :class="[selectRegionClasses]"
-        class="flex items-center transition-all border-2 border-transparent rounded cursor-pointer transition-fast ease-in-quad ease-out-quad hover:text-white"
+        class="flex items-center transition duration-150 ease-in-out border-2 border-transparent rounded cursor-pointer hover:text-white"
       >
         <span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
         <svg class="w-4 h-4 ml-1 -mr-1">