@koi-design/uxd-ui 14.0.4 → 14.0.6

package/styles/components/table/index.less

@@ -11,7 +11,7 @@
 
   position: relative;
   clear: both;
-  background: var(--table-background-color);
+  background: var(--color-background);
 
   &-body {
     transition: opacity var(--animation-time);
@@ -34,12 +34,14 @@
 
   &-thead > tr {
     > th {
+      padding: var(--table-header-padding);
       color: var(--table-header-color);
       font-weight: var(--table-header-font-weight);
       text-align: left;
       background: var(--table-header-background);
       transition: background 0.3s ease;
-      box-shadow: var(--table-row-box-shadow);
+      height: var(--table-header-height);
+      border-bottom: 1px solid var(--table-border-color);
 
       &[colspan]:not([colspan='1']) {
         text-align: center;
@@ -47,15 +49,20 @@
     }
   }
 
-  // &-thead > tr:not(:last-child) > th {
-  //   &[colspan] {
-  //     border-bottom: 0;
-  //   }
-  // }
+  &-tbody > tr:not(:last-child) > td {
+    border-bottom: 1px solid var(--table-border-color);
+  }
 
   &-tbody > tr > td {
-    box-shadow: var(--table-row-box-shadow);
+    padding: var(--table-cell-padding);
+    line-height: var(--table-cell-line-height);
+    min-height: var(--table-cell-min-height);
+    overflow-wrap: break-word;
     transition: background 0.3s;
+
+    &:empty {
+      height: var(--table-cell-min-height);
+    }
   }
 
   tr {
@@ -72,18 +79,6 @@
     background: none;
   }
 
-  &-thead > tr > th,
-  &-tbody > tr > td {
-    padding: var(--table-padding-vertical) var(--table-padding-horizontal);
-    line-height: var(--table-line-height);
-    min-height: var(--table-row-min-height);
-    overflow-wrap: break-word;
-
-    &:empty {
-      height: var(--table-row-min-height);
-    }
-  }
-
   &-header {
     overflow: hidden;
     background: var(--table-header-background);
@@ -93,24 +88,25 @@
 
   &-row {
     &-expand-icon {
-      .operation-unit();
-
       display: inline-flex;
       justify-content: center;
-      width: var(--table-expand-icon-size);
-      height: var(--table-expand-icon-size);
+      align-items: center;
+      width: var(--icon-font-size);
+      height: var(--icon-font-size);
       line-height: 1;
-      color: inherit;
-      background: var(--table-background-color);
-      border: var(--border-width-base) var(--border-style-base) var(--color-border-split);
-      border-radius: var(--radius-1);
+      color: var(--icon-button-color);
+      background: var(--color-background);
+      border: 1px solid var(--icon-button-color);
+      border-radius: var(--radius-base);
       transition: all 0.3s;
       user-select: none;
+      cursor: pointer;
 
       &:focus,
       &:hover,
       &:active {
-        border-color: currentcolor;
+        color: var(--icon-button-hover-color);
+        border-color: var(--icon-button-hover-color);
       }
 
       &.@{table-prefix-cls}-row-expanded::after {
@@ -126,8 +122,8 @@
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: var(--table-expand-icon-size);
-      height: var(--table-expand-icon-size);
+      width: var(--icon-font-size);
+      height: var(--icon-font-size);
       color: inherit;
       line-height: 1;
       cursor: pointer;
@@ -177,33 +173,16 @@
 
   .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon,
   .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-custom-icon {
-    margin-right: var(--table-expand-icon-margin-right);
+    margin-right: var(--space-1);
   }
 
   tr&-summary-row {
     td {
-      background: var(--table-header-background);
+      background: var(--color-background-secondary);
     }
   }
 
   // ====================== scroll ========================
-  // &-scroll {
-  //   overflow: auto;
-  //   overflow-x: hidden;
-
-  //   table {
-  //     // min-width: 100%;
-  //     // https://github.com/ant-design/ant-design/issues/14545
-  //     // https://github.com/ant-design/ant-design/issues/19491
-  //     .@{table-prefix-cls}-fixed-columns-in-body:not([colspan]) {
-  //       visibility: hidden;
-  //       // color: transparent;
-  //       // & > * {
-  //       //   visibility: hidden;
-  //       // }
-  //     }
-  //   }
-  // }
 
   &-body-inner {
     height: 100%;
@@ -211,46 +190,18 @@
 
   &-fixed-header > &-content > &-scroll > &-body {
     position: relative;
-    background: var(--table-background-color);
+    background: var(--color-background);
   }
 
-  // &-fixed-header &-body-inner {
-  //   overflow: scroll;
-  // }
-
-  // &-fixed-header &-scroll &-header {
-  //   margin-bottom: -20px;
-  //   padding-bottom: 20px;
-  //   overflow: scroll;
-  //   // Workaround for additional scroll bar on the table header
-  //   // // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
-  //   //opacity: 0.9999;
-
-  //   &::-webkit-scrollbar {
-  //     border: 1px solid var(--color-border-split);
-  //     border-width: 0 0 1px;
-  //   }
-  // }
-
-  // &-hide-scrollbar {
-  //   scrollbar-color: transparent transparent;
-  //   min-width: unset;
-
-  //   &::-webkit-scrollbar {
-  //     min-width: inherit;
-  //     background-color: transparent;
-  //   }
-  // }
-
   //====================== placeholder =========================
   &-placeholder {
     position: relative;
     z-index: 1;
-    padding: var(--table-padding-vertical-large) var(--table-padding-horizontal-large);
+    padding: var(--table-cell-padding);
     color: var(--placeholder-color);
     font-size: var(--default-font-size);
     text-align: center;
-    background: var(--table-background-color);
+    background: var(--color-background);
   }
 
   &-radius {
@@ -280,50 +231,30 @@
   // ====================== surface =========================
 
   &-surface {
-    border: var(--border-width-base) var(--border-style-base) var(--table-border-color);
-
-    .@{table-prefix-cls}-tbody tr:last-child,
-    .@{table-prefix-cls}-tbody > tr:has(+ .@{table-prefix-cls}-expanded-row[style='display: none;']:last-child) {
-      --table-row-box-shadow: none;
-    }
-  }
-
-  // ====================== ghost =========================
-
-  &-ghost {
-    border: none;
-
-    .@{table-prefix-cls}-placeholder {
-      border-bottom: var(--border-width-base) var(--border-style-base) var(--color-border-split);
-    }
+    border: 1px solid var(--table-border-color);
   }
 
   // ====================== border =========================
 
   &-border {
-    border: var(--border-width-base) var(--border-style-base) var(--table-border-color);
+    border: 1px solid var(--table-border-color);
 
     .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-column-header-right),
     .@{table-prefix-cls}-tbody > tr > td:not(:last-child) {
-      box-shadow: var(--table-border-cell-box-shadow);
+      border-right: 1px solid var(--table-border-color);
     }
 
-    .@{table-prefix-cls}-tbody > tr:last-child > td:not(:last-child),
-    .@{table-prefix-cls}-tbody > tr:has(+ .@{table-prefix-cls}-expanded-row[style='display: none;']:last-child) > td:not(:last-child) {
-      --table-border-cell-box-shadow: -1px 0 0 0 var(--table-border-color) inset;
-    }
-
-    .@{table-prefix-cls}-tbody > tr:last-child > td:last-child,
-    .@{table-prefix-cls}-tbody > tr:has(+ .@{table-prefix-cls}-expanded-row[style='display: none;']:last-child) > td:last-child {
-      box-shadow: none;
-    }
+    // .@{table-prefix-cls}-tbody > tr:last-child > td:not(:last-child),
+    // .@{table-prefix-cls}-tbody > tr:has(+ .@{table-prefix-cls}-expanded-row[style='display: none;']:last-child) > td:not(:last-child) {
+    //   border-right: 1px solid var(--table-border-color);
+    // }
   }
 
   // ====================== fixed left&right =========================
 
   &-fixed-column {
     position: sticky;
-    background-color: var(--table-background-color);
+    background-color: var(--color-background);
     z-index: var(--zindex-table-fixed);
 
     &-left-last,
@@ -396,7 +327,6 @@
   &-selection {
     display: flex;
     align-items: center;
-    height: var(--table-line-height);
     justify-content: center;
 
     &-select-all-custom {
@@ -407,8 +337,8 @@
       min-width: 96px;
       margin-top: 5px;
       margin-left: -30px;
-      background: var(--table-background-color);
-      border-radius: var(--radius-base);
+      background: var(--color-background);
+      border-radius: var(--dropdown-border-radius);
       box-shadow: var(--dropdown-shadow);
 
       .@{css-prefix}-action-down {
@@ -421,11 +351,11 @@
       padding: 0;
       line-height: 1;
       cursor: pointer;
-      color: var(--table-header-icon-color);
+      color: var(--icon-button-color);
       transition: all 0.3s;
 
       &:hover {
-        color: var(--gray-a9);
+        color: var(--icon-button-hover-color);
       }
     }
   }
@@ -451,43 +381,34 @@
     &.@{table-prefix-cls}-column-has-filters {
       .@{table-prefix-cls}-filter-icon {
         position: absolute;
-        top: 0;
+        top: 50%;
         right: 0;
-        width: 28px;
-        height: 100%;
-        color: var(--table-header-icon-color);
+        transform: translateY(-50%);
+        width: var(--space-7);
+        height: var(--space-7);
+        color: var(--icon-button-color);
         font-size: var(--default-font-size);
+        border-radius: var(--radius-base);
         text-align: center;
         cursor: pointer;
         transition: all 0.3s;
 
         &.@{table-prefix-cls}-filter-open {
-          color: var(--gray-a9);
-          background: var(--table-header-filter-active-background);
+          color: var(--icon-button-hover-color);
+          background: var(--color-background-secondary);
+          // background: var(--table-header-filter-active-background);
         }
 
         .@{iconfont-css-prefix} {
           position: absolute;
           top: 0;
           left: 50%;
-          margin-left: calc(var(--default-font-size) / -2);
+          transform: translateX(-50%);
         }
-      }
-
-      .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix} {
-        color: var(--primary-color);
-      }
-
-      &:hover {
-        .@{table-prefix-cls}-filter-icon {
-          &:hover {
-            color: var(--gray-a9);
-            background: var(--table-header-filter-active-background);
-          }
 
-          &:active {
-            color: var(--gray-a11);
-          }
+        &:hover {
+          background: var(--color-background-secondary);
+          color: var(--icon-button-hover-color);
         }
       }
     }
@@ -497,11 +418,15 @@
       user-select: none;
 
       .@{table-prefix-cls}-column-sorters {
-        display: table;
+        display: flex;
+        align-items: center;
+        padding: var(--space-1) var(--space-1);
+        transform: translateX(calc(0px - var(--space-1)));
+        border-radius: var(--radius-base);
 
         > .@{table-prefix-cls}-column-title {
-          display: table-cell;
-          vertical-align: middle;
+          display: flex;
+          align-items: center;
         }
 
         > *:not(.@{table-prefix-cls}-column-sorter) {
@@ -509,28 +434,25 @@
         }
 
         .@{table-prefix-cls}-column-sorter {
-          display: table-cell;
-          vertical-align: middle;
+          display: flex;
+          align-items: center;
 
           .@{table-prefix-cls}-column-sorter-inner {
             height: 1em;
             line-height: 1em;
             margin-left: 2px;
-            color: var(--table-header-icon-color);
-            text-align: center;
+            color: var(--icon-button-color);
             transition: all 0.3s;
 
             .@{table-prefix-cls}-column-sorter-up,
             .@{table-prefix-cls}-column-sorter-down {
-              .iconfont-size-under-12px(11px);
-
               display: block;
               height: var(--default-font-size);
               line-height: var(--default-font-size);
               transition: all 0.3s;
 
               &.on {
-                color: var(--primary-color);
+                color: var(--default-font-color);
               }
             }
 
@@ -548,57 +470,48 @@
           }
         }
 
-        &::before {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-          left: 0;
-          background: transparent;
-          transition: all 0.3s;
-          content: '';
-        }
-
-        &:hover::before {
-          background: rgba(0, 0, 0, 4%);
+        &:hover {
+          background: var(--color-background-secondary);
         }
-      }
 
-      &:hover {
-        background: var(--table-header-sort-active-background);
-
-        .@{table-prefix-cls}-filter-icon {
-          background: var(--table-header-sort-active-background);
-        }
-      }
+        // &::before {
+        //   position: absolute;
+        //   top: 0;
+        //   right: 0;
+        //   bottom: 0;
+        //   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+        //   left: 0;
+        //   background: transparent;
+        //   transition: all 0.3s;
+        //   content: '';
+        // }
 
-      &:active {
-        .@{table-prefix-cls}-column-sorter-up:not(.on),
-        .@{table-prefix-cls}-column-sorter-down:not(.on) {
-          color: var(--gray-a9);
-        }
+        // &:hover::before {
+        //   background: rgba(0, 0, 0, 4%);
+        // }
       }
     }
   }
 
   &-thead > tr > th.@{table-prefix-cls}-column-sort {
-    background: var(--table-header-sort-background);
+    background: var(--color-background);
   }
 
   &-thead > tr > th &-column-tips-icon {
-    margin-left: var(--table-header-tips-margin);
+    margin-left: var(--space-1);
     cursor: pointer;
+    line-height: 1;
+    height: auto;
   }
 
   &-tbody > tr {
     > td.@{table-prefix-cls}-column-sort {
-      background: var(--table-body-sort-background);
+      background: var(--color-background);
     }
 
     &.@{table-prefix-cls}-row-hover {
       > td.@{table-prefix-cls}-column-sort {
-        background: var(--table-row-hover-background);
+        background: var(--color-background-secondary);
       }
     }
   }
@@ -608,6 +521,7 @@
     min-width: 96px;
     margin-left: -8px;
     background: var(--table-background-color);
+    border: 1px solid var(--color-border-split);
     border-radius: var(--radius-base);
     box-shadow: var(--dropdown-shadow);
 
@@ -638,7 +552,6 @@
         .@{css-prefix}-dropdown-menu-submenu-title::after {
           color: var(--primary-color);
           font-weight: bold;
-          text-shadow: 0 0 2px var(--primary-a11);
         }
       }
     }
@@ -655,20 +568,20 @@
     &-btns {
       padding: 8px;
       overflow: hidden;
-      border-top: var(--border-width-base) var(--border-style-base) var(--color-border-split);
       display: flex;
       justify-content: space-between;
     }
 
     &-link {
-      color: var(--link-color);
-
-      &:hover {
-        color: var(--link-hover-color);
-      }
+      color: var(--default-font-color);
+      padding: 0 var(--space-1-5);
+      border-radius: var(--radius-base);
 
+      &:hover,
       &:active {
-        color: var(--link-active-color);
+        background: var(--color-background-secondary);
+        color: var(--default-font-color);
+        text-decoration: none;
       }
     }
   }
@@ -716,72 +629,23 @@
   &-stripe {
     tbody > tr {
       &:nth-child(2n) {
-        background-color: var(--table-header-background);
+        background-color: var(--color-background-secondary);
 
         td {
-          background-color: var(--table-header-background);
+          background-color: var(--color-background-secondary);
         }
       }
     }
   }
 
-  .table-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @row-min-height) {
-    font-size: @font-size;
-
-    > .@{table-prefix-cls}-title,
-    > .@{table-prefix-cls}-footer {
-      padding: @padding-vertical @padding-horizontal;
-    }
-
-    .@{table-prefix-cls}-thead > tr > th,
-    .@{table-prefix-cls}-tbody > tr > td {
-      padding: @padding-vertical @padding-horizontal;
-      line-height: @line-height;
-      min-height: @row-min-height;
-
-      &:empty {
-        height: @row-min-height;
-      }
-    }
-
-    .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-has-actions.@{table-prefix-cls}-column-has-sorters {
-      .@{table-prefix-cls}-column-sorter {
-        .@{table-prefix-cls}-column-sorter-inner {
-          .@{table-prefix-cls}-column-sorter-up,
-          .@{table-prefix-cls}-column-sorter-down {
-            height: @font-size;
-            line-height: @font-size;
-          }
-
-          &-full {
-            .@{table-prefix-cls}-column-sorter-up,
-            .@{table-prefix-cls}-column-sorter-down {
-              height: calc(@font-size / 2);
-              display: flex;
-              align-items: center;
-            }
-          }
-        }
-      }
-    }
-
-    // tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
-    //   @inner-padding-horizontal: var(--table-padding-horizontal-large) / 2;
-
-    //   margin: calc((@padding-vertical * -1) - @inner-padding-horizontal) calc((@padding-vertical * -1) - 1px);
-    // }
-  }
-
   &.@{table-prefix-cls}-large {
-    .table-size(var(--table-padding-vertical-large), var(--table-padding-horizontal-large), var(--font-size-base), var(--table-line-height-large), var(--table-row-min-height-large));
-  }
-
-  &.@{table-prefix-cls}-default {
-    .table-size(var(--table-padding-vertical), var(--table-padding-horizontal), var(--default-font-size), var(--table-line-height), var(--table-row-min-height));
+    --table-cell-padding: var(--space-3) var(--space-2);
   }
 
   &.@{table-prefix-cls}-small {
-    .table-size(var(--table-padding-vertical-small), var(--table-padding-horizontal-small), var(--font-size-xs), var(--table-line-height-small), var(--table-row-min-height-small));
+    --table-cell-padding: var(--space-1) var(--space-2);
+
+    font-size: var(--font-size-xs);
   }
 
   &-row-skeleton-wrap {
@@ -827,11 +691,11 @@
 
   &-pagination {
     &-bottom {
-      margin-top: var(--table-pagination-margin-base);
+      margin-top: var(--space-2);
     }
 
     &-top {
-      margin-bottom: var(--table-pagination-margin-base);
+      margin-bottom: var(--space-2);
     }
 
     &-right {

package/styles/components/table/var.less

@@ -1,37 +1,22 @@
 .@{table-prefix-cls} {
   &-wrapper {
-    --table-background-color: var(--color-background);
-    --table-header-background: var(--gray-2);
+    //wrapper
     --table-border-color: var(--color-border-split);
-    --table-row-box-shadow: 0 -1px 0 0 var(--table-border-color) inset;
-    --table-border-cell-box-shadow: 0 -1px 0 0 var(--table-border-color) inset, -1px 0 0 0 var(--table-border-color) inset;
-    --table-expanded-row-background: var(--gray-1);
-    --table-body-sort-background: var(--gray-2);
-    --table-header-sort-background: var(--gray-3);
-    --table-header-sort-active-background: var(--gray-4);
-    --table-header-color: var(--gray-12);
-    --table-header-icon-color: var(--gray-8);
-    --table-header-filter-active-background: var(--gray-5);
+    --table-border-radius: var(--radius-md);
+    --table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 10%);
+    --table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 10%);
+    //head
+    --table-header-background: var(--color-background);
+    --table-header-color: var(--secondary-font-color);
     --table-header-font-weight: var(--font-weight-medium);
-    --table-header-tips-margin: var(--space-1);
-    --table-pagination-margin-base: var(--space-2);
-    --table-line-height: var(--line-heigh-normal);
-    --table-padding-vertical: 14px;
-    --table-padding-horizontal: var(--space-2);
-    --table-row-min-height: calc(var(--table-padding-vertical) * 2 + var(--table-line-height));
-    --table-line-height-large: var(--line-height-normal);
-    --table-padding-vertical-large: var(--space-4);
-    --table-padding-horizontal-large: var(--space-3);
-    --table-row-min-height-large: calc(var(--table-padding-vertical-large) * 2 + var(--table-line-height-large));
-    --table-line-height-small: var(--line-heigh-normal);
-    --table-padding-vertical-small: var(--space-3);
-    --table-padding-horizontal-small: var(--space-2);
-    --table-row-min-height-small: calc(var(--table-padding-vertical-small) * 2 + var(--table-line-height-small));
-    --table-expand-icon-margin-right: var(--space-2);
-    --table-expand-icon-size: 18px;
-    --table-fixed-left-shadow: inset 10px 0 8px -8px var(--gray-a6);
-    --table-fixed-right-shadow: inset -10px 0 8px -8px var(--gray-a6);
-    --table-row-hover-background-color: var(--primary-2);
-    --table-border-radius: var(--radius-base);
+    --table-header-height: var(--space-10);
+    --table-header-padding: 0 var(--space-2);
+    // row
+    --table-row-hover-background-color: var(--color-background-secondary);
+    --table-expanded-row-background: var(--color-background-secondary);
+    // cell
+    --table-cell-padding: var(--space-2) var(--space-2);
+    --table-cell-line-height: var(--space-5);
+    --table-cell-min-height: var(--space-9);
   }
 }