naive-ui/styles/Table.scss

@import "./mixins/mixins.scss";

@mixin table-size-mixin () {
  @include m(small-size) {
    font-size: map-get($--n-font-size, 'medium');
    @include e(th) {
      padding: 5px 5px 5px 11px;
    }
    @include e(td) {
      padding: 5px 5px 5px 11px;
    }
  }
  @include m(medium-size) {
    font-size: map-get($--n-font-size, 'medium');
    @include e(th) {
      padding: 10px 10px 10px 16px;
    }
    @include e(td) {
      padding: 10px 10px 10px 16px;
    }
  }
  @include m(large-size) {
    font-size: map-get($--n-font-size, 'large');
    @include e(th) {
      padding: 15px 15px 15px 20px;
    }
    @include e(td) {
      padding: 15px 15px 15px 20px;
    }
  }
}

@include themes-mixin {
  @include b(table) {
    @include once {
      @include table-size-mixin;
      line-height: 1.75;
      font-size: 14px;
      width: 100%;
      border-radius: $--n-popover-border-radius $--n-popover-border-radius 0 0;
      text-align: left;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier,
        color .3s $--n-ease-in-out-cubic-bezier;
    }
    background-color: map-get($--table-body-background-color, 'default');
    @include e(th) {
      @include once {
        background-clip: padding-box;
        white-space: nowrap;
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        text-align: inherit;
        padding: 14px 12px;
        vertical-align: inherit;
        text-transform: none;
        border: none;
        font-weight: $--n-strong-weight;
      }
      color: $--table-header-text-color;
      background-color: $--table-header-background-color;
      border-color: $--table-border-color;
      border-bottom: 1px solid $--table-border-color;
      border-right: 1px solid $--table-border-color;
      &:last-child {
        border-right: none;
      }
    }
    @include e(td) {
      @include once {
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        padding: 12px;
      }
      color: $--table-body-text-color;
      background-color: map-get($--table-body-background-color, 'default');
      border-right: 1px solid $--table-border-color;
      border-bottom: 1px solid $--table-border-color;
      &:last-child {
        border-right: none;
      }
    }
    @include m(bordered) {
      border: 1px solid $--table-border-color;
      border-radius: $--n-popover-border-radius;
      @include e(tr) {
        &:last-child {
          @include e(td) {
            border-bottom: none;
          }
        }
      }
    }
    @include m(single-line) {
      @include e(th) {
        border-right: none;
      }
      @include e(td) {
        border-right: none;
      }
    }
    @include m(single-column) {
      @include e(td) {
        border-bottom: none;
      }
    }
  }
  @include as-modal-content {
    @include b(table) {
      background-color: map-get($--table-body-background-color, 'modal');
      @include e(td) {
        background-color: map-get($--table-body-background-color, 'modal');
      }
    }
  }
}