winbox-ui-next/lib/steps/style/navigation.less

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

@import './token.less';

// Navigation
.@{steps-prefix-cls} {
  &-mode-navigation&-label-horizontal
    &-item:not(:last-child)
    &-item-title::after {
    display: none;
  }

  &-mode-navigation &-item {
    margin-right: @steps-navigation-margin-right;
    padding-right: @steps-navigation-spacing-arrow-right;
    padding-left: @steps-navigation-padding-left;

    &:last-child {
      flex: 1;
    }

    &-content {
      margin-bottom: 20px;
    }

    &-description {
      padding-right: 20px;
    }

    &-active::after {
      position: absolute;
      right: @steps-navigation-spacing-ink-right;
      bottom: 0;
      left: @steps-navigation-spacing-ink-left;
      display: block;
      height: 2px;
      background-color: @color-primary-6;
      content: '';
    }

    &-active:last-child::after {
      width: 100%;
    }
  }

  &-mode-navigation &-item:not(:last-child) &-item-content::after {
    position: absolute;
    top: @steps-navigation-size-arrow-top;
    right: 30px;
    display: inline-block;
    width: @steps-navigation-size-arrow;
    height: @steps-navigation-size-arrow;
    background-color: var(~'@{winbox-cssvars-prefix}-color-bg-2');
    border: @steps-navigation-size-arrow-line-width solid
      @steps-navigation-color-arrow;
    border-bottom: none;
    border-left: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
  }
}