yu.css.ui/dist/component/steps.css

纯CSS通用UI模块和组件

.yu-steps-item{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;position:relative;font-size:0;color:#909399;display:inline-block;z-index:100}.yu-steps-item>.line{position:absolute;top:13px;width:100%;z-index:-1}.yu-steps-item>.line>i{background:#f5f5f9;display:block;height:1px;border-radius:1px;width:100%}.yu-steps-item>.line>i:after{top:0;width:0;height:0;background:#409eff;position:absolute;content:"";display:block}.yu-steps-item>.head{background:#fff;display:inline-block;font-size:14px}.yu-steps-item>.head>.inner{box-sizing:content-box;display:inline-block;height:26px;width:26px;border-radius:26px;border:1px solid #e4e7ed;line-height:26px;text-align:center;color:#909399;transition:background-color .4s linear}.yu-steps-item>.main{padding:0 14px;font-size:14px;background:#fff;display:inline-block;line-height:26px;vertical-align:top}.yu-steps-item>.main>.title{font-size:14px;font-weight:400;margin:0;padding:0;border:none}.yu-steps-item>.main>.description{font-size:12px;margin:0}.yu-steps-item.active>.head>.inner{background-color:#409eff;color:#fff;border-color:#409eff}.yu-steps-item.active>.main{color:#303133}.yu-steps-item.finished>.line>i:after{width:100%;height:1px;transition:width 1s ease}.yu-steps-item.finished>.head>.inner{border-color:#409eff;color:#409eff}.yu-steps-item.small>.line{top:9px}.yu-steps-item.small>.head>.inner{height:18px;width:18px;border-radius:18px;line-height:18px;font-size:12px}.yu-steps-item.small>.head>.inner i{font-size:12px}.yu-steps-item.small>.main{padding:0 14px;font-size:12px;background:#fff;display:inline-block;line-height:18px;vertical-align:top}.yu-steps-item.small>.main>.description{font-size:10px}.yu-steps.vertical>.yu-steps-item{display:block;height:60px}.yu-steps.vertical>.yu-steps-item>.head{padding-bottom:4px}.yu-steps.vertical>.yu-steps-item>.head:nth-child(n+2){padding-left:0}.yu-steps.vertical>.yu-steps-item>.head>.inner{transition:background-color .4s linear}.yu-steps.vertical>.yu-steps-item>.line{top:26px;left:13px;height:30px}.yu-steps.vertical>.yu-steps-item>.line>i{width:1px;height:100%}.yu-steps.vertical>.yu-steps-item>.line>i:after{width:0;height:0}.yu-steps.vertical>.yu-steps-item.small>.line{left:9px}.yu-steps.vertical>.yu-steps-item.finished>.line>i:after{width:1px;height:100%;transition:height .4s ease}.yu-steps>.yu-steps-item:nth-child(n+2)>.head{padding-left:14px}.yu-steps>.yu-steps-item:last-child>.line{display:none}