bk-vue-cec/lib/ui/steps.css

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

@-webkit-keyframes loadingCircle{
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}

@keyframes loadingCircle{
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}

.bk-steps{
    display:table;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:0;
}

.bk-steps .bk-icon{
        font-size:24px;
        line-height:24px
    }

.bk-steps .bk-icon.icon-loading{
            display:inline-block;
            -webkit-animation:loadingCircle 1s infinite linear;
                    animation:loadingCircle 1s infinite linear;
            font-size:14px;
        }

.bk-steps .bk-step.done{
        }

.bk-steps .bk-step.done .bk-step-number,
            .bk-steps .bk-step.done .bk-step-icon,
            .bk-steps .bk-step.done .bk-step-text{
                border-color:#006DFF;
                color:#006DFF;
            }

.bk-steps .bk-step.done .bk-step-title::after, .bk-steps .bk-step.done .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #006DFF), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #006DFF 50%, transparent 0%);
                }

.bk-steps .bk-step.done::after{
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #006DFF), color-stop(0%, transparent));
                background-image:linear-gradient(#006DFF 50%, transparent 0%);
            }

.bk-steps .bk-step.current .bk-step-number,
            .bk-steps .bk-step.current .bk-step-icon,
            .bk-steps .bk-step.current .bk-step-text{
                background-color:#006DFF;
                border-color:#006DFF;
                color:#fff;
            }

.bk-steps .bk-step{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        position:relative;
        overflow:hidden;
        white-space:nowrap;
        margin-right:8px;
    }

.bk-steps .bk-step .bk-step-indicator{
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            width:24px;
            height:24px;
            padding:0;
            margin-right:8px;
            border:1px solid #979ba5;
            border-radius:50%;
            line-height:24px;
            color:#979ba5;
            text-align:center;
            background-color:#fff;
            z-index:1;
            vertical-align:top;
        }

.bk-steps .bk-step .bk-step-number{
            font-size:14px;
            font-family:arial;
        }

.bk-steps .bk-step .bk-step-content{
            display:inline-block;
            vertical-align:top;
        }

.bk-steps .bk-step .bk-step-title{
            display:inline-block;
            position:relative;
            color:#63656e;
            font-size:14px;
            word-break:break-all;
            padding-right:8px;
            line-height:24px;
        }

.bk-steps .bk-step .bk-step-title::after{
        content:"";
        position:absolute;
        left:100%;
        top:12px;
        width:99999px;
        height:1px;
        background-color:transparent;
    }

.bk-steps .bk-step .bk-step-description{
            font-size:12px;
            color:#979ba5;
            max-width:140px;
            white-space:normal;
            display:block;
            max-width:140px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator{
                margin-right:0
            }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after{
        content:"";
        position:absolute;
        left:100%;
        top:12px;
        width:99999px;
        height:1px;
        background-color:transparent;
    }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after{
                    left:32px;
                    top:10px;
                }

.bk-steps .bk-step:last-child{
            -webkit-box-flex:0;
                -ms-flex:none;
                    flex:none;
            margin-right:0;
        }

.bk-steps .bk-step:last-child .bk-step-title{
                padding-right:0
            }

.bk-steps .bk-step:last-child .bk-step-title::after{
                    display:none;
                }

.bk-steps .bk-step.done .bk-step-title,
            .bk-steps .bk-step.done .bk-step-description{
                color:#63656e;
            }

.bk-steps .bk-step.current .bk-step-number,
            .bk-steps .bk-step.current .bk-step-icon,
            .bk-steps .bk-step.current .bk-step-text{
                border-width:2px;
            }

.bk-steps .bk-step.current .bk-step-title,
            .bk-steps .bk-step.current .bk-step-description{
                color:#63656e;
            }

.bk-steps .bk-step.current.bk-step-error .bk-step-indicator{
                    background-color:#FF5656;
                    border-color:#FF5656;
                }

.bk-steps .bk-step.current.bk-step-error .bk-step-title,
                .bk-steps .bk-step.current.bk-step-error .bk-step-description{
                    color:#FF5656;
                }

.bk-steps-info .bk-step.done{
        }

.bk-steps-info .bk-step.done .bk-step-number,
            .bk-steps-info .bk-step.done .bk-step-icon,
            .bk-steps-info .bk-step.done .bk-step-text{
                border-color:#88c3ff;
                color:#88c3ff;
            }

.bk-steps-info .bk-step.done .bk-step-title::after, .bk-steps-info .bk-step.done .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #88c3ff), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #88c3ff 50%, transparent 0%);
                }

.bk-steps-info .bk-step.done::after{
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #88c3ff), color-stop(0%, transparent));
                background-image:linear-gradient(#88c3ff 50%, transparent 0%);
            }

.bk-steps-info .bk-step.current .bk-step-number,
            .bk-steps-info .bk-step.current .bk-step-icon,
            .bk-steps-info .bk-step.current .bk-step-text{
                background-color:#88c3ff;
                border-color:#88c3ff;
                color:#fff;
            }

.bk-steps-success .bk-step.done{
        }

.bk-steps-success .bk-step.done .bk-step-number,
            .bk-steps-success .bk-step.done .bk-step-icon,
            .bk-steps-success .bk-step.done .bk-step-text{
                border-color:#2DCB56;
                color:#2DCB56;
            }

.bk-steps-success .bk-step.done .bk-step-title::after, .bk-steps-success .bk-step.done .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #2DCB56), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #2DCB56 50%, transparent 0%);
                }

.bk-steps-success .bk-step.done::after{
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #2DCB56), color-stop(0%, transparent));
                background-image:linear-gradient(#2DCB56 50%, transparent 0%);
            }

.bk-steps-success .bk-step.current .bk-step-number,
            .bk-steps-success .bk-step.current .bk-step-icon,
            .bk-steps-success .bk-step.current .bk-step-text{
                background-color:#2DCB56;
                border-color:#2DCB56;
                color:#fff;
            }

.bk-steps-warning .bk-step.done{
        }

.bk-steps-warning .bk-step.done .bk-step-number,
            .bk-steps-warning .bk-step.done .bk-step-icon,
            .bk-steps-warning .bk-step.done .bk-step-text{
                border-color:#FF9C01;
                color:#FF9C01;
            }

.bk-steps-warning .bk-step.done .bk-step-title::after, .bk-steps-warning .bk-step.done .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #FF9C01), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #FF9C01 50%, transparent 0%);
                }

.bk-steps-warning .bk-step.done::after{
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #FF9C01), color-stop(0%, transparent));
                background-image:linear-gradient(#FF9C01 50%, transparent 0%);
            }

.bk-steps-warning .bk-step.current .bk-step-number,
            .bk-steps-warning .bk-step.current .bk-step-icon,
            .bk-steps-warning .bk-step.current .bk-step-text{
                background-color:#FF9C01;
                border-color:#FF9C01;
                color:#fff;
            }

.bk-steps-danger .bk-step.done{
        }

.bk-steps-danger .bk-step.done .bk-step-number,
            .bk-steps-danger .bk-step.done .bk-step-icon,
            .bk-steps-danger .bk-step.done .bk-step-text{
                border-color:#EA3636;
                color:#EA3636;
            }

.bk-steps-danger .bk-step.done .bk-step-title::after, .bk-steps-danger .bk-step.done .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #EA3636), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #EA3636 50%, transparent 0%);
                }

.bk-steps-danger .bk-step.done::after{
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #EA3636), color-stop(0%, transparent));
                background-image:linear-gradient(#EA3636 50%, transparent 0%);
            }

.bk-steps-danger .bk-step.current .bk-step-number,
            .bk-steps-danger .bk-step.current .bk-step-icon,
            .bk-steps-danger .bk-step.current .bk-step-text{
                background-color:#EA3636;
                border-color:#EA3636;
                color:#fff;
            }

.bk-steps-dashed .bk-step .bk-step-title::after, .bk-steps-dashed .bk-step .bk-step-indicator::after{
                    background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #c4c6cc), color-stop(0%, transparent));
                    background-image:linear-gradient(to right, #c4c6cc 50%, transparent 0%);
                    background-position:bottom;
                    background-size:6px 1px;
                    background-repeat:repeat-x;
                }

.bk-steps-solid .bk-step .bk-step-title::after, .bk-steps-solid .bk-step .bk-step-indicator::after{
                    background-color:#c4c6cc;
                }

.bk-steps-vertical{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        height:100%;
    }

.bk-steps-vertical .bk-step{
            margin-bottom:8px;
            margin-right:0;
        }

.bk-steps-vertical .bk-step .bk-step-title::after, .bk-steps-vertical .bk-step .bk-step-indicator::after{
                    display:none;
                }

.bk-steps-vertical .bk-step::after{
                content:"";
                position:absolute;
                left:12px;
                top:32px;
                height:100%;
                width:1px;
                background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #c4c6cc), color-stop(0%, transparent));
                background-image:linear-gradient(#c4c6cc 50%, transparent 0%);
                background-position:right;
                background-size:1px 6px;
                background-repeat:repeat-y;
            }

.bk-steps-vertical .bk-step .bk-step-title{
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                height:100%;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                text-align:left;
                margin-top:0;
            }

.bk-steps-small .bk-step .bk-step-indicator{
                width:20px;
                height:20px;
                line-height:20px;
            }

.bk-steps-small .bk-step .bk-step-title{
                font-size:12px;
                line-height:20px;
            }

.bk-steps-small .bk-step .bk-step-number{
                font-size:12px;
            }

.bk-steps-small .bk-step .bk-icon{
                font-size:12px;
                line-height:20px;
            }

.bk-steps-small .bk-step::after{
                left:10px;
                top:28px;
            }

.bk-steps-small .bk-step .bk-step-title::after{
                    top:10px;
                }

.bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after{
                        left:28px;
                        top:8px;
                    }