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

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

@import './token.less';

// Arrow
.@{steps-prefix-cls} {
  &-mode-arrow &-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    height: @steps-size-default-arrow;
    overflow: visible;
    white-space: nowrap;

    &:not(:last-child) {
      margin-right: @steps-arrow-size-item-gap;
    }
  }

  &-mode-arrow &-item-wait {
    background-color: @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item-process {
    background-color: @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item-finish {
    background-color: @steps-arrow-color-item-bg_finish;
  }

  &-mode-arrow &-item-error {
    background-color: @steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item-content {
    display: inline-block;
    box-sizing: border-box;
  }

  &-mode-arrow &-item:first-child &-item-content {
    padding-left: @steps-arrow-size-default-title-padding-left;
  }

  &-mode-arrow &-item:not(:first-child) &-item-content {
    padding-left: @steps-arrow-size-default-title-padding-left +
      (@steps-size-default-arrow / 2);
  }

  &-mode-arrow &-item-title {
    position: relative;
    display: inline-block;
    font-size: @steps-size-default-font-size-title;
    white-space: nowrap;

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

  &-mode-arrow &-item-wait &-item-title {
    color: @steps-arrow-color-item-title_wait;
  }

  &-mode-arrow &-item-process &-item-title {
    color: @steps-arrow-color-item-title_process;
  }

  &-mode-arrow &-item-finish &-item-title {
    color: @steps-arrow-color-item-title_finish;
  }

  &-mode-arrow &-item-error &-item-title {
    color: @steps-arrow-color-item-title_error;
  }

  &-mode-arrow &-item-active &-item-title {
    font-weight: @steps-arrow-font-weight-item-title_active;
  }

  &-mode-arrow &-item-description {
    max-width: none;
    margin-top: @steps-arrow-item-description-margin-top;
    font-size: @steps-size-default-font-size-description;
    white-space: nowrap;
  }

  &-mode-arrow &-item-wait &-item-description {
    color: @steps-arrow-color-item-description_wait;
  }

  &-mode-arrow &-item-process &-item-description {
    color: @steps-arrow-color-item-description_process;
  }

  &-mode-arrow &-item-finish &-item-description {
    color: @steps-arrow-color-item-description_finish;
  }

  &-mode-arrow &-item-error &-item-description {
    color: @steps-arrow-color-item-description_error;
  }

  // 前箭头
  &-mode-arrow &-item:not(:first-child)::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 0;
    height: 0;
    border-top: (@steps-size-default-arrow / 2) solid transparent;
    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
    border-left: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
    content: '';
  }

  // 后箭头
  &-mode-arrow &-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: -(@steps-size-default-arrow / 2);
    z-index: 2;
    display: block;
    clear: both;
    width: 0;
    height: 0;
    border-top: (@steps-size-default-arrow / 2) solid transparent;
    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
    content: '';
  }

  &-mode-arrow &-item:not(:last-child)&-item-wait::after {
    border-left: (@steps-size-default-arrow / 2) solid
      @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item:not(:last-child)&-item-process::after {
    border-left: (@steps-size-default-arrow / 2) solid
      @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item:not(:last-child)&-item-error::after {
    border-left: (@steps-size-default-arrow / 2) solid
      @steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item:not(:last-child)&-item-finish::after {
    border-left: (@steps-size-default-arrow / 2) solid
      @steps-arrow-color-item-bg_finish;
  }

  // Small
  &-mode-arrow&-size-small &-item {
    height: @steps-size-small-arrow;

    &-title {
      font-size: @steps-size-small-font-size-title;
    }

    &-description {
      display: none;
    }

    &:not(:first-child) {
      &::before {
        border-top: (@steps-size-small-arrow / 2) solid transparent;
        border-bottom: (@steps-size-small-arrow / 2) solid transparent;
        border-left: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
      }
    }

    &:not(:last-child)::after {
      right: -(@steps-size-small-arrow / 2);
      border-top: (@steps-size-small-arrow / 2) solid transparent;
      border-bottom: (@steps-size-small-arrow / 2) solid transparent;
      border-left: (@steps-size-small-arrow / 2) solid
        @steps-arrow-color-item-bg_wait;
    }
  }

  &-mode-arrow&-size-small &-item:first-child &-item-content {
    padding-left: @steps-arrow-size-small-title-padding-left;
  }

  &-mode-arrow&-size-small &-item:not(:first-child) &-item-content {
    padding-left: @steps-arrow-size-small-title-padding-left +
      (@steps-size-small-arrow / 2);
  }

  &-mode-arrow&-size-small &-item-error {
    &:not(:last-child)::after {
      border-left: (@steps-size-small-arrow / 2) solid
        @steps-arrow-color-item-bg_error;
    }
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-wait::after {
    border-left: (@steps-size-small-arrow / 2) solid
      @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-process::after {
    border-left: (@steps-size-small-arrow / 2) solid
      @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-finish::after {
    border-left: (@steps-size-small-arrow / 2) solid
      @steps-arrow-color-item-bg_finish;
  }
}