frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 2.92 kB
JavaScript
export default {".timeline-item":{"display":"grid","grid-template-columns":"var(--timeline-item--cols, 1fr auto 1fr)","grid-template-rows":"auto","align-items":"start","gap":"0 1rem","position":"relative","padding-block":"0.75rem","&:not(:last-child)::after":{"content":"\"\"","position":"absolute","inset-inline-start":"var(--timeline-after--start, 50%)","transform":"var(--timeline-after--transform, translateX(-50%))","top":"1.75rem","bottom":"-0.75rem","width":"2px","background-color":"var(--timeline-line-color, var(--color-base-soft))","z-index":0}},".timeline-middle":{"grid-column":"2","display":"flex","align-items":"center","justify-content":"center","width":"1rem","height":"1rem","border-radius":"9999px","background-color":"var(--color-base-soft)","border":"3px solid var(--color-base)","z-index":1,"flex-shrink":0,"position":"relative"},".timeline":{"list-style":"none","padding":"0","margin":"0","position":"relative","display":"flex"},".timeline-end":{"grid-column":"3","padding-inline-start":"0.5rem","font-size":"0.875rem","color":"currentColor","align-self":"center"},".timeline-start":{"grid-column":"1","text-align":"end","padding-inline-end":"0.5rem","font-size":"0.875rem","color":"currentColor","@supports (color: color-mix(in lab, red, red))":{"color":"color-mix(in oklch, currentColor 60%, transparent)"},"align-self":"center"},".timeline-snap-end":{"--timeline-item--cols":"1fr auto 0","--timeline-after--start":"calc(100% - 1.5rem)","--timeline-after--transform":"none",":where(&) :where(.timeline-end)":{"display":"none"}},".timeline-snap-start":{"--timeline-item--cols":"0 auto 1fr","--timeline-after--start":"1.5rem","--timeline-after--transform":"none",":where(&) :where(.timeline-start)":{"display":"none"}},".timeline-horizontal":{"flex-direction":"row","gap":"0"},".timeline-vertical":{"flex-direction":"column","gap":"0"},".timeline-accent":{"--timeline-line-color":"var(--color-accent)","& .timeline-middle":{"background-color":"var(--color-accent)"}},".timeline-error":{"--timeline-line-color":"var(--color-error)","& .timeline-middle":{"background-color":"var(--color-error)"}},".timeline-info":{"--timeline-line-color":"var(--color-info)","& .timeline-middle":{"background-color":"var(--color-info)"}},".timeline-neutral":{"--timeline-line-color":"var(--color-neutral)","& .timeline-middle":{"background-color":"var(--color-neutral)"}},".timeline-primary":{"--timeline-line-color":"var(--color-primary)","& .timeline-middle":{"background-color":"var(--color-primary)"}},".timeline-secondary":{"--timeline-line-color":"var(--color-secondary)","& .timeline-middle":{"background-color":"var(--color-secondary)"}},".timeline-success":{"--timeline-line-color":"var(--color-success)","& .timeline-middle":{"background-color":"var(--color-success)"}},".timeline-warning":{"--timeline-line-color":"var(--color-warning)","& .timeline-middle":{"background-color":"var(--color-warning)"}}};