@sdata/web-vue 1.6.0 → 1.7.0

package/es/table/style/index.scss

@@ -0,0 +1,973 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@style/mixins/index.scss' as *;
+@use '@components/table/style/token.scss' as *;
+@use '@components/table/style/filters-popup.scss' as *;
+
+$table-prefix-cls: string.unquote('#{theme.$prefix}-table');
+
+$table-cls-table: string.unquote('#{$table-prefix-cls}-element');
+$table-cls-tr: string.unquote('#{$table-prefix-cls}-tr');
+$table-cls-th: string.unquote('#{$table-prefix-cls}-th');
+$table-cls-td: string.unquote('#{$table-prefix-cls}-td');
+
+$__less-vars: (
+  'color-primary-6': global.$color-primary-6,
+  'line-height-base': theme.$line-height-base,
+  'prefix': theme.$prefix,
+  'sd-theme-tag': global.$sd-theme-tag,
+  'table-border-expand-icon-width': $table-border-expand-icon-width,
+  'table-border-radius': $table-border-radius,
+  'table-border-radius-expand-button': $table-border-radius-expand-button,
+  'table-border-style': $table-border-style,
+  'table-border-width': $table-border-width,
+  'table-color-bg-body-cell': $table-color-bg-body-cell,
+  'table-color-bg-body-row_active': $table-color-bg-body-row_active,
+  'table-color-bg-body-row_active_dark': $table-color-bg-body-row_active_dark,
+  'table-color-bg-body-row_hover': $table-color-bg-body-row_hover,
+  'table-color-bg-body-sorted-cell': $table-color-bg-body-sorted-cell,
+  'table-color-bg-body-stripe-row': $table-color-bg-body-stripe-row,
+  'table-color-bg-expand-content': $table-color-bg-expand-content,
+  'table-color-bg-expand-content_hover': $table-color-bg-expand-content_hover,
+  'table-color-bg-expand-icon': $table-color-bg-expand-icon,
+  'table-color-bg-expand-icon_hover': $table-color-bg-expand-icon_hover,
+  'table-color-bg-header-cell': $table-color-bg-header-cell,
+  'table-color-bg-header-filters-icon_hover': $table-color-bg-header-filters-icon_hover,
+  'table-color-bg-header-sorted-cell': $table-color-bg-header-sorted-cell,
+  'table-color-bg-header-sorted-cell_hover': $table-color-bg-header-sorted-cell_hover,
+  'table-color-bg-tfoot': $table-color-bg-tfoot,
+  'table-color-body-background': $table-color-body-background,
+  'table-color-border': $table-color-border,
+  'table-color-border_resizing': $table-color-border_resizing,
+  'table-color-editable-body-cell-border': $table-color-editable-body-cell-border,
+  'table-color-expand-icon': $table-color-expand-icon,
+  'table-color-expand-icon-border': $table-color-expand-icon-border,
+  'table-color-expand-icon-border_hover': $table-color-expand-icon-border_hover,
+  'table-color-expand-icon_hover': $table-color-expand-icon_hover,
+  'table-color-header-filters-icon': $table-color-header-filters-icon,
+  'table-color-header-filters-icon_active': $table-color-header-filters-icon_active,
+  'table-color-header-sorter-icon': $table-color-header-sorter-icon,
+  'table-color-header-sorter-icon_active': $table-color-header-sorter-icon_active,
+  'table-color-header-sorter-icon_next': $table-color-header-sorter-icon_next,
+  'table-color-text-body-cell': $table-color-text-body-cell,
+  'table-color-text-header-cell': $table-color-text-header-cell,
+  'table-filters-icon-bg_hover': $table-filters-icon-bg_hover,
+  'table-font-size-expand-button': $table-font-size-expand-button,
+  'table-font-size-filters-icon': $table-font-size-filters-icon,
+  'table-font-size-header-sorter-icon': $table-font-size-header-sorter-icon,
+  'table-font-weight-header-text': $table-font-weight-header-text,
+  'table-position-header-sorter-icon-down-top': $table-position-header-sorter-icon-down-top,
+  'table-position-header-sorter-icon-left': $table-position-header-sorter-icon-left,
+  'table-position-header-sorter-icon-up-top': $table-position-header-sorter-icon-up-top,
+  'table-shadow-left': $table-shadow-left,
+  'table-shadow-right': $table-shadow-right,
+  'table-size-body-min-width': $table-size-body-min-width,
+  'table-size-drag-handle-col-width': $table-size-drag-handle-col-width,
+  'table-size-expand-button': $table-size-expand-button,
+  'table-size-default-font-header-size': $table-size-default-font-header-size,
+  'table-size-default-font-size': $table-size-default-font-size,
+  'table-size-default-padding-horizontal': $table-size-default-padding-horizontal,
+  'table-size-default-padding-vertical': $table-size-default-padding-vertical,
+  'table-size-expand-icon-col-width': $table-size-expand-icon-col-width,
+  'table-size-filters-width': $table-size-filters-width,
+  'table-size-header-sorter-icon-height': $table-size-header-sorter-icon-height,
+  'table-size-header-sorter-icon-width': $table-size-header-sorter-icon-width,
+  'table-size-large-font-header-size': $table-size-large-font-header-size,
+  'table-size-large-font-size': $table-size-large-font-size,
+  'table-size-large-padding-horizontal': $table-size-large-padding-horizontal,
+  'table-size-large-padding-vertical': $table-size-large-padding-vertical,
+  'table-size-middle-font-header-size': $table-size-middle-font-header-size,
+  'table-size-middle-font-size': $table-size-middle-font-size,
+  'table-size-middle-padding-horizontal': $table-size-middle-padding-horizontal,
+  'table-size-middle-padding-vertical': $table-size-middle-padding-vertical,
+  'table-size-medium-font-header-size': $table-size-medium-font-header-size,
+  'table-size-medium-font-size': $table-size-medium-font-size,
+  'table-size-medium-padding-horizontal': $table-size-medium-padding-horizontal,
+  'table-size-medium-padding-vertical': $table-size-medium-padding-vertical,
+  'table-size-mini-font-header-size': $table-size-mini-font-header-size,
+  'table-size-mini-font-size': $table-size-mini-font-size,
+  'table-size-mini-padding-horizontal': $table-size-mini-padding-horizontal,
+  'table-size-mini-padding-vertical': $table-size-mini-padding-vertical,
+  'table-size-selection-col-width': $table-size-selection-col-width,
+  'table-size-small-font-header-size': $table-size-small-font-header-size,
+  'table-size-small-font-size': $table-size-small-font-size,
+  'table-size-small-padding-horizontal': $table-size-small-padding-horizontal,
+  'table-size-small-padding-vertical': $table-size-small-padding-vertical,
+  'table-size-shadow-wrapper-width': $table-size-shadow-wrapper-width,
+  'table-spacing-expand-button-margin-right': $table-spacing-expand-button-margin-right,
+  'table-spacing-header-sorter-icon-margin-left': $table-spacing-header-sorter-icon-margin-left,
+  'table-spacing-pagination-margin': $table-spacing-pagination-margin,
+  'transition-duration-1': theme.$transition-duration-1,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin expandBtn() {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $table-size-expand-button;
+  height: $table-size-expand-button;
+  padding: 0;
+  color: $table-color-expand-icon;
+  font-size: $table-font-size-expand-button;
+  line-height: $table-size-expand-button;
+  background-color: $table-color-bg-expand-icon;
+  border: $table-border-expand-icon-width solid $table-color-expand-icon-border;
+  border-radius: $table-border-radius-expand-button;
+  outline: none;
+  cursor: pointer;
+  transition: background-color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+  &:hover {
+    color: $table-color-expand-icon_hover;
+    background-color: $table-color-bg-expand-icon_hover;
+    border-color: $table-color-expand-icon-border_hover;
+  }
+}
+
+@mixin table-size($size) {
+  .#{$table-prefix-cls}-cell {
+    padding: less-var('table-size-#{$size}-padding-vertical')
+      less-var('table-size-#{$size}-padding-horizontal');
+  }
+
+  //.#{$table-prefix-cls}-col-has-sorter .#{$table-prefix-cls}-cell-with-sorter {
+  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //  cursor: pointer;
+  //}
+
+  //.#{$table-cls-td} {
+  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //}
+
+  .#{$table-cls-th} {
+    font-size: less-var('table-size-#{$size}-font-header-size');
+  }
+
+  .#{$table-cls-td} {
+    font-size: less-var('table-size-#{$size}-font-size');
+  }
+
+  $table-size-padding-vertical: less-var('table-size-#{$size}-padding-vertical');
+  $table-size-padding-horizontal: less-var('table-size-#{$size}-padding-horizontal');
+
+  .#{$table-prefix-cls}-footer {
+    padding: $table-size-padding-vertical $table-size-padding-horizontal;
+  }
+
+  // sub table
+  .#{$table-prefix-cls}-tr-expand .#{$table-cls-td} .#{$table-prefix-cls} {
+    margin: calc(-1 * #{$table-size-padding-vertical}) calc(-1 * #{$table-size-padding-horizontal})
+      calc(-1 * (#{$table-size-padding-vertical} + #{$table-border-width}))
+      calc(-1 * #{$table-size-padding-horizontal});
+  }
+
+  // editor row
+  .#{$table-prefix-cls}-editable-row {
+    .#{$table-prefix-cls}-cell-wrap-value {
+      padding: $table-size-padding-vertical $table-size-padding-horizontal;
+    }
+  }
+}
+
+.#{$table-prefix-cls} {
+  position: relative;
+
+  &-column-handle {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    z-index: 1;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  // spin
+  .#{theme.$prefix}-spin {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  // ???
+  > .#{theme.$prefix}-spin > .#{theme.$prefix}-spin-children::after {
+    z-index: 2;
+  }
+
+  // footer
+  &-footer {
+    border-radius: 0 0 $table-border-radius $table-border-radius;
+  }
+
+  // box-shadow of the fixed column on the left
+  &-scroll-position-right &-col-fixed-left-last::after,
+  &-scroll-position-middle &-col-fixed-left-last::after {
+    box-shadow: $table-shadow-left;
+  }
+
+  // box-shadow of the fixed column on the right
+  &-scroll-position-left &-col-fixed-right-first::after,
+  &-scroll-position-middle &-col-fixed-right-first::after {
+    box-shadow: $table-shadow-right;
+  }
+
+  &-layout-fixed {
+    .#{$table-cls-table} {
+      table-layout: fixed;
+    }
+  }
+
+  .#{$table-cls-table} {
+    width: 100%;
+    min-width: 100%;
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  &-th {
+    position: relative;
+    box-sizing: border-box;
+    color: $table-color-text-header-cell;
+    font-weight: $table-font-weight-header-text;
+    line-height: theme.$line-height-base;
+    text-align: left;
+    background-color: $table-color-bg-header-cell;
+
+    &[colspan] {
+      text-align: center;
+    }
+
+    &-align-right {
+      text-align: right;
+
+      .#{$table-prefix-cls}-cell-with-sorter {
+        justify-content: flex-end;
+      }
+    }
+
+    &-align-center {
+      text-align: center;
+
+      .#{$table-prefix-cls}-cell-with-sorter {
+        justify-content: center;
+      }
+    }
+  }
+
+  &-td {
+    box-sizing: border-box;
+    color: $table-color-text-body-cell;
+    line-height: theme.$line-height-base;
+    text-align: left;
+    word-break: break-all;
+    background-color: $table-color-bg-body-cell;
+    border-bottom: $table-border-width $table-border-style $table-color-border;
+
+    &-align-right {
+      text-align: right;
+    }
+
+    &-align-center {
+      text-align: center;
+    }
+
+    &.#{$table-prefix-cls}-drag-handle {
+      cursor: move;
+    }
+  }
+
+  &-cell {
+    display: flex;
+    align-items: center;
+
+    &-align-right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+
+    &-align-center {
+      justify-content: center;
+      text-align: center;
+    }
+  }
+
+  &-text-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-td-content {
+    display: block;
+    width: 100%;
+  }
+
+  .#{$table-cls-th}#{&}-col-sorted {
+    background-color: $table-color-bg-header-sorted-cell;
+  }
+
+  .#{$table-cls-td}#{&}-col-sorted {
+    background-color: $table-color-bg-body-sorted-cell;
+  }
+
+  &-col-fixed-left,
+  &-col-fixed-right {
+    position: sticky;
+    z-index: 10;
+  }
+
+  &-col-fixed-left-last::after,
+  &-col-fixed-right-first::after {
+    position: absolute;
+    top: 0;
+    bottom: -$table-border-width;
+    left: 0;
+    width: $table-size-shadow-wrapper-width;
+    box-shadow: none;
+    transform: translateX(-100%);
+    transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    content: '';
+    pointer-events: none;
+  }
+
+  // ????
+  &-col-fixed-left-last::after {
+    right: 0;
+    left: unset;
+    transform: translateX(100%);
+  }
+
+  &-cell-text-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // useless
+  &-editable-row {
+    .#{$table-prefix-cls}-cell-wrap-value {
+      border: $table-border-width solid $table-color-editable-body-cell-border;
+      border-radius: $table-border-radius;
+      cursor: pointer;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    &:hover {
+      .#{$table-prefix-cls}-cell-wrap-value {
+        border: $table-border-width solid $table-color-border;
+      }
+    }
+  }
+
+  //&-cell {
+  //  word-break: break-all;
+  //}
+
+  // Expand
+  .#{$table-prefix-cls}-expand-btn {
+    @include expandBtn();
+  }
+
+  &-cell-expand-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  &-cell-expand-icon &-cell-inline-icon {
+    display: inline-flex;
+    margin-right: $table-spacing-expand-button-margin-right;
+
+    .#{theme.$prefix}-icon-loading {
+      color: global.$color-primary-6;
+    }
+  }
+
+  &-cell-expand-icon-hidden {
+    display: inline-block;
+    width: $table-size-expand-button;
+    height: $table-size-expand-button;
+    margin-right: $table-spacing-expand-button-margin-right;
+  }
+
+  &-tr-expand .#{$table-cls-td} {
+    background-color: $table-color-bg-expand-content;
+  }
+
+  &-cell-fixed-expand {
+    position: sticky;
+    left: 0;
+    box-sizing: border-box;
+  }
+
+  &-tr-expand .#{$table-cls-td} & {
+    .#{$table-prefix-cls}-container {
+      border: none;
+    }
+
+    .#{$table-cls-th} {
+      border-bottom: $table-border-width $table-border-style $table-color-border;
+    }
+
+    .#{$table-cls-th},
+    .#{$table-cls-td} {
+      background-color: transparent;
+    }
+
+    .#{$table-prefix-cls}-pagination {
+      margin-bottom: $table-spacing-pagination-margin;
+    }
+  }
+
+  // Selection
+  //& &-th&-operation &-th-item,
+  //& &-td&-operation {
+  //  padding-right: $table-spacing-selection-padding-horizontal;
+  //  padding-left: $table-spacing-selection-padding-horizontal;
+  //}
+  &-th#{&}-operation,
+  &-td#{&}-operation {
+    text-align: center;
+  }
+
+  &-th#{&}-operation &-cell,
+  &-td#{&}-operation &-cell {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+  }
+
+  &-radio,
+  &-checkbox {
+    justify-content: center;
+  }
+
+  &-checkbox .#{theme.$prefix}-checkbox,
+  &-radio .#{theme.$prefix}-radio {
+    padding-left: 0;
+  }
+
+  // colgroup selection
+  &-selection-checkbox-col,
+  &-selection-radio-col {
+    @include fixed-width($table-size-selection-col-width);
+  }
+
+  &-expand-col {
+    @include fixed-width($table-size-expand-icon-col-width);
+  }
+
+  &-drag-handle-col {
+    @include fixed-width($table-size-drag-handle-col-width);
+  }
+
+  &-th {
+    transition: background-color theme.$transition-duration-1
+      theme.$transition-timing-function-linear;
+  }
+
+  &-cell-with-sorter {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $table-color-bg-header-sorted-cell_hover;
+    }
+  }
+
+  &-cell-with-filter {
+    display: flex;
+    align-items: center;
+  }
+
+  &-cell-next-ascend &-sorter-icon {
+    .#{theme.$prefix}-icon-caret-up {
+      color: $table-color-header-sorter-icon_next;
+    }
+  }
+
+  &-cell-next-descend &-sorter-icon {
+    .#{theme.$prefix}-icon-caret-down {
+      color: $table-color-header-sorter-icon_next;
+    }
+  }
+
+  &-sorter {
+    display: inline-block;
+    margin-left: $table-spacing-header-sorter-icon-margin-left;
+    vertical-align: -3px;
+  }
+
+  &-sorter#{&}-sorter-direction-one {
+    vertical-align: 0;
+  }
+
+  &-sorter-icon {
+    position: relative;
+    width: $table-size-header-sorter-icon-width;
+    height: $table-size-header-sorter-icon-height;
+    overflow: hidden;
+    line-height: $table-size-header-sorter-icon-height;
+
+    .#{theme.$prefix}-icon-caret-up,
+    .#{theme.$prefix}-icon-caret-down {
+      position: absolute;
+      top: 50%;
+      color: $table-color-header-sorter-icon;
+      font-size: $table-font-size-header-sorter-icon;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    .#{theme.$prefix}-icon-caret-up {
+      top: $table-position-header-sorter-icon-up-top;
+      left: $table-position-header-sorter-icon-left;
+    }
+
+    .#{theme.$prefix}-icon-caret-down {
+      top: $table-position-header-sorter-icon-down-top;
+      left: $table-position-header-sorter-icon-left;
+    }
+
+    &#{&}-active {
+      svg {
+        color: $table-color-header-sorter-icon_active;
+      }
+    }
+  }
+
+  &-filters {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $table-size-filters-width;
+    height: 100%;
+    line-height: 1;
+    vertical-align: 0;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+    &:hover,
+    &-open {
+      background-color: $table-color-bg-header-filters-icon_hover;
+    }
+
+    svg {
+      color: $table-color-header-filters-icon;
+      font-size: $table-font-size-filters-icon;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    &-active {
+      svg {
+        color: $table-color-header-filters-icon_active;
+      }
+    }
+
+    &-align-left {
+      position: relative;
+      width: auto;
+      margin-left: $table-spacing-header-sorter-icon-margin-left;
+
+      svg {
+        font-size: $table-font-size-header-sorter-icon;
+      }
+
+      &:hover,
+      &-open {
+        background: none;
+      }
+
+      &:hover::before,
+      &.#{$table-prefix-cls}-filters-open::before {
+        background: $table-filters-icon-bg_hover;
+      }
+    }
+  }
+
+  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
+  &-container {
+    position: relative;
+    border-radius: $table-border-radius $table-border-radius 0 0;
+  }
+
+  &-header {
+    flex-shrink: 0;
+    border-radius: $table-border-radius $table-border-radius 0 0;
+  }
+
+  &-container {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 0;
+
+    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors==0010
+    // border-radius: $table-border-radius $table-border-radius 0 0 0;
+
+    .#{$table-prefix-cls}-content {
+      display: flex;
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+
+      &-scroll-x {
+        overflow: auto hidden;
+      }
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      //top: -$table-border-width;
+      //bottom: -$table-border-width;
+      z-index: 1;
+      width: $table-size-shadow-wrapper-width;
+      height: 100%;
+      box-shadow: none;
+      transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      top: 0;
+      left: 0;
+      border-top-left-radius: $table-border-radius;
+    }
+
+    &::after {
+      top: 0;
+      right: 0;
+      border-top-right-radius: $table-border-radius;
+    }
+
+    // box-shadow on the left side of the scroll table
+    &:not(.#{$table-prefix-cls}-has-fixed-col-left) {
+      &.#{$table-prefix-cls}-scroll-position-right::before,
+      &.#{$table-prefix-cls}-scroll-position-middle::before {
+        box-shadow: $table-shadow-left;
+      }
+    }
+
+    // box-shadow on the right side of the scroll table
+    &:not(.#{$table-prefix-cls}-has-fixed-col-right) {
+      &.#{$table-prefix-cls}-scroll-position-left::after,
+      &.#{$table-prefix-cls}-scroll-position-middle::after {
+        box-shadow: $table-shadow-right;
+      }
+    }
+  }
+
+  &-header {
+    overflow: hidden;
+    background-color: $table-color-bg-header-cell;
+    scrollbar-color: transparent transparent;
+
+    &-sticky {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+  }
+
+  &:not(#{&}-empty) &-header::-webkit-scrollbar {
+    // 仅隐藏横向滚动条
+    height: 0;
+    background-color: transparent;
+  }
+
+  &#{&}-empty &-header {
+    overflow-x: auto;
+  }
+
+  &-body {
+    position: relative;
+    width: 100%;
+    min-height: $table-size-body-min-width;
+    overflow: auto;
+    background-color: $table-color-body-background;
+  }
+
+  &-border {
+    .#{$table-prefix-cls}-container {
+      border-top: $table-border-width $table-border-style $table-color-border;
+      border-left: $table-border-width $table-border-style $table-color-border;
+
+      // ??用处
+      //&::before {
+      //  position: absolute;
+      //  bottom: 0;
+      //  left: 0;
+      //  z-index: 2;
+      //  width: 100%;
+      //  height: $table-border-width;
+      //  background-color: $table-color-border;
+      //  content: '';
+      //}
+    }
+
+    .#{$table-prefix-cls}-scroll-y {
+      border-bottom: $table-border-width $table-border-style $table-color-border;
+
+      .#{$table-prefix-cls}-body .#{$table-cls-tr}:last-of-type .#{$table-cls-td},
+      tfoot .#{$table-cls-tr}:last-of-type .#{$table-cls-td} {
+        border-bottom: none;
+
+        &.#{$table-prefix-cls}-col-fixed-left-last::after,
+        &.#{$table-prefix-cls}-col-fixed-right-first::after {
+          bottom: 0;
+        }
+      }
+    }
+
+    .#{$table-cls-tr} .#{$table-cls-th} {
+      border-bottom: $table-border-width $table-border-style $table-color-border;
+    }
+
+    //.#{$table-prefix-cls}-tr-expand .#{$table-prefix-cls}-cell-fixed-expand {
+    //  border-left: $table-border-width $table-border-style $table-color-border;
+    //}
+
+    .#{$table-prefix-cls}-footer {
+      border: $table-border-width $table-border-style $table-color-border;
+      border-top: 0;
+    }
+  }
+
+  &-border:not(#{&}-border-cell) {
+    .#{$table-prefix-cls}-container {
+      border-right: $table-border-width $table-border-style $table-color-border;
+    }
+
+    //.#{$table-cls-tr} .#{$table-cls-th}[colspan] {
+    //  border-bottom: none;
+    //}
+    //
+    //.#{$table-prefix-cls}-tr-expand .#{$table-prefix-cls}-cell-fixed-expand {
+    //  border-left: none;
+    //}
+  }
+
+  &-border-cell {
+    .#{$table-cls-th},
+    .#{$table-cls-td}:not(.#{$table-prefix-cls}-tr-expand) {
+      border-right: $table-border-width $table-border-style $table-color-border;
+    }
+
+    .#{$table-cls-th}-resizing,
+    .#{$table-cls-td}-resizing:not(.#{$table-prefix-cls}-tr-expand) {
+      border-right-color: $table-color-border_resizing;
+    }
+  }
+
+  &-border-header-cell {
+    .#{$table-cls-th} {
+      border-right: $table-border-width $table-border-style $table-color-border;
+      border-bottom: $table-border-width $table-border-style $table-color-border;
+    }
+    .#{$table-cls-th}-resizing,
+    .#{$table-cls-td}-resizing:not(.#{$table-prefix-cls}-tr-expand) {
+      border-right-color: $table-color-border_resizing;
+    }
+  }
+
+  &-border#{&}-border-header-cell {
+    thead {
+      .#{$table-cls-tr}:first-child .#{$table-cls-th}:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+  &-border-body-cell {
+    .#{$table-cls-td}:not(:last-child):not(.#{$table-prefix-cls}-tr-expand) {
+      border-right: $table-border-width $table-border-style $table-color-border;
+    }
+  }
+
+  // stripe: true
+  &-stripe {
+    &:not(.#{$table-prefix-cls}-dragging)
+      .#{$table-cls-tr}:not(.#{$table-prefix-cls}-tr-empty):not(
+        .#{$table-prefix-cls}-tr-summary
+      ):nth-child(even),
+    .#{$table-cls-tr}-drag {
+      .#{$table-cls-td}:not(.#{$table-prefix-cls}-col-fixed-left):not(
+          .#{$table-prefix-cls}-col-fixed-right
+        ) {
+        background-color: $table-color-bg-body-stripe-row;
+      }
+
+      .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-left,
+      .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-right {
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          background-color: $table-color-bg-body-stripe-row;
+          content: '';
+        }
+      }
+    }
+  }
+
+  & .#{$table-cls-tr}-draggable {
+    cursor: move;
+  }
+
+  &-hover {
+    &:not(.#{$table-prefix-cls}-dragging)
+      .#{$table-cls-tr}:not(.#{$table-prefix-cls}-tr-empty):not(
+        .#{$table-prefix-cls}-tr-summary
+      ):hover,
+    .#{$table-cls-tr}-drag {
+      .#{$table-cls-td}:not(.#{$table-prefix-cls}-col-fixed-left):not(
+          .#{$table-prefix-cls}-col-fixed-right
+        ) {
+        background-color: $table-color-bg-body-row_hover;
+      }
+
+      .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-left,
+      .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-right {
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          background-color: $table-color-bg-body-row_hover;
+          content: '';
+        }
+      }
+    }
+
+    .#{$table-cls-tr}-expand:not(.#{$table-prefix-cls}-tr-empty):hover {
+      .#{$table-cls-td}:not(.#{$table-prefix-cls}-col-fixed-left):not(
+          .#{$table-prefix-cls}-col-fixed-right
+        ) {
+        background-color: $table-color-bg-expand-content_hover;
+      }
+    }
+
+    // 去除嵌套子表格的 hover 效果
+    .#{$table-prefix-cls}-tr-expand .#{$table-cls-td} & {
+      .#{$table-cls-tr}:not(.#{$table-prefix-cls}-tr-empty) {
+        .#{$table-cls-td}:not(.#{$table-prefix-cls}-col-fixed-left):not(
+            .#{$table-prefix-cls}-col-fixed-right
+          ) {
+          background-color: transparent;
+        }
+
+        .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-left,
+        .#{$table-cls-td}.#{$table-prefix-cls}-col-fixed-right {
+          &::before {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  &-tfoot {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+    width: 100%;
+    overflow-x: auto;
+    background-color: $table-color-bg-tfoot;
+    box-shadow: 0 (-$table-border-width) 0 $table-color-border;
+    scrollbar-color: transparent transparent;
+
+    &::-webkit-scrollbar {
+      height: 0;
+      background-color: transparent;
+    }
+  }
+
+  & tfoot &-td {
+    background-color: $table-color-bg-tfoot;
+  }
+
+  // Active row
+  &-tr-checked .#{$table-cls-td} {
+    background-color: $table-color-bg-body-row_active;
+  }
+
+  // Size
+  @include table-size(large);
+
+  &-size-medium {
+    @include table-size(medium);
+  }
+
+  &-size-small {
+    @include table-size(small);
+  }
+
+  &-size-mini {
+    @include table-size(mini);
+  }
+
+  // virtualized
+  &-virtualized .#{$table-cls-table} {
+    table-layout: fixed;
+  }
+
+  &-virtualized div#{&}-body div#{&}-tr {
+    display: flex;
+  }
+
+  &-virtualized div#{&}-body div#{&}-td {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+}
+
+.#{$table-prefix-cls}-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: $table-spacing-pagination-margin;
+
+  &-left {
+    justify-content: flex-start;
+  }
+
+  &-center {
+    justify-content: center;
+  }
+
+  &-top {
+    margin-top: 0;
+    margin-bottom: $table-spacing-pagination-margin;
+  }
+}
+
+.#{theme.$prefix}-virtual-list {
+  & > .#{$table-prefix-cls}-element {
+    width: auto;
+  }
+}
+
+#{global.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$table-prefix-cls}-tr-checked .#{$table-cls-td} {
+    background-color: $table-color-bg-body-row_active_dark;
+  }
+}