vant/src/step/index.less

@import './var.less';

:root {
  --van-step-text-color: @step-text-color;
  --van-step-active-color: @step-active-color;
  --van-step-process-text-color: @step-process-text-color;
  --van-step-font-size: @step-font-size;
  --van-step-line-color: @step-line-color;
  --van-step-finish-line-color: @step-finish-line-color;
  --van-step-finish-text-color: @step-finish-text-color;
  --van-step-icon-size: @step-icon-size;
  --van-step-circle-size: @step-circle-size;
  --van-step-circle-color: @step-circle-color;
  --van-step-horizontal-title-font-size: @step-horizontal-title-font-size;
}

.van-step {
  position: relative;
  flex: 1;
  color: var(--van-step-text-color);
  font-size: var(--van-step-font-size);

  &__circle {
    display: block;
    width: var(--van-step-circle-size);
    height: var(--van-step-circle-size);
    background-color: var(--van-step-circle-color);
    border-radius: 50%;
  }

  &__line {
    position: absolute;
    background-color: var(--van-step-line-color);
    transition: background-color @animation-duration-base;
  }

  &--horizontal {
    float: left;

    &:first-child {
      .van-step__title {
        margin-left: 0;
        transform: none;
      }
    }

    &:last-child {
      position: absolute;
      right: 1px;
      width: auto;

      .van-step__title {
        margin-left: 0;
        transform: none;
      }

      .van-step__circle-container {
        right: -9px;
        left: auto;
      }
    }

    .van-step__circle-container {
      position: absolute;
      top: 30px;
      left: -@padding-xs;
      z-index: 1;
      padding: 0 @padding-xs;
      background-color: @white;
      transform: translateY(-50%);
    }

    .van-step__title {
      display: inline-block;
      margin-left: 3px;
      font-size: var(--van-step-horizontal-title-font-size);
      transform: translateX(-50%);
    }

    .van-step__line {
      top: 30px;
      left: 0;
      width: 100%;
      height: 1px;
    }

    .van-step__icon {
      display: block;
      font-size: var(--van-step-icon-size);
    }

    .van-step--process {
      color: var(--van-step-process-text-color);
    }
  }

  &--vertical {
    display: block;
    float: none;
    padding: 10px 10px 10px 0;
    line-height: @line-height-sm;

    &:not(:last-child)::after {
      border-bottom-width: 1px;
    }

    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: -15px;
        z-index: 1;
        width: 1px;
        height: 20px;
        background-color: @white;
        content: '';
      }
    }

    .van-step__circle-container {
      position: absolute;
      top: 19px;
      left: -15px;
      z-index: 2;
      font-size: var(--van-step-icon-size);
      line-height: 1;
      transform: translate(-50%, -50%);
    }

    .van-step__line {
      top: 16px;
      left: -15px;
      width: 1px;
      height: 100%;
    }
  }

  &:last-child {
    .van-step__line {
      width: 0;
    }
  }

  &--finish {
    color: var(--van-step-finish-text-color);

    .van-step__circle,
    .van-step__line {
      background-color: var(--van-step-finish-line-color);
    }
  }

  &__icon,
  &__title {
    transition: color @animation-duration-base;

    &--active,
    &--finish {
      color: var(--van-step-active-color);
    }
  }
}