vexip-ui/css/timeline.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-timeline-vars{--vxp-timeline-item-span:20px;--vxp-timeline-item-span-pending:36px;--vxp-timeline-pointer-color:var(--vxp-color-primary-base);--vxp-timeline-pointer-bg-color:var(--vxp-color-white);--vxp-timeline-pointer-b-width:2px;--vxp-timeline-pointer-b-color:var(--vxp-color-primary-base);--vxp-timeline-pointer-b-color-disabled:var(--vxp-content-color-disabled);--vxp-timeline-pointer-size:12px;--vxp-timeline-line-width:2px;--vxp-timeline-line-style:solid;--vxp-timeline-line-style-pending:dashed;--vxp-timeline-line-color:var(--vxp-border-color-light-2);--vxp-timeline-line-inset-start:0px;--vxp-timeline-line-inset-end:0px}.vxp-timeline{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;flex-direction:column;padding-inline-start:calc(var(--vxp-timeline-pointer-size) * .5)}.vxp-timeline,.vxp-timeline *,.vxp-timeline ::after,.vxp-timeline ::before{box-sizing:border-box}.vxp-timeline--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-timeline--horizontal{flex-direction:row;padding-inline-start:0;padding-top:calc(var(--vxp-timeline-pointer-size) * .5)}.vxp-timeline--flip{padding-inline:0 calc(var(--vxp-timeline-pointer-size) * .5)}.vxp-timeline--horizontal.vxp-timeline--flip{padding-inline-end:0;padding-top:0;padding-bottom:calc(var(--vxp-timeline-pointer-size) * .5)}.vxp-timeline--alternate,.vxp-timeline--alternate.vxp-timeline--flip{padding:0}.vxp-timeline__item{position:relative;display:flex;align-items:flex-start;padding-bottom:var(--vxp-timeline-item-span)}.vxp-timeline__item:last-child{padding-bottom:0}.vxp-timeline__item--info{--vxp-timeline-pointer-color:var(--vxp-color-info-base);--vxp-timeline-pointer-b-color:var(--vxp-color-info-base)}.vxp-timeline__item--success{--vxp-timeline-pointer-color:var(--vxp-color-success-base);--vxp-timeline-pointer-b-color:var(--vxp-color-success-base)}.vxp-timeline__item--warning{--vxp-timeline-pointer-color:var(--vxp-color-warning-base);--vxp-timeline-pointer-b-color:var(--vxp-color-warning-base)}.vxp-timeline__item--error{--vxp-timeline-pointer-color:var(--vxp-color-error-base);--vxp-timeline-pointer-b-color:var(--vxp-color-error-base)}.vxp-timeline--horizontal .vxp-timeline__item{padding-inline-end:var(--vxp-timeline-item-span);padding-bottom:0}.vxp-timeline--alternate .vxp-timeline__item{align-self:flex-end;width:50%}.vxp-timeline--horizontal.vxp-timeline--alternate .vxp-timeline__item{width:100%;height:50%}.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even){align-self:flex-start}.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(odd){align-self:flex-start}.vxp-timeline__signal{position:absolute;inset-inline-start:calc(var(--vxp-timeline-pointer-size) * -.5);top:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--vxp-timeline-pointer-size);height:var(--vxp-timeline-pointer-size)}.vxp-timeline--horizontal .vxp-timeline__signal{inset-inline-start:0;top:calc(var(--vxp-timeline-pointer-size) * -.5)}.vxp-timeline--flip .vxp-timeline__signal{inset-inline-start:calc(var(--vxp-timeline-pointer-size) * -.5 + 100%)}.vxp-timeline--horizontal.vxp-timeline--flip .vxp-timeline__signal{inset-inline-start:0;top:calc(var(--vxp-timeline-pointer-size) * -.5 + 100%)}.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__signal{inset-inline-start:calc(var(--vxp-timeline-pointer-size) * -.5 + 100%)}.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__signal{inset-inline-start:calc(var(--vxp-timeline-pointer-size) * -.5)}.vxp-timeline--horizontal.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__signal{inset-inline-start:0;top:calc(var(--vxp-timeline-pointer-size) * -.5 + 100%)}.vxp-timeline--horizontal.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__signal{inset-inline-start:0;top:calc(var(--vxp-timeline-pointer-size) * -.5)}.vxp-timeline--signal-click .vxp-timeline__signal{cursor:pointer}.vxp-timeline__pointer{width:100%;height:100%;color:var(--vxp-timeline-pointer-color);background-color:var(--vxp-timeline-pointer-bg-color);border:var(--vxp-timeline-pointer-b-width) solid var(--vxp-timeline-pointer-b-color);border-radius:50%}.vxp-timeline__item--disabled .vxp-timeline__pointer{border-color:var(--vxp-timeline-pointer-b-color-disabled)}.vxp-timeline__line{position:absolute;inset-inline-start:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;width:0;padding-top:calc(var(--vxp-timeline-pointer-size) + var(--vxp-timeline-line-inset-start));padding-bottom:var(--vxp-timeline-line-inset-end)}.vxp-timeline__line::after{height:100%;content:"";border:0 var(--vxp-timeline-line-style) var(--vxp-timeline-line-color);border-inline-start-width:var(--vxp-timeline-line-width);transition:var(--vxp-transition-border)}.vxp-timeline--horizontal .vxp-timeline__line{bottom:auto;flex-direction:row;width:100%;height:0;padding:0;padding-inline:calc(var(--vxp-timeline-pointer-size) + var(--vxp-timeline-line-inset-start)) var(--vxp-timeline-line-inset-end)}.vxp-timeline--horizontal .vxp-timeline__line::after{width:100%;height:0;border-inline-start-width:0;border-top-width:var(--vxp-timeline-line-width)}.vxp-timeline--flip .vxp-timeline__line{inset-inline-start:100%}.vxp-timeline--horizontal.vxp-timeline--flip .vxp-timeline__line{inset-inline-start:0;top:100%}.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__line{inset-inline-start:100%}.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__line{inset-inline-start:0}.vxp-timeline--horizontal.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__line{inset-inline-start:0;top:100%}.vxp-timeline--horizontal.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__line{inset-inline-start:0;top:0}.vxp-timeline__content{position:relative;top:-5px;display:flex;flex-direction:column;padding-inline-start:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--horizontal .vxp-timeline__content{top:0;padding-inline-start:0;padding-top:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--flip .vxp-timeline__content{padding-inline-end:calc(var(--vxp-timeline-pointer-size) * .5 + 8px);padding-inline-start:0}.vxp-timeline--horizontal.vxp-timeline--flip .vxp-timeline__content{padding-top:0;padding-inline-end:0;padding-bottom:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__content{align-items:flex-end;padding-inline-end:calc(var(--vxp-timeline-pointer-size) * .5 + 8px);padding-inline-start:0}.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__content{padding-inline-end:0;padding-inline-start:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(odd) .vxp-timeline__content{align-items:flex-end;padding-inline-end:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--horizontal.vxp-timeline--alternate:not(.vxp-timeline--flip) .vxp-timeline__item:nth-child(even) .vxp-timeline__content{align-self:flex-end;padding-top:0;padding-inline-end:0;padding-bottom:calc(var(--vxp-timeline-pointer-size) * .5 + 8px)}.vxp-timeline--horizontal.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(even) .vxp-timeline__content{padding:calc(var(--vxp-timeline-pointer-size) * .5 + 8px) 0 0}.vxp-timeline--horizontal.vxp-timeline--alternate.vxp-timeline--flip .vxp-timeline__item:nth-child(odd) .vxp-timeline__content{padding-inline-end:0}.vxp-timeline__item:last-child .vxp-timeline__line::after{display:none}.vxp-timeline--pending .vxp-timeline__item:nth-last-child(2){padding-bottom:var(--vxp-timeline-item-span-pending)}.vxp-timeline--pending .vxp-timeline__item:nth-last-child(2) .vxp-timeline__line::after{border-style:var(--vxp-timeline-line-style-pending)}.vxp-timeline--horizontal.vxp-timeline--pending .vxp-timeline__item:nth-last-child(2){padding-inline-end:var(--vxp-timeline-item-span-pending);padding-bottom:0}