tdesign-react/esm/common/style/web/components/steps/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-steps {
  .reset;

  display: flex;
  width: 100%;
  .step-item-basic();

  &--line-separator {
    .@{prefix}-steps-item:before,
    .@{prefix}-steps-item:after,
    .@{prefix}-steps-item__title:after {
      border-style: solid;
    }
  }

  &--dashed-separator {
    .@{prefix}-steps-item:before,
    .@{prefix}-steps-item:after,
    .@{prefix}-steps-item__title:after {
      border-style: dashed;
    }
  }

  // 水平步骤条
  &--horizontal {

    // 默认锚点
    &.@{prefix}-steps--default-anchor {

      .@{prefix}-steps-item__title {
        width: fit-content;
        margin-bottom: @steps-item-title-margin-bottom;
      }

      .@{prefix}-steps-item__icon {
        &__number {
          width: @steps-circle-width;
          height: @steps-circle-height;
        }

        & > .t-icon {
          font-size: @steps-item-t-icon-font-size-default;
        }
      }

      // 默认锚点的连接线，以 title 为起点
      .connector-default(horizontal);

      // 倒序
      &.@{prefix}-steps--reverse {
        .connector-default(horizontal, true);
      }
    }

    // 点状锚点
    &.@{prefix}-steps--dot-anchor {

      .@{prefix}-steps-item {
        overflow: visible;

        .@{prefix}-steps-item__title {
          padding-right: 0;
          margin-bottom: @steps-item-title-margin-bottom;
        }

        &--finish {
          .dot-anchor-status(finish);
        }

        &--process {
          .dot-anchor-status(process);
        }

        &--error {
          .dot-anchor-status(error);
        }
      }

      .@{prefix}-steps-item__inner {
        display: flex;
        flex-direction: column;
        align-items: @steps-item-inner-align-items;
      }

      .dot-icon(horizontal);
      // 点状锚点连接线，以整个 item 为起点
      .connector-dot(horizontal);

      &.@{prefix}-steps--reverse {
        .connector-dot(horizontal, true);
      }
    }
  }

  // 垂直步骤条
  &--vertical {
    width: fit-content;
    flex-direction: column;

    // 默认步骤条连接线，以 item 为起点
    &.@{prefix}-steps--positive {
      .connector-default(vertical);
    }

    // 默认锚点
    &.@{prefix}-steps--default-anchor {

      .@{prefix}-steps-item__content {
        margin-left: @steps-item-content-margin-left-vertical;
      }

      .@{prefix}-steps-item__title {
        margin-bottom: @steps-item-title-margin-bottom;
      }
    }

    // 点状锚点
    &.@{prefix}-steps--dot-anchor {

      // 点状步骤条连接线，以 item 为起点
      &.@{prefix}-steps--positive {
        .connector-dot(vertical);
      }

      .@{prefix}-steps-item {
        margin-bottom: 0;

        .@{prefix}-steps-item__title {
          margin-bottom: @steps-item-title-margin-bottom;
        }

        &--finish {
          .dot-anchor-status(finish);
        }

        &--process {
          .dot-anchor-status(process);
        }

        &--error {
          .dot-anchor-status(error);
        }
      }

      .dot-icon(vertical);
    }

    // 倒序
    &.@{prefix}-steps--reverse {
      .connector-default(vertical, true);

      &.@{prefix}-steps--dot-anchor {
        .connector-dot(vertical, true);
      }
    }
  }
}