Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(css): replace old transition classes by tailwind ones

Browse source
This commit is contained in:
Valentin Kaelin 2020-12-19 20:17:18 +01:00
parent e3ce337885
commit 16a98bcdc7
2 changed files with 10 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
client/src/assets/css/transition.css
View file

@ -1,41 +1,6 @@
/* purgecss start ignore */ /* purgecss start ignore */
.transition-all {
transition-property: all;
}
.transition-fastest { /* Fade transitions */
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-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity 2s; transition: opacity 2s;
} }
@ -63,24 +28,24 @@
/* Tab transition */ /* Tab transition */
.tab-enter-active { .tab-enter-active {
@apply transition-all transition-fast ease-out-quad; @apply transition duration-500 ease-in-out;
} }
.tab-enter { .tab-enter, .tab-enter-leave-to {
opacity: 0; @apply opacity-0;
} }
.tab-enter-to { .tab-enter-to, .tab-enter-leave {
opacity: 1; @apply opacity-100;
} }
/* Scale-fade transition */ /* Scale-fade transition */
.scale-fade-enter-active { .scale-fade-enter-active {
@apply transition-all transition-fastest ease-out-quad; @apply transition-all duration-75 ease-out transform;
} }
.scale-fade-leave-active { .scale-fade-leave-active {
@apply transition-all transition-fastest ease-in-quad; @apply transition-all duration-75 ease-in transform;
} }
.scale-fade-enter, .scale-fade-enter,
@ -109,11 +74,7 @@
opacity: 1; opacity: 1;
} }
.grow-enter-to { .grow-enter-to,
transform: scale(4);
opacity: 1;
}
.grow-leave { .grow-leave {
transform: scale(4); transform: scale(4);
opacity: 1; opacity: 1;

2
client/src/components/Form/SearchFormRegion.vue
View file

@ -7,7 +7,7 @@
<div <div
@click="toggle" @click="toggle"
:class="[selectRegionClasses]" :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> <span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
<svg class="w-4 h-4 ml-1 -mr-1"> <svg class="w-4 h-4 ml-1 -mr-1">