maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 2.51 kB
CSS
.m-ticker[data-v-a34f5f86]{flex-direction:column;max-width:100%;max-height:100%;display:flex}.m-ticker.--horizontal[data-v-a34f5f86]{flex-direction:row}.m-ticker.--horizontal .m-ticker-wrapper[data-v-a34f5f86]{display:flex;overflow:hidden}.m-ticker.--horizontal .m-ticker-content[data-v-a34f5f86]{animation:m-ticker-scroll-x-a34f5f86 var(--m-ticker-duration) var(--m-ticker-timing) infinite;align-items:center;gap:var(--m-ticker-gap);flex-shrink:0;padding-inline-end:var(--m-ticker-gap);display:flex}.m-ticker.--horizontal .m-ticker-overlay[data-v-a34f5f86]{width:var(--m-ticker-overlay-size);top:0;bottom:0}.m-ticker.--horizontal .m-ticker-overlay.--start[data-v-a34f5f86]{background:linear-gradient(to right, hsl(var(--maz-background)), transparent);left:0}.m-ticker.--horizontal .m-ticker-overlay.--end[data-v-a34f5f86]{background:linear-gradient(to left, hsl(var(--maz-background)), transparent);right:0}.m-ticker.--vertical .m-ticker-wrapper[data-v-a34f5f86]{flex-direction:column;display:flex;overflow:hidden}.m-ticker.--vertical .m-ticker-content[data-v-a34f5f86]{animation:m-ticker-scroll-y-a34f5f86 var(--m-ticker-duration) var(--m-ticker-timing) infinite;gap:var(--m-ticker-gap);flex-direction:column;flex-shrink:0;padding-block-end:var(--m-ticker-gap);display:flex}.m-ticker.--vertical .m-ticker-overlay[data-v-a34f5f86]{height:var(--m-ticker-overlay-size);left:0;right:0}.m-ticker.--vertical .m-ticker-overlay.--start[data-v-a34f5f86]{background:linear-gradient(to bottom, hsl(var(--maz-background)), transparent);top:0}.m-ticker.--vertical .m-ticker-overlay.--end[data-v-a34f5f86]{background:linear-gradient(to top, hsl(var(--maz-background)), transparent);bottom:0}.m-ticker.--reverse .m-ticker-content[data-v-a34f5f86]{animation-direction:reverse}.m-ticker.--paused .m-ticker-content[data-v-a34f5f86],.m-ticker.--pause-on-hover .m-ticker-wrapper:hover .m-ticker-content[data-v-a34f5f86],.m-ticker.--pause-on-focus .m-ticker-wrapper:focus-within .m-ticker-content[data-v-a34f5f86]{animation-play-state:paused}.m-ticker-wrapper[data-v-a34f5f86]{position:relative}.m-ticker-overlay[data-v-a34f5f86]{pointer-events:none;z-index:10;position:absolute}@keyframes m-ticker-scroll-x-a34f5f86{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--m-ticker-gap)))}}@keyframes m-ticker-scroll-y-a34f5f86{0%{transform:translateY(0)}to{transform:translateY(calc(-100% - var(--m-ticker-gap)))}}@media (prefers-reduced-motion:reduce){.m-ticker-content[data-v-a34f5f86]{animation-play-state:paused}}