tntd/lib/steps/stepStyle/index.less

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

@import './variables.less';
@steps-prefix-cls: ~'@{ant-prefix}-steps';
@step-prefix-cls: ~'@{ant-prefix}-step';
@tnt-steps-cls: ~'tnt-steps';
@tnt-step-cls: ~'tnt-step';

.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.@{tnt-steps-cls} .@{steps-prefix-cls}{
    &-description,
    &-item-description {
        font-size: @font-size-sm;
        line-height: @td-steps-desc-height;
        word-break: break-all;
        color: tint(@text-color, 50%) !important;
    }
    &-item-title {
        line-height: @td-steps-title-height;
    }
}

// 水平 非点状步骤条 非导航模式
.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
    .@{steps-prefix-cls}-item{
        padding-top: 18px;
        padding-bottom: 18px;
        &-container{
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            min-height: @nav-min-height;
            &::after{
                content: '';
                flex:1;
                height:2px;
                border-radius: 2px;
                min-width: 8px;
                margin-left:32px;
                margin-top: calc(@nav-min-height / 2 - 1px);
            }
        }

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

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

        &-content{
            display: flex;
            justify-content: center;
            flex-direction: column;
            font-family: "PingFang SC";
            min-height: @nav-min-height;
            // 左侧圆形图标 12的margin边距  线条至少保留8px长
            max-width: calc(100% - @td-steps-icon-size - 12px - 32px - 8px);
        }

        &-title {
            width: 100%;
            padding-right:0;
            &::after{
                display: none;
            }
            >.tntd-ellipsis, >.tnt-ellipsis{
                align-items: center;
            }
            .ellipsis
        }

        .@{step-prefix-cls}-ellipsis-subtitle{
            font-size: @font-size-sm;
            color: tint(@text-color, 50%);
            margin-left: 2px;
        }

        &-subtitle {
            font-size: @font-size-sm;
            max-width: 30%;
            color: tint(@text-color, 50%);
            .ellipsis;
        }

        // 最后一个处理
        &:last-child > .@{steps-prefix-cls}-item-container {
            &::after{
                display: none;
            }
            .@{steps-prefix-cls}-item-content {
                max-width: inherit;
                flex:none;
            }
        }
    }

    &-small{
        .@{steps-prefix-cls}-item {
            padding-top: 10px;
            padding-bottom: 10px;
            &-container{
                min-height: @nav-small-min-height;
                &::after{
                    margin-top: calc(@nav-small-min-height / 2 - 1px);
                }
            }
            &-content{
                min-height: @nav-small-min-height;
                max-width: calc(100% - @td-steps-small-icon-size - 12px - 32px - 8px);
            }
        }
    }

    &:not(.@{steps-prefix-cls}-label-vertical) {
        .@{steps-prefix-cls}-item:not(:last-child) {
            margin-right: 32px;
        }
    }
}

// 水平 非点状步骤条
.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
    &.@{steps-prefix-cls}-background{
        border-radius: @border-radius-base @border-radius-base 0px 0px;
        background: linear-gradient(90deg, #F5F7FD 9.61%, #FBFDFF 81.1%);
        position: relative;
        padding-left:100px;
        padding-right: 100px;
        overflow: hidden;

        &::before{
            content: '';
            background-color: @primary-color;
            mask: url(../assets/background_left.svg) no-repeat 0 0;
            -webkit-mask:url(../assets/background_left.svg) no-repeat 0 0;
            width: 157px;
            height: 103px;
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
        }
        &::after{
            content: '';
            background-color: @primary-color;
            mask: url(../assets/background_right.svg) no-repeat 0 0;
            -webkit-mask:url(../assets/background_right.svg) no-repeat 0 0;
            width: 131px;
            height: 80px;
            position: absolute;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }
    }
}

@import "./icon.less";
@import "./vertical.less";
@import "./nav.less";
@import "./progress-dot.less";