@sms-frontend/components/lib/Steps/style/navigation.less

SMS Design React 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 {
    padding-left: @steps-navigation-padding-left;
    padding-right: @steps-navigation-spacing-arrow-right;
    margin-right: @steps-navigation-margin-right;

    &:last-child {
      flex: 1;
    }

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

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

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

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

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