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 */
.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;

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

@ -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">