naive-ui/styles/Tab.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include b(tabs) {
    width: 100%;
    border-radius: 6px;
    transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
    @include b(tab-nav) {
      display: flex;
      @include e(scroll) {
        overflow: hidden;
      }
      @include e(scroll-button) {
        font-size: 20px;
        height: 20px;
        line-height: 20px;
        align-self: center;
        cursor: pointer;
        transition: color .3s $default-cubic-bezier;
        fill: map-get($--tabs-tab-scroll-button-color, 'default');
        @include m(disabled) {
          cursor: not-allowed;
          fill: map-get($--tabs-tab-scroll-button-color, 'disabled');
        }
        @include m(left) {
          margin-right: 8px;
        }
        @include m(right) {
          margin-left: 8px;
        }
      }
    }
    @include b(tab-label-wrapper) {
      display: inline-block;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
      @include b(tab-label-bar) {
        position: absolute;
        bottom: 2px;
        height: 2px;
        background-color: $--tabs-tab-bar-background-color;
        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;
        transition: background-color .3s $default-cubic-bezier;
        @include m(disabled) {
          cursor: not-allowed;
        }
        @include e(close) {
          fill: map-get($--tabs-tab-close-button-color, 'default');
          margin-left: 8px;
          font-size: 20px;
          line-height: 20px;
          height: 20px;
          cursor: pointer;
          transition: color .3s $default-cubic-bezier;
        }
        @include e(label) {
          color: map-get($--tabs-tab-text-color, 'default');
          transition: color .3s $default-cubic-bezier;
        }
      }
    }
    @include b(tab-panel) {
      width: 100%;
      margin-top: 7px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      color: inherit;
      transition: background-color .3s $default-cubic-bezier;
      @include m(card-type) {
        margin-top: 0px;
        padding: 12px 26px 16px 26px;
        box-sizing: border-box;
        color: $--tabs-card-tab-text-color;
        background-color: $--tabs-card-tab-panel-background-color;
        transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
      }
    }
    @include m(scroll) {
      @include m(card-type) {
        @include b(tab-table-label) {
          &:first-child {
            margin-left: 4px;
          }
        }
      }
    }
    @include m(line-type) {
      @include b(tab-nav) {
        @include e(scroll-button) {
          padding-bottom: 4px;
        }
      }
      @include b(tab-label) {
        box-sizing: border-box;
        padding-bottom: 6px;
        vertical-align: bottom;
        @include e(label) {
          font-size: 14px;
        }
        &:hover {
          @include e(label) {
            color: map-get($--tabs-tab-text-color, 'hover');
          }
        }
        &:not(:last-child) {
          margin-right: 36px;
        }
        @include m(active) {
          @include e(label) {
            color: map-get($--tabs-tab-text-color, 'active');
          }
        }
        @include m(disabled) {
          @include e(label) {
            color: map-get($--tabs-tab-text-color, 'disabled');
          }
        }
      }
    }
    @include m(card-type) {
      background-color: $--tabs-card-tab-background-color;
      border: $--tabs-card-tab-border-width solid $--tabs-card-tab-border-color;
      padding-top: 6px;
      @include b(tab-nav) {
        @include e(scroll-button) {
          @include m(left) {
            margin-left: 4px;
            margin-right: 4px;
          }
          @include m(right) {
            margin-left: 4px;
            margin-right: 4px;
          }
        }
      }
      @include b(tab-label) {
        margin-left: -1px;
        box-sizing: border-box;
        height: 34px;
        line-height: 34px;
        padding: 0 16px;
        position: relative;
        vertical-align: bottom;
        @include e(label) {
          font-size: 14px;
        }
        @include e(corner) {
          position: absolute;
          height: 4px;
          width: 4px;
          bottom: 0;
          @include m(left) {
            left: -4px;
          }
          @include m(right) {
            right: -4px;
          }
          svg {
            display: block;
            path {
              transition: fill .3s $default-cubic-bezier;
              fill: $--tabs-card-tab-panel-background-color;
            }
          }
        }
        &:hover {
          @include e(label) {
            color: map-get($--tabs-tab-text-color, 'hover');
          }
        }
        &:first-child {
          margin-left: 10px;
        }
        &:not(:last-child) {
          &::after {
            content: "";
            background-color: $--tabs-card-label-divider-color;
            width: 1px;
            position: absolute;
            right: 0;
            top: 6px;
            bottom: 6px;
          }
        }
        @include m(active) {
          background-color: $--tabs-card-tab-panel-background-color;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          @include e(label) {
            font-size: 14px;
            color: map-get($--tabs-tab-text-color, 'active');
          }
          &::after {
            display: none;
          }
        }
        @include m(disabled) {
          @include e(label) {
            color: map-get($--tabs-tab-text-color, 'disabled');
          }
        }
        @include m(transition-disabled) {
          transition: none;
        }
      }
    }
  }  
}