tdesign-react/esm/style/web/components/tabs/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-tabs {
  .reset;

  overflow: hidden;
  background-color: @tab-default-bg;

  &__header {
    &.@{prefix}-is-left {
      float: left;
    }

    &.@{prefix}-is-right {
      float: right;
    }

    .t-icon {
      font-size: @tab-icon-size;
    }
  }

  &__nav {
    position: relative;
    overflow: hidden;
    user-select: none;
  }

  &__operations {
    display: flex;
    flex-direction: row;
    position: absolute;
    border-bottom: @tab-bar-operations-border;
    background-color: @tab-default-bg;

    &--left {
      left: 0;
      z-index: 2;
    }

    &--right {
      right: 0;
      z-index: 2;

      .@{prefix}-tabs__btn {
        &:first-child {
          box-shadow: @tab-bar-operations-btn-box-shadow;
        }
      }

      .@{prefix}-tabs__nav-action {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
      }
    }
  }

  &__btn {
    width: @tab-btn-width;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @tab-card-bg;
    border-left: @tab-btn-border;
    cursor: pointer;
    color: @tab-default-text;
    font: @tab-nav-item-font;
    transition: @tab-bar-transition;
    z-index: 1;
    opacity: 1;

    &:hover {
      background-color: @tab-card-bg-hover;
    }

    &.@{prefix}-size-m {
      height: @tab-height-middle;
      line-height: @tab-height-middle;
    }

    &.@{prefix}-size-l {
      height: @tab-height-large;
      line-height: @tab-height-large;
    }

    &--left {
      border-right: @tab-btn-border;
      box-shadow: @tab-btn-box-shadow;

      &.fade-enter,
      &.fade-enter-from,
      &.fade-leave-to {
        transform: @tab-btn-fade-transform-left;
      }
    }

    &--right {
      &.fade-enter,
      &.fade-enter-from,
      &.fade-leave-to {
        transform: @tab-btn-fade-transform-right;
      }
    }
  }

  &__nav-container {
    position: relative;

    &.@{prefix}-is-top::after {
      .bar-track-pseudo(100%, 1px, auto, auto, 0, 0);
    }

    &.@{prefix}-is-bottom::after {
      .bar-track-pseudo(100%, 1px, 0, auto, auto, 0);
    }

    &.@{prefix}-is-left::after {
      .bar-track-pseudo(1px, 100%, 0, 0);
    }

    &.@{prefix}-is-right::after {
      .bar-track-pseudo(1px, 100%, 0, auto, auto, 0);
    }

    &.@{prefix}-is-addable {
      margin-right: @tab-btn-width;
    }

    &.@{prefix}-tabs__nav--card {
      // border-bottom: 1px solid @tab-default-stroke;

      &::after {
        content: "";
        background-color: transparent;
      }
    }
  }

  &__scroll-btn {
    position: absolute;
    z-index: 1;
    width: @tab-btn-width;
    height: 100%;
    display: block;
    background-color: @tab-card-bg;
    text-align: center;
    border-bottom: @tab-bar-operations-border;
    cursor: pointer;
    color: @tab-card-text;
    font: @tab-nav-item-font;

    &.@{prefix}-size-m {
      height: @tab-height-middle;
      line-height: @tab-height-middle;
    }

    &.@{prefix}-size-l {
      height: @tab-height-large;
      line-height: @tab-height-large;
    }
  }

  &__nav-scroll {
    position: relative;
    display: inline-block;
    display: flex;
    flex: auto;
    align-self: stretch;
    overflow: hidden;
    white-space: nowrap;
    transform: @tab-nav-scroll-transform;
    z-index: 1;
  }

  &__nav-wrap {
    position: relative;
    display: flex;
    font-size: 0;

    &.@{prefix}-is-smooth {
      transition: @tab-nav-warp-is-smooth-transform;
    }

    &.@{prefix}-is-vertical {
      flex-direction: column;
    }
  }

  &__bar {
    position: absolute;
    background-color: @tab-default-bar-bg-color;
    z-index: 1;
    transition: @tab-bar-transition;
    border-radius: @border-radius-small;

    &.@{prefix}-is-top {
      bottom: 0;
      left: 0;
      height: @tab-default-stroke-size;
    }

    &.@{prefix}-is-bottom {
      top: 0;
      left: 0;
      height: @tab-default-stroke-size;
    }

    &.@{prefix}-is-left {
      top: 0;
      right: 0;
      width: @tab-default-stroke-size;
    }

    &.@{prefix}-is-right {
      top: 0;
      left: 0;
      width: @tab-default-stroke-size;
    }
  }

  &__nav-item {
    display: inline-flex;
    align-items: center;
    font: @font-body-medium;
    color: @tab-default-text;
    position: relative;
    overflow: hidden;
    z-index: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: @tab-nav-item-transition;

    &-wrapper {
      display: flex;
      align-items: center;
      height: @tab-nav-item-wrapper-height;
      padding: @tab-nav-item-wrapper-padding;
      margin-left: @tab-nav-item-margin-left;
      margin-right: @tab-nav-item-margin-right;
      border-radius: @border-radius-default;
      transition: @tab-nav-item-transition;

      --ripple-color: @bg-color-container-active;
    }

    &.@{prefix}-size-l {
      font: @tab-nav-item-font;

      .@{prefix}-tabs__nav-item-wrapper {
        height: @tab-nav-item-wrapper-height-large;
        padding: @tab-nav-item-wrapper-padding-large;
      }
    }

    &-text-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover {
      .@{prefix}-tabs__nav-item-wrapper {
        background-color: @bg-color-container-hover;
      }
    }

    &.@{prefix}-is-left,
    &.@{prefix}-is-right {
      display: flex;
      align-items: center;
    }

    &.@{prefix}-size-m {
      height: @tab-height-middle;
      line-height: @tab-height-middle;
    }

    &.@{prefix}-size-l {
      height: @tab-height-large;
      line-height: @tab-height-large;
    }

    &.@{prefix}-is-active {
      color: @tab-default-text-select;
      // font-weight: 500;
      text-shadow: @tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
    }

    &.@{prefix}-is-disabled {
      color: @tab-default-text-disabled;
      cursor: not-allowed;
    }

    & > .remove-btn {
      margin-left: @tab-btn-remove-btn-margin-left;
      transition: @tab-btn-remove-btn-transition;
    }

    --ripple-color: @bg-color-container-active;
  }

  &__nav--card {
    background-color: @tab-card-bg;

    &.@{prefix}-tabs__nav-item {
      padding-right: @tab-nav-card-nav-item-padding-right;
      padding-left: @tab-nav-card-nav-item-padding-left;
      border-bottom: @tab-btn-border;

      &::after {
        display: none;
      }

      &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active) {
        &:hover {
          background-color: @bg-color-secondarycontainer-hover;
        }
      }

      &:not(:first-of-type) {
        border-left: @tab-btn-border;
      }

      &:last-of-type {
        border-right: @tab-btn-border;
      }

      &.@{prefix}-is-active {
        color: @tab-card-text-select;
        background-color: @tab-card-bg-select;
        border-bottom-color: @tab-card-bg-select;
      }

      &.@{prefix}-size-l {
        padding-left: @tab-nav-card-nav-item-padding-left-large;
        padding-right: @tab-nav-card-nav-item-padding-right-large;
      }
    }

    .t-icon-close {
      color: @tab-card-icon;
      transition: @tab-btn-icon-close-transition;

      &:hover {
        color: @tab-card-icon-select;
      }
    }
  }

  &__content {
    overflow: hidden;
    position: relative;
  }
}

.@{prefix}-tab-panel {
  &.@{prefix}-is-hidden {
    display: none;
  }
}