element-plus/lib/theme-chalk/el-timeline-item.css

A Component Library for Vue3.0

:root{--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-ease-in-out-bezier-function:cubic-bezier(0.645, 0.045, 0.355, 1);--el-fast-bezier-transition:cubic-bezier(0.23, 1, 0.32, 1);--el-all-transition:all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);--el-fade-transition:opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-md-fade-transition:transform var(--el-transition-duration) var(--el-fast-bezier-transition),opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-fade-linear-transition:opacity var(--el-transition-duration-fast) linear;--el-border-transition-base:border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-color-transition-base:color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function)}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #e4e7ed}.el-timeline-item__icon{color:#fff;font-size:var(--el-font-size-small)}.el-timeline-item__node{position:absolute;background-color:#e4e7ed;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:var(--el-color-primary)}.el-timeline-item__node--success{background-color:var(--el-color-success)}.el-timeline-item__node--warning{background-color:var(--el-color-warning)}.el-timeline-item__node--danger{background-color:var(--el-color-danger)}.el-timeline-item__node--info{background-color:var(--el-color-info)}.el-timeline-item__dot{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:var(--el-font-size-small)}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}