@arco-design/web-vue/es/steps/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';
@import './circle.less';
@import './dot.less';
@import './arrow.less';
@import './navigation.less';

@steps-prefix-cls: ~'@{prefix}-steps';

.@{steps-prefix-cls} {
  display: flex;

  &-changeable {
    .@{steps-prefix-cls}-item-title,
    .@{steps-prefix-cls}-item-description {
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }
  }

  &-changeable &-item:not(&-item-active):not(&-item-disabled) {
    cursor: pointer;

    &:hover {
      .@{steps-prefix-cls}-item-content {
        .@{steps-prefix-cls}-item-title,
        .@{steps-prefix-cls}-item-description {
          color: @color-primary-6;
        }
      }
    }
  }
}

// Line Less
.@{steps-prefix-cls} {
  &-line-less &-item-title::after {
    display: none !important;
  }
}

// Direction
.@{steps-prefix-cls} {
  &-vertical {
    flex-direction: column;
  }

  &-vertical &-item {
    &:not(:last-child) {
      min-height: 90px;
    }

    &-title::after {
      display: none !important;
    }

    &-description {
      max-width: none;
    }
  }
}

// Label vertical
.@{steps-prefix-cls} {
  &-label-vertical &-item {
    &-content {
      display: block;
      width: @steps-label-vertical-content-width;
      text-align: center;
    }

    &-description {
      max-width: none;
    }
  }
}