song-ui-u/theme/steps-item.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-steps-item{--x-steps-border-color:var(--x-neutral-color-light-4);--x-steps-line-color:var(--x-neutral-color-light-4);--x-steps-active-line-color:var(--x-color-primary);--x-steps-process-border-color:var(--x-neutral-color-light-3);--x-steps-process-text-color:var(--x-neutral-color-light-3);--x-steps-process-line-color:var(--x-neutral-color-light-3);--x-steps-text-color:var(--x-neutral-color-light-4);--x-steps-active-text-color:var(--x-color-primary);--x-steps-active-border-color:var(--x-color-primary);flex:1}.x-steps-item--direction_vertical{display:flex;align-items:center;gap:10px;min-height:0}.x-steps-item__text-wrapper{display:flex;flex-direction:column;align-items:center}.x-steps-item__head{display:flex;align-items:center;justify-content:start;width:100%}.x-steps-item--direction_vertical{align-items:center;justify-content:start;height:100%;min-height:0}.x-steps-item__text{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:30px;width:30px;border:solid 3px var(--x-steps-border-color);font-weight:700;border-radius:50%;color:var(--x-steps-text-color)}.x-steps-item__line{flex:1;height:2px;background-color:var(--x-steps-line-color)}.x-steps-item--state_middle{background-color:var(--x-steps-process-border-color)}.x-steps-item--state_finish{background-color:var(--x-steps-active-line-color)}.x-steps-item--line_vertical{width:2px;height:60px;flex:none}.x-steps-item__main{margin-top:8px;padding-right:10%;min-width:120px;display:flex;flex-direction:column;justify-content:start;align-items:start}.x-steps-item--direction_vertical{align-items:start;justify-content:start}.x-steps-item__title{font-size:var(--x-font-size-default);color:var(--x-steps-text-color)}.x-steps-item__desc{font-size:var(--x-font-size-small);color:var(--x-steps-text-color)}.x-steps-item.is-active{--x-steps-text-color:var(--x-steps-active-text-color);--x-steps-border-color:var(--x-steps-active-border-color)}.x-steps-item.is-process{--x-steps-text-color:var(--x-steps-process-text-color);--x-steps-border-color:var(--x-steps-process-border-color)}.x-steps .x-steps-item:last-child{flex:0}.x-steps .x-steps-item:last-child .x-steps-item__line{display:none}.x-steps .x-steps-item:last-child .x-steps-item__main{padding-right:0}.x-steps-item--type_primary{--x-steps-active-text-color:var(--x-color-primary);--x-steps-active-border-color:var(--x-color-primary);--x-steps-active-line-color:var(--x-color-primary)}.x-steps-item--type_success{--x-steps-active-text-color:var(--x-color-success);--x-steps-active-border-color:var(--x-color-success);--x-steps-active-line-color:var(--x-color-success)}.x-steps-item--type_warning{--x-steps-active-text-color:var(--x-color-warning);--x-steps-active-border-color:var(--x-color-warning);--x-steps-active-line-color:var(--x-color-warning)}.x-steps-item--type_error{--x-steps-active-text-color:var(--x-color-error);--x-steps-active-border-color:var(--x-color-error);--x-steps-active-line-color:var(--x-color-error)}