amis2/scss/components/_steps.scss

.#{$ns}Steps {
  display: flex;
  list-style: none;
  padding: 0;

  .#{$ns}StepsItem {
    flex: 1;
    overflow: hidden;
    padding: 0 px2rem(20px);
    height: auto;
    line-height: px2rem(32px);
    &-container {
      position: relative;
      &Icon {
        vertical-align: top;
        display: inline-block;
        padding-right: px2rem(10px);
        .#{$ns}StepsItem-icon {
          display: inline-block;
          width: px2rem(30px);
          height: px2rem(30px);
          line-height: px2rem(28px);
          border-radius: 50%;
          font-size: var(--Steps-icon-fontsize);
          text-align: center;
        }
      }
      &Wrapper {
        display: inline-block;
        position: relative;
        .#{$ns}StepsItem-body {
          .#{$ns}StepsItem-title {
            font-size: var(--Steps-title-fontsize);
            color: var(--Steps-title-color);
            padding-right: px2rem(20px);
            position: relative;
            display: inline-block;
            > span {
              display: inline-block;
            }
            &:after {
              content: '';
              position: absolute;
              right: 0;
              top: px2rem(16px);
              height: 1px;
              left: 100%;
              width: 9999px;
              padding-right: px2rem(10px);
              background-color: var(--Steps-line-bg);
            }
          }
          .#{$ns}StepsItem-title.is-success {
            &:after {
              background-color: var(--Steps-line-success-bg);
            }
          }
          .#{$ns}StepsItem-ellText {
            max-width: px2rem(158px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .#{$ns}StepsItem-subTitle {
            padding-left: px2rem(10px);
            font-size: var(--Steps-sub-title-fontsize);
            color: var(--Steps-sub-title-color);
          }
          .#{$ns}StepsItem-description {
            max-width: px2rem(140px);
            white-space: nowrap;
            position: relative;
            bottom: px2rem(10px);
          }
        }
      }
    }
    &:last-child {
      flex: none;
      .#{$ns}StepsItem-title {
        &:after {
          display: none;
        }
      }
    }
  }

  &--vertical {
    flex-direction: column;
    .#{$ns}StepsItem {
      padding: px2rem(5px) 0;
      min-height: 75px;
      overflow: hidden !important;
      &-container {
        &Icon:after {
            content: '';
            position: absolute;
            right: 0;
            top: px2rem(32px);
            height: 9999px;
            left: px2rem(11px);
            width: 1px;
            background-color: var(--Steps-line-bg);
        
        }
        &Wrapper > .#{$ns}StepsItem-body > .#{$ns}StepsItem-title {
          &:after {
            display: none;
          }
        }
        &Tail:after {
          display: none !important;
        }
      }
      &:last-child {
        flex: none;
        .#{$ns}StepsItem-containerIcon {
          &:after {
            display: none;
          }
        }
      }
      &-ProgressDot {
        margin-left: 10px;
        .#{$ns}StepsItem {
          &-container {
            flex-direction: row;
            &Tail {
              display: none;
            }
            &Wrapper {
              width: px2rem(400px);
            }
            &ProgressDot {
              margin-left: 0px;
              margin-top: px2rem(10px);
              &:after {
                content: '';
                position: absolute;
                display: inline-block;
                top: px2rem(28px);
                width: 1px;
                left: 3px;
                height: 9999px;
                background-color: var(--Steps-line-bg);
              }
            }
          }
          &-title>span {
            display: inline-block !important;
            
          }
          &-vertical-ProgressDot {
            right: px2rem(10px);
          }
          &-body {
            text-align: left !important;
          }
        }
        &:last-child {
          .#{$ns}StepsItem {
            &-containerProgressDot:after{
                display: none;
            }
          }
        }
      }
    }
    .is-finish {
      .#{$ns}StepsItem-container {
        &ProgressDot:after {
          background: var(--Steps-status-success);
        }
      }
    }
  }

  &--Placement-vertical {
    display: flex;
    list-style: none;
    padding: 0;
    .#{$ns}StepsItem {
      flex: 1;
      padding: 0; 
      overflow: visible ;
      &-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        &Tail:after {
          content: '';
          position: absolute;
          display: inline-block;
          top: 1rem;
          height: 1px;
          left: px2rem(130px);
          width: calc(100% - 55px);
          background-color: var(--Steps-line-bg);
        }
        &Icon{
          margin-left: px2rem(90px);
        }
        &Wrapper {
          width: px2rem(200px);
          .#{$ns}StepsItem-body {
            text-align: center;
            .#{$ns}StepsItem-title {
              padding: 0 px2rem(10px);
              width: 100%;
              >span {
                display: block;
                position: relative;
                left: px2rem(10px);
              }
              .#{$ns}StepsItem-subTitle {
                word-break: break-all;
                padding: 0 px2rem(10px);
                position: relative;
                left: px2rem(10px);
              }
            }
            .#{$ns}StepsItem-title:after  {
              display: none;
            }
            .#{$ns}StepsItem-description {
              min-width: px2rem(200px);
              word-break: break-all;
              padding: 0 px2rem(10px);
            }
            .#{$ns}StepsItem-title.is-success {
              &:after {
                background-color: var(--Steps-line-success-bg);
              }
            }
          }
        }
      }
      &:last-child {
        .#{$ns}StepsItem-container {
          &Tail:after {
            display: none;
          }
        }
      }
    } 
    .is-finish {
      .#{$ns}StepsItem {
        &-containerTail:after{
          background: var(--Steps-status-success);
        }
      }
    }
  }

  &--ProgressDot {
    .#{$ns}StepsItem {
      &-container {
        &Tail:after {
          left: px2rem(110px);
          width: calc(100% - 20px);
        }
        &ProgressDot {
          margin-top: px2rem(13px);
          margin-bottom: px2rem(5px);
          width: px2rem(8px);
          height: px2rem(8px);
          margin-left: px2rem(96px);
          border: 1px solid var(--Steps-line-success-bg);
          border-radius: 100% ;
        }
      }
    }
    .is-finish {
      .#{$ns}StepsItem-container {
        &Tail:after {
          background: var(--Steps-status-success);
        }
      }
    }
    .is-wait {
      .#{$ns}StepsItem-container {
        &ProgressDot {
          background: var(--Steps-line-bg);
          border: 1px solid var(--Steps-line-bg);
        }
      }
    }
    .is-error {
      .#{$ns}StepsItem-container {
        &ProgressDot {
          background: var(--Steps-status-error);
          border: 1px solid var(--Steps-status-error);
        }
      }
    }
    .is-process {
      .#{$ns}StepsItem-container {
        &ProgressDot {
          border: 1px solid var(--Steps-status-success);
          background: var(--Steps-status-success);
        }
      }
    }
  }
  

  .#{$ns}StepsItem.is-wait {
    .#{$ns}StepsItem-icon {
      background-color: var(--white);
      color: var(--Steps-bg);
      border: 1px solid var(--Steps-bg);
    }
  }
  .#{$ns}StepsItem.is-error {
    .#{$ns}StepsItem-icon {
      background-color: var(--Steps-status-error);
      color: var(--white);
      border: 1px solid var(--Steps-status-error);
    }
    .#{$ns}StepsItem-title,
    .#{$ns}StepsItem-subTitle,
    .#{$ns}StepsItem-description {
      color: var(--Steps-status-error);
    }
  }
  .#{$ns}StepsItem.is-finish,
  .#{$ns}StepsItem.is-process {
    .#{$ns}StepsItem-icon {
      background-color: var(--Steps-status-success);
      color: var(--white);
      border: 1px solid var(--Steps-status-success);
    }
  }
}


.#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
  .#{$ns}StepsItem {

    &-container {
      &Wrapper {
        .#{$ns}StepsItem-body {
          .#{$ns}StepsItem-title {
            &::after {
              display: none !important;
            }
          }
        }

        .#{$ns}StepsItem-body{
          .#{$ns}StepsItem-title {
            .#{$ns}StepsItem-subTitle {
              padding-left: px2rem(5px);
            }
          }
        }
      }

      &Icon {
        position: relative;
        display: block;

        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: px2rem(15px);
          height: 1px;
          left: px2rem(40px);
          width: 99999px;
          background-color: var(--Steps-line-bg);
        }
      }

      &Icon.is-success {
        &:after {
          background-color: var(--Steps-line-success-bg);
        }
      }
    }

    &:last-child {
      flex: 1;

      .#{$ns}StepsItem-container {
        &Icon {
          &:after {
            display: none !important;
          }
        }
      }
    }
  }
}