tntd/lib/steps/stepStyle/vertical.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

.@{tnt-steps-cls}.@{steps-prefix-cls}-vertical:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation):not(.@{steps-prefix-cls}-small).@{steps-prefix-cls}{
    .@{steps-prefix-cls}-item{
        &-icon  >.@{steps-prefix-cls}-icon{
            i{
                vertical-align: middle;
            }
        }

        &-content {
            min-height: 94px;
        }

        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail{
            padding: calc(@td-steps-icon-size + 15px) 0 15px;
            left: 18px;
            &::after{
                width:0;
                border-radius: 2px;
                background-color: transparent;
            }
        }

        &-finish > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
            &::after {
                border-left: 2px solid @finish-border-color;
            }
        }

        &-wait, &-error, &-process {
            > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
                &::after {
                  border-left: 2px solid transparent;
                  background-color: @border-color;
                  mask: url(../assets/vertical_line.svg) repeat-y 0 0;
                  -webkit-mask:url(../assets/vertical_line.svg) repeat-y 0 0;
                }
            }
        }
    }
}