@arco-design/web-vue/lib/tabs/style/index.less

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

@import './token.less';
@import '../../style/mixins/index';

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

.get-title-padding(@header-height, @font-size, @padding-vertical ) {
  // prettier-ignore
  @result: max(0, round((@header-height / 2) - @line-height-base * (@font-size / 2) - @padding-vertical));
}

// tabs icon style

.icon-hover(@tabs-prefix-cls, @tabs-size-icon, @tabs-size-icon-bg);

.@{tabs-prefix-cls} {
  & &-icon-hover {
    color: @tabs-color-icon;
    font-size: @tabs-size-icon;
    user-select: none;
  }

  &-dropdown-icon {
    margin-left: @tabs-spacing-nav-icon-header;
    font-size: @tabs-size-icon;
    user-select: none;
  }

  &-tab-close-btn {
    margin-left: @tabs-margin-close-icon-left;
    user-select: none;
  }

  &-nav-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 @tabs-margin-add-icon-left;
    font-size: @tabs-size-icon;
    user-select: none;
  }

  &-add {
    position: relative;
  }

  &-nav-button {
    &-left {
      margin-right: @tabs-spacing-nav-icon-header;
      margin-left: @tabs-padding-header-wrapper-horizontal;
    }

    &-right {
      margin-right: @tabs-padding-header-wrapper-horizontal;
      margin-left: @tabs-spacing-nav-icon-header;
    }

    &-up {
      margin-bottom: @tabs-padding-header-wrapper-horizontal;
    }

    &-down {
      margin-top: @tabs-padding-header-wrapper-horizontal;
    }

    &-disabled {
      color: @tabs-color-icon_disabled;
      cursor: not-allowed;
    }
  }
}

.@{tabs-prefix-cls} {
  position: relative;
  overflow: hidden;

  &-nav {
    position: relative;
    flex-shrink: 0;

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      clear: both;
      height: @tabs-line-size-header-border;
      background-color: @tabs-line-color-header-border;
      content: '';
    }
  }

  &-nav-tab {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  &-nav-tab-list {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    transition: transform @transition-duration-2
      @transition-timing-function-standard;
  }

  &-nav-extra {
    display: flex;
    align-items: center;
    width: auto;
    line-height: @tabs-size-default-header-height;

    .@{tabs-prefix-cls}-nav-add-btn {
      padding-left: 0;
    }
  }

  &-tab {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: .get-title-padding(
        @tabs-size-default-header-height,
        @tabs-size-default-font-size,
        @tabs-padding-title-text-vertical
      )
      [] 0;
    color: @tabs-color-title-text;
    font-size: @tabs-size-default-font-size;
    line-height: 1.5715;
    outline: none;
    cursor: pointer;
    transition: color @transition-duration-2 @transition-timing-function-linear;

    &-title {
      display: inline-block;
    }

    &:hover {
      color: @tabs-color-title-text_hover;
      font-weight: @tabs-line-font-title-text-weight_hover;
    }

    &-disabled,
    &-disabled:hover {
      color: @tabs-color-title-text_disabled;
      cursor: not-allowed;
    }

    &-active,
    &-active:hover {
      color: @tabs-color-title-text_active;
      font-weight: @tabs-line-font-title-text-weight_active;

      &.@{tabs-prefix-cls}-tab-disabled {
        color: @tabs-color-title-text_disabled_active;
      }
    }
  }

  &-nav-ink {
    position: absolute;
    top: initial;
    right: initial;
    bottom: 0;
    height: @tabs-line-size-ink-stroke;
    background-color: @tabs-line-color-ink-bg;
    transition: left @transition-duration-2 @transition-timing-function-standard,
      width @transition-duration-2 @transition-timing-function-standard;

    &.@{tabs-prefix-cls}-header-ink-no-animation {
      transition: none;
    }

    &-disabled {
      background-color: @tabs-line-color-ink-bg_disabled;
    }
  }
}

// card card-gutter 类型

.@{tabs-prefix-cls} {
  // type = line
  &-nav-type-line &-nav-extra {
    line-height: @tabs-size-default-header-height_line;
  }

  &-nav-type-line &-tab {
    margin: 0 (@tabs-line-margin-title-horizontal / 2);
    padding: .get-title-padding(
        @tabs-size-default-header-height_line,
        @tabs-size-default-font-size,
        @tabs-padding-title-text-vertical
      )
      [] 0;
    line-height: 1.5715;

    &-title {
      position: relative;
      display: inline-block;
      padding: @tabs-padding-title-text-vertical 0;

      &::before {
        position: absolute;
        top: 0;
        right: -@tabs-padding-title-text-horizontal;
        bottom: 0;
        left: -@tabs-padding-title-text-horizontal;
        z-index: -1;
        background-color: @tabs-line-color-title-bg;
        border-radius: @tabs-line-border-radius;
        opacity: 1;
        transition: background-color @transition-duration-2
            @transition-timing-function-linear,
          opacity @transition-duration-2 @transition-timing-function-linear;
        content: '';
      }
    }

    &:hover {
      .@{tabs-prefix-cls}-tab-title::before {
        background-color: @tabs-line-color-title-bg_hover;
      }
    }

    &-active,
    &-active:hover {
      .@{tabs-prefix-cls}-tab-title::before {
        background-color: @tabs-line-color-title-bg_active;
      }
    }

    &-disabled,
    &-disabled:hover {
      .@{tabs-prefix-cls}-tab-title::before {
        opacity: 0;
      }
    }

    &:focus-visible {
      .@{tabs-prefix-cls}-tab-title::before {
        border: 2px solid @color-primary-6;
      }
    }
  }

  &-nav-type-line&-nav-horizontal > &-tab:first-of-type {
    margin-left: @tabs-line-margin-title-horizontal_first;
  }

  // headerPadding=false & type === line/text & horizontal
  &-nav-type-line&-nav-horizontal
    &-nav-tab-list-no-padding
    > &-tab:first-of-type,
  &-nav-text&-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type {
    margin-left: 0;
  }

  // type = card card-gutter
  &-nav-type-card,
  &-nav-type-card-gutter {
    .@{tabs-prefix-cls}-tab {
      position: relative;
      padding: .get-title-padding(
          (@tabs-size-default-header-height - @tabs-card-border-width * 2),
          @tabs-size-default-font-size_card,
          0
        )
        [] @tabs-card-padding-title-horizontal;
      font-size: @tabs-size-default-font-size_card;
      border: @tabs-card-border-width solid @tabs-card-color-title-border;
      transition: padding @transition-duration-2
          @transition-timing-function-linear,
        color @transition-duration-2 @transition-timing-function-linear;

      &-closable {
        padding-right: @tabs-card-padding-title-right_editable;
      }

      &-closable:not(.@{tabs-prefix-cls}-tab-active):hover
        .@{prefix}-icon-hover:hover::before {
        background-color: @tabs-card-color-close-icon-bg_hover;
      }

      &:focus-visible::before {
        position: absolute;
        top: -1px;
        right: 0;
        bottom: -1px;
        left: -1px;
        border: 2px solid @color-primary-6;
        content: '';
      }

      &:last-child:focus-visible::before {
        right: -1px;
      }
    }
  }

  &-nav-type-card,
  &-nav-type-card-gutter {
    .@{tabs-prefix-cls}-nav-add-btn {
      height: @tabs-size-default-header-height;
    }
  }

  &-nav-type-card &-tab {
    background-color: @tabs-card-color-title-bg;
    border-right: none;

    &:last-child {
      border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
      border-top-right-radius: @tabs-card-border-radius;
    }

    &:first-child {
      border-top-left-radius: @tabs-card-border-radius;
    }

    &:hover {
      background-color: @tabs-card-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: @tabs-card-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      background-color: @tabs-card-color-title-bg_active;
      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
    }
  }

  &-nav-type-card-gutter &-tab {
    margin-left: @tabs-card-gutter-spacing-horizontal;
    background-color: @tabs-card-gutter-color-title-bg;
    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
    border-radius: @tabs-card-border-radius @tabs-card-border-radius 0 0;

    &:hover {
      background-color: @tabs-card-gutter-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: @tabs-card-gutter-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      background-color: @tabs-card-gutter-color-title-bg_active;
      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
    }

    &:first-child {
      margin-left: 0;
    }
  }

  // type = text
  &-nav-type-text {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-tab {
      position: relative;
      margin: 0
        (
          @tabs-text-margin-title-horizontal +
            (@tabs-text-size-separator-width / 2)
        );
      padding: .get-title-padding(
          @tabs-size-default-header-height_text,
          @tabs-size-default-font-size,
          0
        )
        [] 0;
      font-size: @tabs-size-default-font-size_text;
      line-height: 1.5715;

      &:not(:first-of-type)::before {
        position: absolute;
        top: 50%;
        left: -(@tabs-text-margin-title-horizontal +
              (@tabs-text-size-separator-width / 2));
        display: block;
        width: @tabs-text-size-separator-width;
        height: @tabs-text-size-separator-height;
        background-color: @tabs-text-color-separator-bg;
        transform: translateY(-50%);
        content: '';
      }

      &-title {
        padding-right: @tabs-text-margin-title-horizontal;
        padding-left: @tabs-text-margin-title-horizontal;
        background-color: @tabs-text-color-title-bg;
      }

      &-title:hover {
        background-color: @tabs-text-color-title-bg_hover;
      }

      &-active {
        .@{tabs-prefix-cls}-tab-title,
        .@{tabs-prefix-cls}-tab-title:hover {
          background-color: @tabs-text-color-title-bg_active;
        }
      }

      &-disabled {
        .@{tabs-prefix-cls}-tab-title,
        .@{tabs-prefix-cls}-tab-title:hover {
          background-color: @tabs-text-color-title-bg_disabled;
        }
      }

      &-active&-disabled {
        .@{tabs-prefix-cls}-tab-title,
        .@{tabs-prefix-cls}-tab-title:hover {
          background-color: @tabs-text-color-title-bg_disabled_active;
        }
      }

      &:focus-visible {
        .@{tabs-prefix-cls}-tab-title {
          margin: -2px;
          border: 2px solid @color-primary-6;
        }
      }
    }
  }

  &-nav-type-rounded {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-tab {
      margin: 0 (@tabs-rounded-margin-title-horizontal / 2);
      padding: .get-title-padding(
          @tabs-size-default-header-height_rounded,
          @tabs-size-default-font-size_rounded,
          0
        )
        [] 0;
      padding-right: @tabs-rounded-padding-title-horizontal;
      padding-left: @tabs-rounded-padding-title-horizontal;
      font-size: @tabs-size-default-font-size_rounded;
      background-color: @tabs-rounded-color-title-bg;
      border-radius: @tabs-size-default-header-height_rounded;

      &:hover {
        background-color: @tabs-rounded-color-title-bg_hover;
      }

      &-disabled:hover {
        background-color: @tabs-rounded-color-title-bg_disabled;
      }

      &-active,
      &-active:hover {
        background-color: @tabs-rounded-color-title-bg_active;
      }

      &:focus-visible {
        border-color: @color-primary-6;
      }
    }
  }

  &-nav-type-capsule {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-nav-tab:not(.@{tabs-prefix-cls}-nav-tab-scroll) {
      justify-content: flex-end;
    }

    .@{tabs-prefix-cls}-nav-tab-list {
      padding: @tabs-capsule-padding-header-vertical
        @tabs-capsule-padding-header-horizontal;
      line-height: 1;
      background-color: @tabs-capsule-color-header-bg;
      border-radius: @tabs-capsule-border-header-radius;
    }

    .@{tabs-prefix-cls}-tab {
      position: relative;
      padding: 0 @tabs-capsule-padding-title-horizontal - 2;
      font-size: @tabs-size-default-font-size_capsule;
      line-height: (
        @tabs-size-default-header-height_capsule -
          @tabs-capsule-padding-header-vertical * 2
      );
      background-color: @tabs-capsule-color-title-bg;

      &:hover {
        background-color: @tabs-capsule-color-title-bg_hover;
      }

      &-disabled:hover {
        background-color: unset;
      }

      &-active,
      &-active:hover {
        background-color: @tabs-capsule-color-title-bg_active;

        &::before,
        & + .@{tabs-prefix-cls}-tab::before {
          opacity: 0;
        }
      }

      &:focus-visible {
        border-color: @color-primary-6;
      }
    }

    &.@{tabs-prefix-cls}-nav-horizontal
      .@{tabs-prefix-cls}-tab:not(:first-of-type) {
      margin-left: @tabs-capsule-margin-title-horizontal;

      &::before {
        position: absolute;
        top: 50%;
        left: -(@tabs-capsule-margin-title-horizontal / 2) - (
            @tabs-capsule-size-separator-width / 2
          ) - 2;
        display: block;
        width: @tabs-capsule-size-separator-width;
        height: @tabs-capsule-size-separator-height;
        background-color: @tabs-capsule-color-separator-bg;
        transform: translateY(-50%);
        transition: all @transition-duration-2
          @transition-timing-function-linear;
        content: '';
      }
    }
  }
}

//   /** header */

.@{tabs-prefix-cls} {
  &-nav {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    padding-top: @tabs-content-padding;
    overflow: hidden;

    &-hide {
      display: none;
    }

    .@{tabs-prefix-cls}-content-list {
      display: flex;
      width: 100%;
    }

    .@{tabs-prefix-cls}-content-item {
      flex-shrink: 0;
      width: 100%;
      height: 0;
      overflow: hidden;

      &.@{tabs-prefix-cls}-content-item-active {
        height: auto;
      }
    }
  }

  &-type-card,
  &-type-card-gutter {
    > .@{tabs-prefix-cls}-content {
      border: @tabs-card-border-content-width solid
        @tabs-line-color-header-border;
      border-top: none;
    }
  }

  &-content-animation {
    transition: all @transition-duration-2 @transition-timing-function-standard;
  }

  &-horizontal&-justify {
    display: flex;
    flex-direction: column;
    height: 100%;

    .@{tabs-prefix-cls}-content,
    .@{tabs-prefix-cls}-content-list,
    .@{tabs-prefix-cls}-pane {
      height: 100%;
    }
  }
}

@sizes: mini, small, large;

.for(@data, @i: 1) when (@i =< length(@data)) {
  @size: extract(@data, @i);

  .@{tabs-prefix-cls}-nav-size-@{size} {
    &.@{tabs-prefix-cls}-nav-type-line {
      @height: ~'tabs-size-@{size}-header-height_line';
      @font-size: ~'tabs-size-@{size}-font-size';

      .@{tabs-prefix-cls}-nav-extra {
        font-size: @@font-size;
        line-height: @@height;
      }

      .@{tabs-prefix-cls}-tab {
        padding-top: @padding;
        padding-bottom: @padding;
        font-size: @@font-size;

        @padding: .get-title-padding(
            @@height,
            @@font-size,
            @tabs-padding-title-text-vertical
          )
          [];
      }

      .@{tabs-prefix-cls}-nav-extra {
        font-size: @@font-size;
        line-height: @@height;
      }
    }

    &.@{tabs-prefix-cls}-nav-type-card,
    &.@{tabs-prefix-cls}-nav-type-card-gutter {
      @card-font-size: ~'tabs-size-@{size}-font-size_card';
      @card-height: ~'tabs-size-@{size}-header-height';

      .@{tabs-prefix-cls}-tab {
        padding-top: .get-title-padding(
            @@card-height - @tabs-card-border-width * 2,
            @@card-font-size,
            @tabs-padding-title-text-vertical
          )
          [];
        padding-bottom: $padding-top;
        font-size: @@card-font-size;
      }

      .@{tabs-prefix-cls}-nav-extra {
        font-size: @@card-font-size;
        line-height: @@card-height;
      }

      .@{tabs-prefix-cls}-nav-add-btn {
        height: @@card-height;
      }
    }

    &.@{tabs-prefix-cls}-nav-type-capsule {
      @capsule-font-size: ~'tabs-size-@{size}-font-size_capsule';
      @capsule-height: ~'tabs-size-@{size}-header-height_capsule';

      .@{tabs-prefix-cls}-tab {
        font-size: @@capsule-font-size;
        line-height: @@capsule-height - @tabs-capsule-padding-header-vertical * 2;
      }

      .@{tabs-prefix-cls}-nav-extra {
        font-size: @@capsule-font-size;
        line-height: @@capsule-height;
      }
    }

    &.@{tabs-prefix-cls}-nav-type-rounded {
      @rounded-font-size: ~'tabs-size-@{size}-font-size_rounded';
      @rounded-height: ~'tabs-size-@{size}-header-height_rounded';

      .@{tabs-prefix-cls}-tab {
        padding-top: .get-title-padding(
            @@rounded-height,
            @@rounded-font-size,
            0
          )
          [];
        padding-bottom: $padding-top;
        font-size: @@rounded-font-size;
      }

      .@{tabs-prefix-cls}-nav-extra {
        font-size: @@rounded-font-size;
        line-height: @@rounded-height;
      }
    }
  }

  .for(@data, (@i + 1));
}

.for(@sizes);

@import './vertical.less';

@{arco-theme-tag}[arco-theme='dark'] {
  .@{tabs-prefix-cls}-nav-type-capsule {
    .@{tabs-prefix-cls}-tab {
      &-active {
        background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');
      }

      &:hover {
        background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');
      }
    }
  }
}