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

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

@import './token.less';

@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
  (@steps-dot-size-item-icon / 2);
@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -
  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);
// Dot
.@{steps-prefix-cls} {
  &-mode-dot &-item {
    position: relative;
    flex: 1;
    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
    overflow: visible;
    white-space: nowrap;
    text-align: left;

    &:last-child {
      flex: none;
      margin-right: 0;
    }
  }

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

  &-mode-dot &-item-node {
    display: inline-block;
    box-sizing: border-box;
    width: @steps-dot-size-item-icon;
    height: @steps-dot-size-item-icon;
    vertical-align: top;
    border-radius: @steps-dot-border-radius-item-icon;
  }

  &-mode-dot &-item-active &-item-node {
    width: @steps-dot-size-item-icon-active;
    height: @steps-dot-size-item-icon-active;
  }

  &-mode-dot &-item-wait &-item-node {
    background-color: @steps-dot-color-item-bg_wait;
    border-color: @steps-dot-color-item-border_wait;
  }

  &-mode-dot &-item-process &-item-node {
    background-color: @steps-dot-color-item-bg_process;
    border-color: @steps-dot-color-item-border_process;
  }

  &-mode-dot &-item-finish &-item-node {
    background-color: @steps-dot-color-item-bg_finish;
    border-color: @steps-dot-color-item-border_finish;
  }

  &-mode-dot &-item-error &-item-node {
    background-color: @steps-dot-color-item-bg_error;
    border-color: @steps-dot-color-item-border_error;
  }

  &-mode-dot&-horizontal &-item-node {
    margin-left: @steps-dot-item-icon-margin-left;
  }

  &-mode-dot&-horizontal &-item-active &-item-node {
    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) /
          2);
    margin-left: @steps-dot-item-icon-margin-left -
      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
  }

  &-mode-dot &-item-content {
    display: inline-block;
  }

  &-mode-dot &-item-title {
    position: relative;
    display: inline-block;
    margin-top: @steps-dot-horizontal-item-title-margin-top;
    font-size: @steps-size-default-font-size-title;
  }

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

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

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

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

  &-mode-dot &-item-description {
    margin-top: @steps-dot-horizontal-item-description-margin-top;
    font-size: @steps-size-default-font-size-description;
    white-space: normal;
  }

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

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

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

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

  &-mode-dot &-item:not(:last-child) &-item-tail {
    position: absolute;
    top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);
    left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
      @steps-dot-size-item-icon-gap;
    box-sizing: border-box;
    width: 100%;
    height: @steps-dot-size-item-tail;
    background-color: @steps-dot-color-item-tail_wait;
  }

  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {
    background-color: @steps-dot-color-item-tail_wait;
  }

  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {
    background-color: @steps-dot-color-item-tail_process;
  }

  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {
    background-color: @steps-dot-color-item-tail_error;
  }

  // Dot vertical
  &-mode-dot&-vertical &-item-node {
    margin-right: @steps-dot-vertical-item-icon-margin-right;
  }

  &-mode-dot&-vertical &-item-content {
    overflow: hidden;
  }

  &-mode-dot&-vertical &-item-title {
    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) - (@steps-size-default / 2);
  }

  &-mode-dot&-vertical &-item-description {
    margin-top: @steps-dot-vertical-item-description-margin-top;
  }

  &-mode-dot&-vertical &-item:not(:last-child) &-item-tail {
    position: absolute;
    bottom: 0;
    left: (@steps-dot-size-item-icon / 2);
    box-sizing: border-box;
    width: 1px;
    height: 100%;
    padding-top: (
      @steps-dot-size-item-icon + 4px + @steps-dot-size-item-icon-gap
    );
    padding-bottom: 2px;
    background-color: transparent;
    transform: translateX(-50%);

    &::after {
      display: block;
      width: 100%;
      height: 100%;
      background-color: @steps-dot-color-item-tail_wait;
      content: '';
    }
  }

  &-mode-dot&-vertical
    &-item:not(:last-child)&-item-process
    &-item-tail::after {
    background-color: @steps-dot-color-item-tail_wait;
  }

  &-mode-dot&-vertical &-item:not(:last-child)&-item-finish &-item-tail::after {
    background-color: @steps-dot-color-item-tail_process;
  }

  &-mode-dot&-vertical
    &-item:not(:last-child)&-item-next-error
    &-item-tail::after {
    background-color: @steps-dot-color-item-tail_error;
  }

  &-mode-dot&-vertical &-item &-item-node {
    margin-top: @steps-dot-vertical-item-dot-margin-top;
  }

  &-mode-dot&-vertical &-item-active &-item-node {
    margin-top: @steps-dot-vertical-item-dot-margin-top-active;
    margin-left: -((
            @steps-dot-size-item-icon-active - @steps-dot-size-item-icon
          ) / 2);
  }
}