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

chore(css): move keyframes into separate file

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-17 22:32:26 +02:00
parent f6789a156c
commit 973023a04e
2 changed files with 476 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
src/runtime/index.css
View File

@@ -1,3 +1,5 @@
@import './keyframes.css';
@theme default {
--spacing-4_5: 1.125rem;
}
@@ -48,479 +50,4 @@
--ui-border-accented: var(--ui-color-neutral-700);
--ui-border-inverted: var(--color-white);
}
@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%;
}
}
}

474
src/runtime/keyframes.css Normal file
View File

@@ -0,0 +1,474 @@
@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%;
}
}