song-ui-u/theme/timeline.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-timeline{--x-timeline-node-color:var(--x-neutral-color-light-6);display:flex;flex-direction:column}.x-timeline-item{position:relative;padding-bottom:20px;display:flex;align-items:flex-start;justify-content:center}.x-timeline-item:last-child .x-timeline-item__line{display:none}.x-timeline-item__line{position:absolute;left:5px;height:100%;width:2px;background-color:var(--x-neutral-color-light-6);z-index:0}.x-timeline-item__node{position:relative;display:flex;justify-content:center;align-items:center;width:12px;height:12px;background-color:var(--x-timeline-node-color);border-radius:50%;margin-right:16px;z-index:1}.x-timeline-item__node.is-hollow{background-color:#fff;border:3px solid var(--x-timeline-node-color);box-sizing:border-box}.x-timeline-item--small_{width:6px;height:6px}.x-timeline-item--large_{width:10px;height:10px}.x-timeline-item__wrapper{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.x-timeline-item__time{color:#909399;font-size:12px;margin-top:8px}.x-timeline-item__content{color:#303133;font-size:14px}.x-timeline-item--position_top{flex-direction:column-reverse;gap:8px}.x-timeline-item--primary{--x-timeline-node-color:var(--x-color-primary)}.x-timeline-item--success{--x-timeline-node-color:var(--x-color-success)}.x-timeline-item--warning{--x-timeline-node-color:var(--x-color-warning)}.x-timeline-item--error{--x-timeline-node-color:var(--x-color-error)}