@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/table/mixin.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/table/mixin.scss

@@ -0,0 +1,10 @@
+@mixin genResizing() {
+    border-right: $border-table_resizer;
+
+    .react-resizable-handle {
+
+        &:hover {
+            background-color: unset;
+        }
+    }
+}

package/lib/cjs/table/operationPanel.scss

@@ -0,0 +1,46 @@
+// table 操作区域样式
+// 包括按钮插槽，翻页组件等
+
+// @import '../theme/variables.scss';
+// @import './variables.scss';
+
+$module: #{$prefix}-table;
+
+.#{$module}-panel {
+
+    &-operation {
+        background-color: $color-table_panel-bg-default;
+        padding-left: $spacing-table_panel_operation-paddingX;
+        padding-right: $spacing-table_panel_operation-paddingX;
+        padding-top: $spacing-table_panel_operation-paddingY;
+        padding-bottom: $spacing-table_panel_operation-paddingY;
+        display: flex;
+        justify-content: space-between;
+        color: $color-table_page-text-default;
+
+        &-right,
+        &-left {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-selected {
+            color: $color-table_panel-text-default;
+        }
+    }
+}
+
+.#{$module}-pagination {
+
+    &-info {
+        @include font-size-regular;
+        // color: $color-text-secondary;
+        font-weight: $font-weight-regular;
+    }
+
+    &-outer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}

package/lib/cjs/table/rtl.scss

@@ -0,0 +1,158 @@
+$module: #{$prefix}-table;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        text-align: right;
+
+        &-thead {
+            & > .#{$module}-row {
+                & > .#{$module}-row-head {
+                    text-align: right;
+
+                    &.#{$module}-cell-fixed {
+
+                        &-left-last {
+                            border-right: 0;
+                            border-left: 1px solid $color-table_shadow-border-default;
+
+                            &.resizing {
+                                // rtl override mixin
+                                border-left: $border-table_resizer;
+                            }
+                        }
+
+                        &-right-first {
+                            border-left: 0;
+                            border-right: 1px solid $color-table_shadow-border-default;
+
+                            &.resizing {
+                                border-left: $border-table_resizer;
+                            }
+
+                            &[x-type="column-scrollbar"] {
+                                box-shadow: none;
+                                border-right: transparent;
+                            }
+                        }
+                    }
+                }
+
+                .resizing {
+                    border-left: $border-table_resizer;
+                }
+
+                .react-resizable-handle {
+                    right: auto;
+                    left: $spacing-table_react_resizable_handle-right;
+                }
+            }
+        }
+
+        &-tbody {
+            display: table-row-group;
+            & > .#{$module}-row {
+                & > .#{$module}-row-cell {
+
+                    &.resizing {
+                        border-right: 0;
+                        border-left: $border-table_resizer;
+                    }
+                }
+
+                & > .#{$module}-cell-fixed {
+
+                    &-left-last {
+                        border-right: 0;
+                        border-left: $width-table_cell_fixed_left_last solid $color-table_shadow-border-default;
+                    }
+
+                    &-right-first {
+                        border-left: 0;
+                        border-right: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
+                    }
+                }
+            }
+        }
+
+        .#{$module}-column {
+
+            &-selection {
+                .#{$prefix}-checkbox-inner-display {
+                    .#{$prefix}-icon {
+                        left: auto;
+                        right: 0;
+                    }
+                }
+            }
+
+            &-expand {
+                .#{$module}-expand-icon {
+                    transform: scaleX(-1) translateY(2px);
+
+                    &:last-child {
+                        margin-right: auto;
+                        margin-left: 0;
+                    }
+                }
+            }
+
+            &-sorter {
+                margin-left: auto;
+                margin-right: $spacing-table_column_sorter-marginLeft;
+            }
+
+            &-filter {
+                margin-left: auto;
+                margin-right: $spacing-table_column_filter-marginLeft;
+            }
+        }
+
+        &-bordered {
+            .#{$module}-container {
+                border-left: 0;
+                border-right: $border-table;
+            }
+
+            .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: 0;
+                border-left: $border-table;
+            }
+
+            .#{$module}-placeholder {
+                border-left: $border-table;
+                border-right: 0;
+            }
+
+            .#{$module}-header {
+
+                &::-webkit-scrollbar {
+                    border-right: 0;
+                    border-left: $border-table;
+                }
+            }
+        }
+
+        &-fixed {
+            & > .#{$module}-tbody {
+                & > .#{$module}-row-expand > .#{$module}-row-cell > .#{$module}-expand-inner,
+                & > .#{$module}-row-section > .#{$module}-row-cell > .#{$module}-section-inner {
+                    left: auto;
+                    right: 0;
+                    margin-right: -$spacing-table_expand_row-paddingLeft;
+                    margin-left: -$spacing-table_expand_row-paddingRight;
+                    padding-right: $spacing-table_expand_row-paddingLeft;
+                    padding-left: $spacing-table_expand_row-paddingRight;
+                }
+            }
+        }
+    }
+
+    .#{$module}-expand-icon {
+        margin-right: auto;
+        margin-left: $spacing-table_expand_icon-marginRight;
+        transform: scaleX(-1) translateY(2px);
+    }
+}