arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(module): move animations to css file

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-01 14:46:42 +02:00
parent a39cbd3a7f
commit 30bc3a1d76
3 changed files with 238 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/module.ts
View File

@@ -57,6 +57,9 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}
nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, 'isolate'].filter(Boolean).join(' ')
// Add keyframes for animations
nuxt.options.css.push(resolve('./runtime/assets/css/animations.css'))
addVitePlugin(tailwindcss)
await installModule('@nuxt/icon', {

235
src/runtime/assets/css/animations.css Normal file
View File

@@ -0,0 +1,235 @@
@keyframes accordion-up {
from { height: var(--radix-accordion-content-height); }
to { height: 0; }
}
@keyframes accordion-down {
from { height: 0; }
to { height: var(--radix-accordion-content-height); }
}
@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); }
to { height: 0; }
}
@keyframes collapsible-down {
from { height: 0; }
to { height: var(--radix-collapsible-content-height); }
}
@keyframes toast-collapsed-closed {
from { transform: var(--transform); }
to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
}
@keyframes toast-closed {
from { transform: var(--transform); }
to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
}
@keyframes toast-slide-left {
from { transform: translateX(0) translateY(var(--translate)); }
to { transform: translateX(-100%) translateY(var(--translate)); }
}
@keyframes toast-slide-right {
from { transform: translateX(0) translateY(var(--translate)); }
to { transform: translateX(100%) translateY(var(--translate)); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes scale-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
@keyframes slide-in-from-top {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
@keyframes slide-out-to-top {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
@keyframes slide-in-from-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slide-out-to-right {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
@keyframes slide-in-from-bottom {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes slide-out-to-bottom {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
@keyframes slide-in-from-left {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slide-out-to-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes slide-in-from-top-and-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-out-to-top-and-fade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}
@keyframes slide-in-from-right-and-fade {
from { opacity: 0; transform: translateX(4px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-to-right-and-fade {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(4px); }
}
@keyframes slide-in-from-bottom-and-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-out-to-bottom-and-fade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(4px); }
}
@keyframes slide-in-from-left-and-fade {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-to-left-and-fade {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-4px); }
}
@keyframes enter-from-right {
from { opacity: 0; transform: translateX(200px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes enter-from-left {
from { opacity: 0; transform: translateX(-200px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes exit-to-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(200px); }
}
@keyframes exit-to-left {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-200px); }
}
@keyframes carousel {
0%,
100% {
width: 50%
}
0% {
transform: translateX(-100%)
}
100% {
transform: translateX(200%)
}
}
@keyframes carousel-vertical {
0%,
100% {
height: 50%
}
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(200%)
}
}
@keyframes carousel-inverse {
0%,
100% {
width: 50%
}
0% {
transform: translateX(200%)
}
100% {
transform: translateX(-100%)
}
}
@keyframes carousel-inverse-vertical {
0%,
100% {
height: 50%
}
0% {
transform: translateY(200%)
}
100% {
transform: translateY(-100%)
}
}
@keyframes swing {
0%,
100% {
width: 50%
}
0%,
100% {
transform: translateX(-25%)
}
50% {
transform: translateX(125%)
}
}
@keyframes swing-vertical {
0%,
100% {
height: 50%
}
0%,
100% {
transform: translateY(-25%)
}
50% {
transform: translateY(125%)
}
}
@keyframes elastic {
/* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
0%,
100% {
width: 50%;
margin-left: 25%;
}
50% {
width: 90%;
margin-left: 5%;
}
}
@keyframes elastic-vertical {
0%,
100% {
height: 50%;
margin-top: 25%;
}
50% {
height: 90%;
margin-top: 5%;
}
}

236
src/templates.ts
View File

@@ -17,242 +17,6 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
:root {
color-scheme: light dark;
}
@keyframes accordion-up {
from { height: var(--radix-accordion-content-height); }
to { height: 0; }
}
@keyframes accordion-down {
from { height: 0; }
to { height: var(--radix-accordion-content-height); }
}
@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); }
to { height: 0; }
}
@keyframes collapsible-down {
from { height: 0; }
to { height: var(--radix-collapsible-content-height); }
}
@keyframes toast-collapsed-closed {
from { transform: var(--transform); }
to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
}
@keyframes toast-closed {
from { transform: var(--transform); }
to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
}
@keyframes toast-slide-left {
from { transform: translateX(0) translateY(var(--translate)); }
to { transform: translateX(-100%) translateY(var(--translate)); }
}
@keyframes toast-slide-right {
from { transform: translateX(0) translateY(var(--translate)); }
to { transform: translateX(100%) translateY(var(--translate)); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes scale-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
@keyframes slide-in-from-top {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
@keyframes slide-out-to-top {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
@keyframes slide-in-from-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slide-out-to-right {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
@keyframes slide-in-from-bottom {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes slide-out-to-bottom {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
@keyframes slide-in-from-left {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slide-out-to-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes slide-in-from-top-and-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-out-to-top-and-fade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}
@keyframes slide-in-from-right-and-fade {
from { opacity: 0; transform: translateX(4px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-to-right-and-fade {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(4px); }
}
@keyframes slide-in-from-bottom-and-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-out-to-bottom-and-fade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(4px); }
}
@keyframes slide-in-from-left-and-fade {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-to-left-and-fade {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-4px); }
}
@keyframes enter-from-right {
from { opacity: 0; transform: translateX(200px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes enter-from-left {
from { opacity: 0; transform: translateX(-200px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes exit-to-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(200px); }
}
@keyframes exit-to-left {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-200px); }
}
@keyframes carousel {
0%,
100% {
width: 50%
}
0% {
transform: translateX(-100%)
}
100% {
transform: translateX(200%)
}
}
@keyframes carousel-vertical {
0%,
100% {
height: 50%
}
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(200%)
}
}
@keyframes carousel-inverse {
0%,
100% {
width: 50%
}
0% {
transform: translateX(200%)
}
100% {
transform: translateX(-100%)
}
}
@keyframes carousel-inverse-vertical {
0%,
100% {
height: 50%
}
0% {
transform: translateY(200%)
}
100% {
transform: translateY(-100%)
}
}
@keyframes swing {
0%,
100% {
width: 50%
}
0%,
100% {
transform: translateX(-25%)
}
50% {
transform: translateX(125%)
}
}
@keyframes swing-vertical {
0%,
100% {
height: 50%
}
0%,
100% {
transform: translateY(-25%)
}
50% {
transform: translateY(125%)
}
}
@keyframes elastic {
/* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
0%,
100% {
width: 50%;
margin-left: 25%;
}
50% {
width: 90%;
margin-left: 5%;
}
}
@keyframes elastic-vertical {
0%,
100% {
height: 50%;
margin-top: 25%;
}
50% {
height: 90%;
margin-top: 5%;
}
}
}
@theme {