fix(module:table): fix table small size virtual scroll style (#3063)

close #3050
NG-ZORRO · Mar 11, 2019 · 4fa16de · 4fa16de
1 parent 97adb2c
commit 4fa16de
Showing 1 changed file with 73 additions and 27 deletions.
diff --git a/components/core/style/index.less b/components/core/style/index.less
@@ -66,104 +66,150 @@
   }
 }
 
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@table-td-cls: ~'@{table-prefix-cls}-td';
+@table-th-cls: ~'@{table-prefix-cls}-th';
+@table-th-left-cls: ~'@{table-th-cls}-left';
+@table-th-right-cls: ~'@{table-th-cls}-right';
+@table-td-left-cls: ~'@{table-td-cls}-left';
+@table-td-right-cls: ~'@{table-td-cls}-right';
+
 .box-shadow-left() {
-  .ant-table-th-right-sticky, .ant-table-td-right-sticky {
+  .@{table-th-right-cls}-sticky,
+  .@{table-td-right-cls}-sticky {
     box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
   }
 }
 
 .box-shadow-right() {
-  .ant-table-th-left-sticky, .ant-table-td-left-sticky {
+  .@{table-th-left-cls}-sticky,
+  .@{table-td-left-cls}-sticky {
     box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
   }
 }
 
 .border-left() {
-  .ant-table-th-right-sticky, .ant-table-td-right-sticky {
+  .@{table-th-right-cls}-sticky,
+  .@{table-td-right-cls}-sticky {
     border-right: @border-width-base @border-style-base @border-color-split;
   }
 }
 
 .border-right() {
-  .ant-table-th-left-sticky, .ant-table-td-left-sticky {
+  .@{table-th-left-cls}-sticky,
+  .@{table-td-left-cls}-sticky {
     border-left: @border-width-base @border-style-base @border-color-split;
   }
 }
 
-.ant-table-scroll-position-middle, .ant-table-scroll-position-left {
-  .ant-table-td-right-sticky + .ant-table-td-right-sticky {
+.@{table-prefix-cls}-scroll-position-middle,
+.@{table-prefix-cls}-scroll-position-left {
+  .@{table-td-right-cls}-sticky + .@{table-td-right-cls}-sticky {
     box-shadow: none;
   }
 
-  .ant-table-th-right-sticky + .ant-table-th-right-sticky {
+  .@{table-th-right-cls}-sticky + .@{table-th-right-cls}-sticky {
     box-shadow: none;
   }
 }
 
 
-.ant-table-th-left-sticky, .ant-table-th-right-sticky, .ant-table-td-right-sticky, .ant-table-td-left-sticky {
+.@{table-th-left-cls}-sticky,
+.@{table-th-right-cls}-sticky,
+.@{table-td-right-cls}-sticky,
+.@{table-td-left-cls}-sticky {
   position: sticky !important;
   z-index: 1;
 }
 
-.ant-table-td-left-sticky, .ant-table-td-right-sticky {
+.@{table-td-left-cls}-sticky,
+.@{table-td-right-cls}-sticky {
   background: @component-background;
 }
 
-.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th ,.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
-  &.ant-table-th-left-sticky, &.ant-table-th-right-sticky {
-    background: @component-background;
-  }
-}
-
-.ant-table-tbody {
+.@{table-prefix-cls}-tbody {
   & > tr {
     &:hover {
       & > td {
-        &.ant-table-td-left-sticky {
+        &.@{table-td-left-cls}-sticky {
           background: @table-row-hover-bg;
         }
 
-        &.ant-table-td-right-sticky {
+        &.@{table-td-right-cls}-sticky {
           background: @table-row-hover-bg;
         }
       }
     }
   }
 }
 
-.ant-table-thead > tr > th .ant-table-column-sorters > nz-dropdown {
+.@{table-prefix-cls}-thead > tr > th .@{table-prefix-cls}-column-sorters > nz-dropdown {
   position: static !important;
 }
 
-.ant-table-scroll-position-middle {
+.@{table-prefix-cls}-scroll-position-middle {
   .box-shadow-right;
   .box-shadow-left;
 }
 
-.ant-table-scroll-position-left {
+.@{table-prefix-cls}-scroll-position-left {
   .box-shadow-left;
 }
 
-.ant-table-scroll-position-right {
+.@{table-prefix-cls}-scroll-position-right {
   .box-shadow-right;
 }
 
-.ant-table-bordered {
-  &.ant-table-scroll-position-middle {
+.@{table-prefix-cls}-bordered {
+  &.@{table-prefix-cls}-scroll-position-middle {
     .border-right;
     .border-left;
   }
 
-  &.ant-table-scroll-position-left {
+  &.@{table-prefix-cls}-scroll-position-left {
     .border-left;
   }
 
-  &.ant-table-scroll-position-right {
+  &.@{table-prefix-cls}-scroll-position-right {
     .border-right;
   }
 }
 
+
+.@{table-prefix-cls}-middle {
+  > .@{table-prefix-cls}-content {
+    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
+      > .@{table-prefix-cls}-thead > tr > th,
+      > .@{table-prefix-cls}-tbody > tr > td {
+        padding: @table-padding-vertical-md @table-padding-horizontal-md;
+      }
+    }
+  }
+}
+
+.@{table-prefix-cls}-small {
+  > .@{table-prefix-cls}-content {
+    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
+    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
+    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
+      border: 0;
+
+      > .@{table-prefix-cls}-thead > tr > th {
+        &.@{table-th-left-cls}-sticky,
+        &.@{table-th-right-cls}-sticky {
+          background: @component-background;
+        }
+      }
+
+      > .@{table-prefix-cls}-thead > tr > th,
+      > .@{table-prefix-cls}-tbody > tr > td {
+        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
+      }
+    }
+  }
+}
+
 // hack tree css
 .ant-tree {
   &.ant-tree-show-line {
@@ -265,4 +311,4 @@ textarea.cdk-textarea-autosize-measuring {
   }
 
 
-}
+}