element-gui/packages/theme-chalk/lib/steps.css

A Component Library for Vue.js.

.el-steps{display:table;width:100%;table-layout:fixed;border-spacing:5px 0;position:relative}.el-steps.is-space{display:flex}.el-steps.is-space .el-step{flex-shrink:1}.el-steps--simple{font-size:0}.el-steps--simple .cell:after,.el-steps--simple .cell:before{content:"";display:table;height:0}.el-steps--simple .cell:after{clear:both}.el-steps--simple.is-average .el-step{display:table-cell}.el-steps--simple:not(.is-average){width:auto;table-layout:auto}.el-steps--simple .el-step{display:table-cell;position:relative;background:#e5e5e5;height:34px;margin-right:5px}.el-steps--simple .el-step.is-first::before,.el-steps--simple .el-step.is-last::after{display:none}.el-steps--simple .el-step .el-step__main,.el-steps--simple .el-step.is-first .el-step__main{margin-right:10px}.el-steps--simple .el-step.is-first .el-step__main.is-icon,.el-steps--simple .el-step.is-first .el-step__main.is-text{margin-left:20px}.el-steps--simple .el-step:after{position:absolute;content:"";width:0;height:0;border:17px solid transparent;border-left:17px solid #e5e5e5;right:-34px;z-index:10;top:0}.el-steps--simple .el-step:before{position:absolute;content:"";width:0;height:0;border:17px solid transparent;border-left:17px solid #fff;left:0;top:0}.el-steps--simple .el-step .el-step__head{float:left;display:inline;margin-left:20px;vertical-align:top;color:#999}.el-steps--simple .el-step .el-step__main.is-icon{margin-left:60px}.el-steps--simple .el-step .el-step__main.is-text{margin-left:30px}.el-steps--simple .el-step .el-step__description,.el-steps--simple .el-step .el-step__icon.is-text i,.el-steps--simple .el-step .el-step__line{display:none}.el-steps--simple .el-step .el-step__icon i{height:34px;width:34px;background-color:transparent;text-align:center;font-size:18px;line-height:34px}.el-steps--simple .el-step .el-step__title{line-height:34px;font-weight:700;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-steps--simple .el-step.is-step-finish{background-color:#e8f4ff}.el-steps--simple .el-step.is-step-finish:after{border-left:17px solid #e8f4ff}.el-steps--simple .el-step.is-step-finish .el-step__head,.el-steps--simple .el-step.is-step-finish .el-step__title{color:#1890ff}.el-steps--simple .el-step.is-step-process{background-color:#1890ff}.el-steps--simple .el-step.is-step-process:after{border-left:17px solid #1890ff}.el-steps--simple .el-step.is-step-process .el-step__head,.el-steps--simple .el-step.is-step-process .el-step__title{color:#fff}.el-steps--simple .el-step.is-step-error{background-color:#fdeaea}.el-steps--simple .el-step.is-step-error:after{border-left:17px solid #fdeaea}.el-steps--simple .el-step.is-step-error .el-step__head,.el-steps--simple .el-step.is-step-error .el-step__title{color:#E82F2F}.el-steps--simple .el-step.is-step-success{background-color:#eef7e8}.el-steps--simple .el-step.is-step-success:after{border-left:17px solid #eef7e8}.el-steps--simple .el-step.is-step-success .el-step__head,.el-steps--simple .el-step.is-step-success .el-step__title{color:#57B21C}.el-steps--horizontal{white-space:nowrap}.el-steps--horizontal .el-step{display:table-cell}.el-steps--horizontal .el-step .el-step__icon.is-text i,.el-steps--vertical .el-step .el-step__line{display:none}.el-steps--horizontal .el-step .el-step__head{height:40px;text-align:center}.el-steps--horizontal .el-step .el-step__line{top:16px;height:2px;left:calc(50% + 18px);right:calc(-50% + 9px);background-color:#d2d2d2}.el-steps--horizontal .el-step .el-step__icon{position:absolute;color:#999;text-align:center;transition:.15s ease-out;font-size:14px;line-height:22px}.el-steps--horizontal .el-step .el-step__icon.is-icon{margin-left:50%;left:-20px;top:4px}.el-steps--horizontal .el-step .el-step__icon.is-text{width:22px;height:22px;margin-left:50%;left:-11px;top:4px;border-radius:50%;background:#e5e5e5;border:2px solid #e5e5e5}.el-steps--horizontal .el-step.is-step-wait .el-step__title{color:#999}.el-steps--horizontal .el-step .el-step__main{text-align:center}.el-steps--horizontal .el-step .el-step__title{line-height:22px;color:#333;font-weight:700}.el-steps--horizontal .el-step .el-step__description{padding:5px 20px}.el-steps--horizontal .el-step.is-step-process .el-step__icon{background-color:#1890ff;color:#fff;border:2px solid #1890ff}.el-steps--horizontal .el-step.is-step-process .el-step__icon.is-icon{background-color:#fff;color:#1890ff;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-process.is-finish .el-step__line{background-color:#1890ff}.el-steps--horizontal .el-step.is-step-process.is-finish .el-step__line i{border-color:#1890ff}.el-steps--horizontal .el-step.is-step-process.is-active .el-step__icon{background:#1890ff;color:#fff;border:2px solid #1890ff}.el-steps--horizontal .el-step.is-step-process.is-active .el-step__icon.is-icon{background-color:#fff;color:#1890ff;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-process.is-active .el-step__title{color:#1890ff}.el-steps--horizontal .el-step.is-step-error .el-step__icon{background:0 0;color:#E82F2F;border:2px solid}.el-steps--horizontal .el-step.is-step-error .el-step__icon.is-icon{background-color:#fff;color:#E82F2F;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-error.is-finish .el-step__line{background-color:#E82F2F}.el-steps--horizontal .el-step.is-step-error.is-finish .el-step__line i{border-color:#E82F2F}.el-steps--horizontal .el-step.is-step-error.is-active .el-step__icon{background:#E82F2F;color:#fff;border:2px solid #E82F2F}.el-steps--horizontal .el-step.is-step-error.is-active .el-step__icon.is-icon{background-color:#fff;color:#E82F2F;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-error.is-active .el-step__title{color:#E82F2F}.el-steps--horizontal .el-step.is-step-success .el-step__icon{background:0 0;color:#57B21C;border:2px solid}.el-steps--horizontal .el-step.is-step-success .el-step__icon.is-icon{background-color:#fff;color:#57B21C;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-success.is-finish .el-step__line{background-color:#57B21C}.el-steps--horizontal .el-step.is-step-success.is-finish .el-step__line i{border-color:#57B21C}.el-steps--horizontal .el-step.is-step-success.is-active .el-step__icon{background:#57B21C;color:#fff;border:2px solid #57B21C}.el-steps--horizontal .el-step.is-step-success.is-active .el-step__icon.is-icon{background-color:#fff;color:#57B21C;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-success.is-active .el-step__title{color:#57B21C}.el-steps--horizontal .el-step.is-step-finish .el-step__icon{background:0 0;color:#1890ff;border:2px solid}.el-steps--horizontal .el-step.is-step-finish .el-step__icon.is-icon{background-color:#fff;color:#1890ff;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-finish.is-finish .el-step__line{background-color:#1890ff}.el-steps--horizontal .el-step.is-step-finish.is-finish .el-step__line i{border-color:#1890ff}.el-steps--horizontal .el-step.is-step-finish.is-active .el-step__icon{background:#1890ff;color:#fff;border:2px solid #1890ff}.el-steps--horizontal .el-step.is-step-finish.is-active .el-step__icon.is-icon{background-color:#fff;color:#1890ff;border:none;padding:4px}.el-steps--horizontal .el-step.is-step-finish.is-active .el-step__title{color:#1890ff}.el-steps--horizontal .el-step.is-active .el-step__line{background-color:#d2d2d2}.el-steps--horizontal .el-step.is-active .el-step__line i{border-color:#d2d2d2}.el-steps--vertical{height:100%;border-spacing:0 20px}.el-steps--vertical .el-step .el-step__head{position:absolute}.el-steps--vertical .el-step .el-step__main{position:relative;padding-left:10px}.el-steps--vertical .el-step .el-step__title{position:absolute;top:-16px;line-height:1;font-weight:700;color:#333}.el-steps--vertical .el-step.is-step-wait .el-step__title{color:#999}.el-steps--vertical .el-step.is-step-process.is-active .el-step__title{color:#1890ff}.el-steps--vertical .el-step.is-step-error.is-active .el-step__title{color:#E82F2F}.el-steps--vertical .el-step.is-step-finish.is-active .el-step__title{color:#1890ff}.el-steps--vertical .el-step.is-step-success.is-active .el-step__title{color:#57B21C}.el-steps--vertical .el-step .el-step__description{padding:4px 0 30px}.el-steps--vertical .el-step .el-step__icon{width:12px;height:12px;position:relative;z-index:1;font-size:14px;box-sizing:border-box;background:#fff;transition:.15s ease-out;border:2px solid #d2d2d2;left:-7px;top:-16px}.el-steps--vertical .el-step .el-step__icon.is-icon{width:24px}.el-steps--vertical .el-step.is-vertical{display:table-row;position:relative}.el-steps--vertical .el-step.is-vertical .cell{position:relative;display:table-cell;border-left:2px solid #d2d2d2}.el-steps--vertical .el-step.is-vertical .cell.is-finish .el-step__icon,.el-steps--vertical .el-step.is-vertical .cell.is-process .el-step__icon{background-color:#1890ff;border-color:#1890ff;color:#1890ff}.el-steps--vertical .el-step.is-vertical .cell.is-error .el-step__icon{background-color:#E82F2F;border-color:#E82F2F;color:#E82F2F}.el-steps--vertical .el-step.is-vertical .cell.is-success .el-step__icon{background-color:#57B21C;border-color:#57B21C;color:#57B21C}.el-steps--vertical .el-step.is-vertical .cell .el-step__icon.is-icon{background:0 0;border:none;height:14px;top:-18px}.el-steps--vertical .el-step.is-vertical .cell .el-step__icon.is-icon .el-step__icon-inner{font-size:14px}.el-steps--vertical .el-step.is-vertical.is-active .cell{border-color:#d2d2d2}.el-steps--vertical .el-step.is-vertical.is-last .cell{border:none;padding-left:2px}.el-steps--vertical .el-step.is-finish .is-process{border-color:#d2d2d2}.el-steps--vertical .el-step.is-finish .is-finish{border-color:#1890ff}.el-steps--vertical .el-step.is-finish .is-error{border-color:#E82F2F}.el-steps--vertical .el-step.is-finish .is-success{border-color:#57B21C}