98 lines
1.7 KiB
CSS
98 lines
1.7 KiB
CSS
/* Modal transition animations using Tailwind classes */
|
|
/*
|
|
.slide-left-move {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.slide-left-enter-from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-left-enter-to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.slide-left-leave-from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.slide-left-leave-to {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
transition: all 300ms ease-in;
|
|
}
|
|
|
|
.slide-right-move {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.slide-right-enter-from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-right-enter-to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.slide-right-leave-from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.slide-right-leave-to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
transition: all 300ms ease-in;
|
|
}
|
|
|
|
.translate-up-move {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.translate-up-enter-from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.translate-up-enter-to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.translate-up-leave-from {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.translate-up-leave-to {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
transition: all 300ms ease-in;
|
|
}
|
|
|
|
.step-1 .steps .step:first-child,
|
|
.step-2 .steps .step:last-child {
|
|
--tw-step-text: hsl(var(--bc));
|
|
--tw-step-primary: hsl(var(--p));
|
|
}
|
|
|
|
.step-1 .steps .step:last-child,
|
|
.step-2 .steps .step:first-child {
|
|
--tw-step-text: hsl(var(--bc));
|
|
color: hsl(var(--bc));
|
|
}
|
|
*/ |