fix(Marquee): move keyframes into global css · nuxt/ui@1e6242e
@@ -44,7 +44,8 @@
4444 }
45454646to {
47-transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale));
47+transform: translateY(calc((var(--before) - var(--height)) * var(--gap)))
48+scale(var(--scale));
4849 }
4950}
5051@@ -54,7 +55,9 @@
5455 }
55565657to {
57-transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)));
58+transform: translateY(
59+calc((var(--offset) - var(--height)) * var(--translate-factor))
60+ );
5861 }
5962}
6063347350}
348351349352@keyframes carousel {
350-3513530%,
352354100% {
353-width: 50%
355+width: 50%;
354356 }
3553573563580% {
357-transform: translateX(-100%)
359+transform: translateX(-100%);
358360 }
359361360362100% {
361-transform: translateX(200%)
363+transform: translateX(200%);
362364 }
363365}
364366365-366367@keyframes carousel-rtl {
367-3683680%,
369369100% {
370-width: 50%
370+width: 50%;
371371 }
3723723733730% {
374-transform: translateX(100%)
374+transform: translateX(100%);
375375 }
376376377377100% {
378-transform: translateX(-200%)
378+transform: translateX(-200%);
379379 }
380380}
381381382-383382@keyframes carousel-vertical {
384-3853830%,
386384100% {
387-height: 50%
385+height: 50%;
388386 }
3893873903880% {
391-transform: translateY(-100%)
389+transform: translateY(-100%);
392390 }
393391394392100% {
395-transform: translateY(200%)
393+transform: translateY(200%);
396394 }
397395}
398396399397@keyframes carousel-inverse {
400-4013980%,
402399100% {
403-width: 50%
400+width: 50%;
404401 }
4054024064030% {
407-transform: translateX(200%)
404+transform: translateX(200%);
408405 }
409406410407100% {
411-transform: translateX(-100%)
408+transform: translateX(-100%);
412409 }
413410}
414411415412@keyframes carousel-inverse-rtl {
416-4174130%,
418414100% {
419-width: 50%
415+width: 50%;
420416 }
4214174224180% {
423-transform: translateX(-200%)
419+transform: translateX(-200%);
424420 }
425421426422100% {
427-transform: translateX(100%)
423+transform: translateX(100%);
428424 }
429425}
430426431427@keyframes carousel-inverse-vertical {
432-4334280%,
434429100% {
435-height: 50%
430+height: 50%;
436431 }
4374324384330% {
439-transform: translateY(200%)
434+transform: translateY(200%);
440435 }
441436442437100% {
443-transform: translateY(-100%)
438+transform: translateY(-100%);
444439 }
445440}
446441447442@keyframes swing {
448-4494430%,
450444100% {
451-width: 50%
445+width: 50%;
452446 }
4534474544480%,
455449100% {
456-transform: translateX(-25%)
450+transform: translateX(-25%);
457451 }
45845245945350% {
460-transform: translateX(125%)
454+transform: translateX(125%);
461455 }
462456}
463457464458@keyframes swing-vertical {
465-4664590%,
467460100% {
468-height: 50%
461+height: 50%;
469462 }
4704634714640%,
472465100% {
473-transform: translateY(-25%)
466+transform: translateY(-25%);
474467 }
47546847646950% {
477-transform: translateY(125%)
470+transform: translateY(125%);
478471 }
479472}
480473481474@keyframes elastic {
482-483475/* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
4844760%,
485477100% {
@@ -494,7 +486,6 @@
494486}
495487496488@keyframes elastic-vertical {
497-4984890%,
499490100% {
500491height: 50%;
@@ -506,3 +497,43 @@
506497margin-top: 5%;
507498 }
508499}
500+501+@keyframes marquee {
502+from {
503+transform: translate3d(0, 0, 0);
504+ }
505+506+to {
507+transform: translate3d(calc(-100% - var(--gap)), 0, 0);
508+ }
509+}
510+511+@keyframes marquee-rtl {
512+from {
513+transform: translate3d(0, 0, 0);
514+ }
515+516+to {
517+transform: translate3d(calc(100% + var(--gap)), 0, 0);
518+ }
519+}
520+521+@keyframes marquee-vertical {
522+from {
523+transform: translate3d(0, 0, 0);
524+ }
525+526+to {
527+transform: translate3d(0, calc(-100% - var(--gap)), 0);
528+ }
529+}
530+531+@keyframes marquee-vertical-rtl {
532+from {
533+transform: translate3d(0, calc(-100% - var(--gap)), 0);
534+ }
535+536+to {
537+transform: translate3d(0, calc(-100% * var(--gap)), 0);
538+ }
539+}