tntd/lib/steps/stepStyle/nav.less

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

.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}-navigation.@{steps-prefix-cls} {
    padding-top: 0;
    .@{steps-prefix-cls}-item {
        &-container{
            padding-bottom:0;
            margin-left: -@td-steps-icon-size / 2;
            &::after{
                display: none;
            }
        }
        &-content{
            max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
        }
         // 最后一个处理
         &:last-child > .@{steps-prefix-cls}-item-container {
            .@{steps-prefix-cls}-item-content {
                max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
            }
        }

        &::before {
            content: '';
            height: 1px;
            left: -10px;
        }

        &-active::before {
            content: '';
            width: calc(100% + 20px);
        }
    }

    &.@{steps-prefix-cls}-background{
        .@{steps-prefix-cls}-item{
           &:not(:last-child){
                margin-right: 48px;
           }
            &::after{
                content:"";
                margin-left: 12px;
                margin-top: 34px;
                top: 0;
                border: 1px solid @text-color-tertiary;
                border-bottom: none;
                border-left: none;
            }
        }
    }

    &-small{
        &.@{steps-prefix-cls}-background{
            .@{steps-prefix-cls}-item{
                &::after{
                    content:"";
                    margin-top: 18px;
                }

                &-content{
                    max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
                }
                 // 最后一个处理
                 &:last-child > .@{steps-prefix-cls}-item-container {
                    .@{steps-prefix-cls}-item-content {
                        max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
                    }
                }

            }
        }
    }
}