flyonui/components/timeline/object.js

The easiest, free and open-source Tailwind CSS component library with semantic classes.

export default {".timeline":{"position":"relative","display":"flex","> li":{"position":"relative","display":"grid","flex-shrink":0,"align-items":"center","grid-template-rows":"var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr))","grid-template-columns":"var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr))","> hr":{"border":"none","width":"100%","@media print":{"border":".1px solid var(--color-base-300)"},"&:first-child":{"grid-column-start":"1","grid-row-start":"2"},"&:last-child":{"grid-column-start":"3","grid-column-end":"none","grid-row-start":"2","grid-row-end":"auto"}}},":where(hr)":{"height":"1.5px","border-color":"transparent","background-color":"color-mix(in oklab, var(--color-base-content) 10%, transparent)"},"&:has(.timeline-middle hr)":{"&:first-child":{"border-start-start-radius":"0","border-end-start-radius":"0","border-start-end-radius":"var(--radius-selector)","border-end-end-radius":"var(--radius-selector)"},"&:last-child":{"border-start-start-radius":"var(--radius-selector)","border-end-start-radius":"var(--radius-selector)","border-start-end-radius":"0","border-end-end-radius":"0"}},"&:not(:has(.timeline-middle))":{":first-child hr:last-child":{"border-start-start-radius":"var(--radius-selector)","border-end-start-radius":"var(--radius-selector)","border-start-end-radius":"0","border-end-end-radius":"0"},":last-child hr:first-child":{"border-start-start-radius":"0","border-end-start-radius":"0","border-start-end-radius":"var(--radius-selector)","border-end-end-radius":"var(--radius-selector)"}}},".timeline-box":{"border":"var(--border) solid","border-radius":"var(--radius-box)","border-color":"color-mix(in oklab, var(--color-base-content) 10%, transparent)","background-color":"var(--color-base-100)","padding-inline":"calc(0.25rem * 4)","padding-block":"calc(0.25rem * 1)","--tw-shadow":"0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1))","box-shadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)","--tw-shadow-color":"color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent)"},".timeline-start":{"grid-column-start":"1","grid-column-end":"4","grid-row-start":"1","grid-row-end":"2","margin":"calc(0.25rem * 2)","align-self":"flex-end","justify-self":"center"},".timeline-middle":{"grid-column-start":"2","grid-row-start":"2","display":"flex","width":"calc(0.25rem * 9)","height":"calc(0.25rem * 9)","align-items":"center","justify-content":"center"},".timeline-end":{"grid-column-start":"1","grid-column-end":"4","grid-row-start":"3","grid-row-end":"4","margin":"calc(0.25rem * 2)","align-self":"flex-start","justify-self":"center"},".timeline-compact":{"&, &.timeline-horizontal":{"--timeline-row-start":"0",".timeline-start":{"grid-column-start":"1","grid-column-end":"4","grid-row-start":"3","grid-row-end":"4","margin":"calc(0.25rem * 2)","align-self":"flex-start","justify-self":"center"},"li:has(.timeline-start)":{".timeline-end":{"grid-column-start":"none","grid-row-start":"auto"}}},"&.timeline-vertical":{"> li":{"--timeline-col-start":"0"},".timeline-start":{"grid-column-start":"3","grid-column-end":"4","grid-row-start":"1","grid-row-end":"4","align-self":"center","justify-self":"flex-start"},"li:has(.timeline-start)":{".timeline-end":{"grid-column-start":"auto","grid-row-start":"none"}},".timeline-shift":{".timeline-start":{"grid-column-start":"3","grid-column-end":"4","grid-row-start":"3"},".timeline-end":{"grid-column-start":"3","grid-column-end":"4","grid-row-start":"1","grid-row-end":"2"}}}},".timeline-snap-icon":{"> :where(li)":{"--timeline-col-start":"0.5rem","--timeline-row-start":"minmax(0, 1fr)"}},".timeline-vertical":{"flex-direction":"column","> li":{"justify-items":"center","--timeline-row-start":"minmax(0, 1fr)","--timeline-row-end":"minmax(0, 1fr)","> hr":{"height":"100%","width":"1.5px","&:first-child":{"grid-column-start":"2","grid-row-start":"1"},"&:last-child":{"grid-column-start":"2","grid-column-end":"auto","grid-row-start":"3","grid-row-end":"none"}}},".timeline-start":{"grid-column-start":"1","grid-column-end":"2","grid-row-start":"1","grid-row-end":"4","align-self":"center","justify-self":"flex-end"},".timeline-end":{"grid-column-start":"3","grid-column-end":"4","grid-row-start":"1","grid-row-end":"4","align-self":"center","justify-self":"flex-start"},"&:has(.timeline-middle)":{"> li":{"> hr":{"&:first-child":{"border-top-left-radius":"0","border-top-right-radius":"0","border-bottom-right-radius":"var(--radius-selector)","border-bottom-left-radius":"var(--radius-selector)"},"&:last-child":{"border-top-left-radius":"var(--radius-selector)","border-top-right-radius":"var(--radius-selector)","border-bottom-right-radius":"0","border-bottom-left-radius":"0"}}}},"&:not(:has(.timeline-middle))":{":first-child":{"> hr:last-child":{"border-top-left-radius":"var(--radius-selector)","border-top-right-radius":"var(--radius-selector)","border-bottom-right-radius":"0","border-bottom-left-radius":"0"}},":last-child":{"> hr:first-child":{"border-top-left-radius":"0","border-top-right-radius":"0","border-bottom-right-radius":"var(--radius-selector)","border-bottom-left-radius":"var(--radius-selector)"}}},"&:where(.timeline-snap-icon)":{"> li":{"--timeline-col-start":"minmax(0, 1fr)","--timeline-row-start":"0.5rem"}}},".timeline-horizontal":{"flex-direction":"row","> li":{"align-items":"center","> hr":{"height":"1.5px","min-height":"calc(0.25rem * 0)","width":"100%","&:first-child":{"grid-column-start":"1","grid-row-start":"2"},"&:last-child":{"grid-column-start":"3","grid-column-end":"none","grid-row-start":"2","grid-row-end":"auto"}}},".timeline-start":{"grid-column-start":"1","grid-column-end":"4","grid-row-start":"1","grid-row-end":"2","align-self":"flex-end","justify-self":"center"},".timeline-end":{"grid-column-start":"1","grid-column-end":"4","grid-row-start":"3","grid-row-end":"4","align-self":"flex-start","justify-self":"center"},"&:has(.timeline-middle)":{"> li":{"> hr":{"&:first-child":{"border-start-start-radius":"0","border-end-start-radius":"0","border-start-end-radius":"var(--radius-selector)","border-end-end-radius":"var(--radius-selector)"},"&:last-child":{"border-start-start-radius":"var(--radius-selector)","border-end-start-radius":"var(--radius-selector)","border-start-end-radius":"0","border-end-end-radius":"0"}}}},"&:not(:has(.timeline-middle))":{":first-child":{"> hr:last-child":{"border-start-start-radius":"var(--radius-selector)","border-end-start-radius":"var(--radius-selector)","border-start-end-radius":"0","border-end-end-radius":"0"}},":last-child":{"> hr:first-child":{"border-start-start-radius":"0","border-end-start-radius":"0","border-start-end-radius":"var(--radius-selector)","border-end-end-radius":"var(--radius-selector)"}}}},".timeline-centered":{".timeline-start":{"align-self":"flex-start"},".timeline-end":{"align-self":"flex-start"}}};