layui/package/component/es/step/index.css

.lay-step{display:flex;flex-wrap:nowrap}.lay-step .lay-step-item{flex-grow:1;position:relative}.lay-step .is-item-center{text-align:center}.lay-step .lay-step-item-last{flex-grow:0!important}.lay-step .lay-step-item-pace{position:relative;z-index:10;cursor:pointer;width:24px;height:24px;border:1px #8d8d8d solid;border-radius:50%;text-align:center;line-height:24px;background:#ffffff}.lay-step .is-center{margin:0 auto}.lay-step .lay-step-item-active{border:1px #5fb878 solid;color:#5fb878}.lay-step .lay-step-item-wait{border:1px #000000 solid;color:#000}.lay-step .lay-step-item--success{border:1px #5fb878 solid;color:#fff;background:#5fb878}.lay-step .lay-step-item--fail{border:1px #ff5722 solid;color:#fff;background:#ff5722}.lay-step .lay-step-item--warning{border:1px #ffb800 solid;color:#fff;background:#ffb800}.lay-step .lay-step-item--primary{border:1px #1e9fff solid;color:#fff;background:#1e9fff}.lay-step .lay-step-item-success{border:1px #5fb878 solid;color:#fff;background:#5fb878}.lay-step .lay-step-item-fail{border:1px #ff5722 solid;color:#fff;background:#ff5722}.lay-step .lay-step-item-warning{border:1px #ffb800 solid;color:#fff;background:#ffb800}.lay-step .lay-step-item-primary{border:1px #1e9fff solid;color:#fff;background:#1e9fff}.lay-step .lay-step-item-content{color:#8d8d8d;cursor:pointer}.lay-step .lay-step-item-content .lay-step-item-content-title{font-weight:700;font-size:16px}.lay-step .lay-step-item-content-row{color:#8d8d8d;position:absolute;top:5px;left:24px;width:calc(100% - 26px)}.lay-step .lay-step-item-content-row .lay-step-item-content-title{word-wrap:break-word;max-width:calc(100% - 8px);font-weight:700;display:inline-block;margin-left:2px;background:#ffffff;padding:0 8px;font-size:16px}.lay-step .lay-step-item-content-active,.lay-step .lay-step-item-content--success{color:#5fb878}.lay-step .lay-step-item-content--fail{color:#ff5722}.lay-step .lay-step-item-content--warning{color:#ffb800}.lay-step .lay-step-item-content--primary{color:#1e9fff}.lay-step .lay-step-item-content-wait{color:#000}.lay-step .lay-step-item-content-success{color:#5fb878}.lay-step .lay-step-item-content-fail{color:#ff5722}.lay-step .lay-step-item-content-warning{color:#ffb800}.lay-step .lay-step-item-content-primary{color:#1e9fff}.lay-step .lay-step-item-line{position:relative}.lay-step .lay-step-item-line:before{content:"";position:absolute;top:50%;display:block;height:1px;width:100%;background:#c9c5c5}.lay-step .is-line-center:before{left:50%}.lay-step .lay-step-item-line-active:before{transition:background .15s;background:#5fb878!important}.lay-step .lay-step-item-line-fail:before{transition:background .15s;background:#ff5722!important}.lay-step .lay-step-item-line-warning:before{transition:background .15s;background:#ffb800!important}.lay-step .lay-step-item-line-primary:before{transition:background .15s;background:#1e9fff!important}.lay-step .lay-step-simple{height:30px;padding:0 8px;line-height:30px;color:#fff;background-color:#cecece;cursor:pointer}.lay-step .lay-step-item-simple{padding:0 18px}.lay-step .lay-step-item-simple:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;border:15px solid;border-color:transparent transparent transparent #cecece;background-color:transparent;border-radius:0;display:block;height:auto;width:auto}.lay-step .lay-step-item-simple:before{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;border:15px solid;border-color:transparent transparent transparent #cecece;background-color:transparent;border-radius:0;display:block;height:auto;width:auto}.lay-step .lay-step-item-simple-border:before{left:1px;border-color:transparent transparent transparent #ffffff}.lay-step .lay-step-item-simple-active{background-color:#9fd4ae}.lay-step .lay-step-item-simple-success{background-color:#5fb878}.lay-step .lay-step-item-simple-fail{background-color:#ff5722}.lay-step .lay-step-item-simple-warning{background-color:#ffb800}.lay-step .lay-step-item-simple-primary{background-color:#1e9fff}.lay-step .lay-step-item-simple-active-border:after{border-color:transparent transparent transparent #9fd4ae!important}.lay-step .lay-step-item-simple-success-border:after{border-color:transparent transparent transparent #5fb878!important}.lay-step .lay-step-item-simple-fail-border:after{border-color:transparent transparent transparent #ff5722!important}.lay-step .lay-step-item-simple-warning-border:after{border-color:transparent transparent transparent #ffb800!important}.lay-step .lay-step-item-simple-primary-border:after{border-color:transparent transparent transparent #1e9fff!important}.lay-step-column{height:100%;flex-flow:column}.lay-step-column .lay-step-item-line{position:relative;height:100%;width:24px}.lay-step-column .lay-step-item-line:before{content:"";position:absolute;top:0;left:50%;display:block;width:1px;height:100%;background:#c9c5c5}.lay-step-column .lay-step-item-content{margin-left:8px}.lay-step-column .is-vertical{display:flex}