jdvue/src/components/step/index.less

A Vue.js 2.0 Mobile UI components at JinDanLiCai

.v-steps {
    overflow: hidden;
    &-horizontal {
        padding: 0 20px;
        .v-steps-items {
            display: flex;
            position: relative;
        }
    }
    &-vertical {
        padding: 0 20px 0 56px;
    }
    &-items{
        .v-step:last-child{
            padding-bottom: 0;
            .v-step-line{
                display: none;
            }
        }
    }
}

.v-step {
    font-size: 12px;
    color: @gray;
    position: relative;

    &-horizontal {
        flex: 1;
        
        .v-step-circle-container{
            position: relative;
            z-index: 10;
            margin-top: 1px;
        }

        .v-step-title {
            padding-top: 35px;
            &-text{
                font-size: 15px;
                margin-bottom: 6px;
                padding-right: 20px;
            }
            &-disc{
                line-height: 1.4;
            }
        }

        .v-step-line {
            position: absolute;
            z-index: 5;
            left: 0px;
            top: 7px;
            width: 100%;
            height: 1px;
            background-color: #DCE5EB;
        }
        
        &.v-step-process{
            .v-step-circle-container{
                margin-top: 0px;
            }
        }
        &.v-step-finish {
            .v-step-title{
                padding-top: 20px;
            }
        }
    }

    .v-step-circle {
        width: 12px;
        height: 12px;
    }
    .v-step-checked {
        position: absolute;
        z-index: 10;
    }

    &-vertical {
        float: none;
        display: block;
        line-height: 1;
        padding-bottom: 34px;

        .v-step-title{
            &-text{
                font-size: 15px;
                margin-bottom: 8px;
            }
            &-disc{
                line-height: 1.4;
            }
        }
        
        .v-step-circle-container > img {
            position: absolute;
            z-index: 10;
        }

        .v-step-checked {
            top: 0px;
            left: -35px;
        }

        .v-step-circle {
            top: 0px;
            left: -33px;
        }

        .v-step-line {
            position: absolute;
            z-index: 5;
            top: 0;
            left: -28px;
            width: 1px;
            height: 100%;
            background-color: #DCE5EB;
        }
    }
}