wetrade-design/lib/steps/style/progress-dot.less

一款多语言支持Vue3的UI框架

.@{steps-prefix-cls}-dot,
.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
  .@{steps-prefix-cls}-item {
    &-container {
      line-height: normal;
    }

    &-title,
    &-description {
      line-height: @steps-description-line-height;
    }

    &-description {
      margin-top: @steps-description-margin-top;
    }

    &-tail {
      top: @steps-item-tail-top;
      width: 100%;
      margin: 0 0 0 (@steps-description-max-width / 2);
      padding: 0;
      line-height: @steps-item-tail-line-height;
      height: @steps-item-tail-line-height;

      &::after {
        width: ~'calc(100% - 20px)';
        height: @steps-line-height;
        margin-left: @steps-item-tail-after-margin-left;
      }
    }

    &-icon {
      width: @steps-dot-size;
      height: @steps-dot-size;
      margin-left: 67px;
      padding-right: 0;
      line-height: @steps-dot-size;
      background: transparent;
      border: 0;

      .@{steps-prefix-cls}-icon-dot {
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        transition: all 0.3s;

        /* expand hover area */
        &::after {
          position: absolute;
          top: @steps-icon-dot-top;
          left: @steps-icon-dot-left;
          width: @steps-icon-dot-width;
          height: @steps-icon-dot-height;
          background: fade(@black, 0.1%);
          content: '';
        }
      }
    }

    &-content {
      width: @steps-description-max-width;
    }
    &-process .@{steps-prefix-cls}-item-icon {
      position: relative;
      // top: -1px;
      width: @steps-current-dot-size;
      height: @steps-current-dot-size;
      line-height: @steps-current-dot-size;
      background: none;
    }
    &-process .@{steps-prefix-cls}-icon {
      &:first-child .@{steps-prefix-cls}-icon-dot {
        left: 0;
      }
    }
  }

  .@{steps-prefix-cls}-item-finish {
    .@{steps-prefix-cls}-item-container {
      .@{steps-prefix-cls}-item-icon {
        background: transparent;
      }
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    margin-top: 13px;
    margin-left: 0;
    background: none;
    display: block;
  }
  // https://github.com/ant-design/ant-design/issues/18354
  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
    top: 6.5px;
    left: -9px;
    margin: 0;
    padding: 22px 0 4px;
  }
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    left: 0;
  }
  .@{steps-prefix-cls}-item-content {
    width: inherit;
  }
  // .@{steps-prefix-cls}-item-process
  //   .@{steps-prefix-cls}-item-container
  //   .@{steps-prefix-cls}-item-icon
  //   .@{steps-prefix-cls}-icon-dot {
  // top: -1px;
  // left: -1px;
  // }
}