naive-ui/styles/Tab.scss

@import './mixins/mixins.scss';
@import './theme/default.scss';

@include b(tab) {
  width: 100%;
  border-radius: 4px;
  &.n-tab--scroll {
    &.n-tab--card-type {
      .n-tab-label:first-child {
        margin-left: 4px;
      }
    }
  }
  &.n-tab--line-type {
    .n-tab-nav {
      .n-tab-nav__scroll-button {
        padding-bottom: 4px;
      }
    }
    .n-tab-label {
      box-sizing: border-box;
      padding-bottom: 7px;
      &:hover {
        .n-tab-label__label {
          color: #63E2B7;
        }
      }
      &:not(:last-child) {
        margin-right: 36px;
      }
      &.n-tab-label--active {
        .n-tab-label__label {
          font-size: 16px;
          color: #63E2B7;
        }
      }
      &.n-tab-label--disabled {
        .n-tab-label__label {
          color: rgba(255,255,255,0.3);
        }
      }
    }
  }
  &.n-tab--card-type {
    background-color: rgba(57, 63, 87, 1);
    padding-top: 6px;
    .n-tab-nav {
      .n-tab-nav__scroll-button.n-tab-nav__scroll-button--left {
        margin-left: 4px;
        margin-right: 4px;
      }
      .n-tab-nav__scroll-button.n-tab-nav__scroll-button--right {
        margin-left: 4px;
        margin-right: 4px;
      }
    }
    .n-tab-label {
      margin-left: -1px;
      box-sizing: border-box;
      height: 34px;
      line-height: 34px;
      padding: 0 16px;
      position: relative;
      .n-tab-label__corner {
        position: absolute;
        height: 4px;
        width: 4px;
        bottom: 0;
        &.n-tab-label__corner--left {
          left: -4px;
        }
        &.n-tab-label__corner--right {
          right: -4px;
        }
        svg {
          display: block;
          path {
            fill: rgba(75, 81, 106, 1);
          }
        }
      }
      &:hover {
        .n-tab-label__label {
          color: #63E2B7;
        }
      }
      &:first-child {
        margin-left: 10px;
      }
      &:not(:last-child) {
        &::after {
          content: "";
          background-color: rgba(255, 255, 255, 0.5);
          width: 1px;
          position: absolute;
          right: 0;
          top: 6px;
          bottom: 6px;
        }
      }
      &.n-tab-label--active {
        background-color: rgba(75, 81, 106, 1);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        .n-tab-label__label {
          font-size: 16px;
          color: #63E2B7;
        }
        &::after {
          display: none;
        }
      }
      &.n-tab-label--disabled {
        .n-tab-label__label {
          color: rgba(255,255,255,0.3);
        }
      }
    }
  }
}

@include b(tab-nav) {
  display: flex;
  .n-tab-nav__scroll {
    overflow: hidden;
  }
  .n-tab-nav__scroll-button {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    align-self: center;
    cursor: pointer;
    &.n-tab-nav__scroll-button--disabled {
      cursor: not-allowed;
      color: rgba(255, 255, 255 ,.3);
    }
    &.n-tab-nav__scroll-button--left {
      margin-right: 8px;
    }
    &.n-tab-nav__scroll-button--right {
      margin-left: 8px;
    }
  }
}

@include b(tab-label-wrapper) {
  display: inline-block;
  font-weight: bold;
  white-space: nowrap;
  position: relative;
  @include b(tab-label-bar) {
    position: absolute;
    bottom: 2px;
    height: 2px;
    background-color: #63E2B7;
    border-radius: 1px;
    transition: left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
  }
  @include b(tab-label) {
    cursor: pointer;
    white-space: nowrap;
    flex-wrap: nowrap;
    display: inline-flex;
    align-items: center;
    &.n-tab-label--disabled {
      cursor: not-allowed;
    }
    .n-tab-label__close {
      color: rgba(255, 255, 255, 0.5);
      margin-left: 8px;
      font-size: 20px;
      line-height: 20px;
      height: 20px;
      cursor: pointer;
    }
    .n-tab-label__label {
      transition: color .3s $default-cubic-bezier;
    }
  }
}

@include b(tab-panel) {
  width: 100%;
  margin-top: 7px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  &.n-tab-panel--card-type {
    margin-top: 0px;
    padding: 12px 26px 16px 26px;
    box-sizing: border-box;
    background-color: rgba(75,81,106,1);
  }
}