chore: sync ant-design v4.0.0 (NG-ZORRO#4823)

hsuanxyz · Feb 29, 2020 · 7cbd632 · 7cbd632
1 parent 748a894
commit 7cbd632
Show file tree

Hide file tree

Showing 20 changed files with 295 additions and 56 deletions.
diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
@@ -149,6 +149,7 @@
           width: auto;
           height: 86px;
           overflow-y: auto;
+          color: @text-color;
           line-height: @line-height-base;
           text-align: left;
         }

diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -183,7 +183,7 @@
   // 半选状态
   .@{checkbox-prefix-cls}-indeterminate {
     .@{checkbox-inner-prefix-cls} {
-      background-color: @component-background;
+      background-color: @checkbox-check-bg;
       border-color: @border-color-base;
     }
     .@{checkbox-inner-prefix-cls}::after {

diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less
@@ -1,7 +1,6 @@
 @import './index';
 
 @picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
-@picker-legacy-cell-cls: ~'@{ant-prefix}-calendar-date';
 
 .@{picker-prefix-cls} {
   @picker-arrow-size: 7px;
@@ -428,7 +427,6 @@
     }
 
     .picker-cell-inner(~'@{picker-cell-inner-cls}');
-    .picker-cell-inner(~'@{picker-legacy-cell-cls}');
   }
 
   &-decade-panel,
@@ -702,3 +700,17 @@
     }
   }
 }
+
+// Fix IE11 render bug by css hacks
+// https://github.com/ant-design/ant-design/issues/21559
+// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
+/* stylelint-disable-next-line */
+_:-ms-fullscreen,
+:root {
+  .@{picker-prefix-cls}-range-wrapper {
+    .@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
+    .@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
+      padding: 21px 0;
+    }
+  }
+}
diff --git a/components/drawer/style/customize.less b/components/drawer/style/customize.less
@@ -0,0 +1,3 @@
+@import './index.less';
+
+.popover-customize-bg(@drawer-prefix-cls, @popover-background);
diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less
@@ -1,3 +1,4 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './drawer';
+@import './customize';
diff --git a/components/list/style/customize.less b/components/list/style/customize.less
@@ -0,0 +1,12 @@
+@import './index.less';
+
+@card-prefix-cls: ~'@{ant-prefix}-card';
+
+.@{list-prefix-cls} {
+  // =================== Dard Hook Components ===================
+  .@{card-prefix-cls} {
+    & when (@theme = dark) {
+      background: @list-customize-card-bg;
+    }
+  }
+}
diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './customize.less';
 
 @list-prefix-cls: ~'@{ant-prefix}-list';
 

diff --git a/components/modal/style/customize.less b/components/modal/style/customize.less
@@ -0,0 +1,3 @@
+@import './index.less';
+
+.popover-customize-bg(@dialog-prefix-cls, @popover-background);
diff --git a/components/modal/style/index.less b/components/modal/style/index.less
@@ -2,3 +2,4 @@
 @import '../../style/mixins/index';
 @import './modal';
 @import './confirm';
+@import './customize.less';
diff --git a/components/notification/style/customize.less b/components/notification/style/customize.less
@@ -0,0 +1,3 @@
+@import './index.less';
+
+.popover-customize-bg(@notification-prefix-cls, @popover-background);
diff --git a/components/notification/style/index.less b/components/notification/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './customize.less';
 
 @notification-prefix-cls: ~'@{ant-prefix}-notification';
 @notification-width: 384px;

diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
@@ -297,7 +297,7 @@
       margin-right: 8px;
       padding: 0 6px;
       text-align: center;
-      background-color: @component-background;
+      background-color: @pagination-item-input-bg;
       border: @border-width-base @border-style-base @border-color-base;
       border-radius: @border-radius-base;
       outline: none;

diff --git a/components/popover/style/customize.less b/components/popover/style/customize.less
@@ -0,0 +1,3 @@
+@import './index.less';
+
+.popover-customize-bg(@popover-prefix-cls, @popover-background);
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
@@ -18,7 +18,6 @@
 @error-title-color: @error-color;
 @error-description-color: @error-color;
 @error-tail-color: @wait-tail-color;
-@steps-background: @component-background;
 @steps-nav-active-color: @primary-color;
 
 @steps-icon-size: 32px;

diff --git a/components/style/mixins/customize.less b/components/style/mixins/customize.less
@@ -0,0 +1,170 @@
+// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
+// for dark theme
+.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) {
+  @picker-prefix-cls: ~'@{prefix}-picker';
+  @slider-prefix-cls: ~'@{prefix}-slider';
+  @anchor-prefix-cls: ~'@{prefix}-anchor';
+  @collapse-prefix-cls: ~'@{prefix}-collapse';
+  @tab-prefix-cls: ~'@{prefix}-tabs';
+  @timeline-prefix-cls: ~'@{prefix}-timeline';
+  @tree-prefix-cls: ~'@{prefix}-tree';
+  @card-prefix-cls: ~'@{prefix}-card';
+  @badge-prefix-cls: ~'@{prefix}-badge';
+  @transfer-prefix-cls: ~'@{prefix}-transfer';
+  @calendar-prefix-cls: ~'@{prefix}-picker-calendar';
+  @calendar-picker-prefix-cls: ~'@{prefix}-picker';
+  @table-prefix-cls: ~'@{prefix}-table';
+
+  @popover-border: @border-width-base @border-style-base @popover-customize-border-color;
+
+  .@{containerClass} {
+    .@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} {
+      background-color: @background;
+    }
+
+    .@{transfer-prefix-cls} {
+      &-list {
+        &-header {
+          background: @background;
+          border-bottom: @popover-border;
+        }
+        &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
+          background-color: @item-hover-bg;
+        }
+      }
+    }
+
+    tr.@{table-prefix-cls}-expanded-row {
+      &,
+      &:hover {
+        > td {
+          background: #272727;
+        }
+      }
+    }
+    .@{table-prefix-cls}.@{table-prefix-cls}-small {
+      thead {
+        > tr {
+          > th {
+            background-color: @background;
+            border-bottom: @popover-border;
+          }
+        }
+      }
+    }
+    .@{table-prefix-cls} {
+      background-color: @background;
+      .@{table-prefix-cls}-row-expand-icon {
+        border: @popover-border;
+      }
+      tfoot {
+        > tr {
+          > th,
+          > td {
+            border-bottom: @popover-border;
+          }
+        }
+      }
+      thead {
+        > tr {
+          > th {
+            background-color: #272727;
+            border-bottom: @popover-border;
+          }
+        }
+      }
+      tbody {
+        > tr {
+          > td {
+            border-bottom: @popover-border;
+            &.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right {
+              background-color: @background;
+            }
+          }
+          &.@{table-prefix-cls}-row:hover {
+            > td {
+              background: @table-header-sort-active-bg;
+            }
+          }
+        }
+      }
+      &.@{table-prefix-cls}-bordered {
+        .@{table-prefix-cls}-title {
+          border: @popover-border;
+        }
+
+        // ============================= Cell =============================
+        thead > tr > th,
+        tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          border-right: @popover-border;
+        }
+
+        // Fixed right should provides additional border
+        .@{table-prefix-cls}-cell-fix-right-first::after {
+          border-right: @popover-border;
+        }
+
+        // ============================ Header ============================
+        table > {
+          thead {
+            > tr:not(:last-child) > th {
+              border-bottom: @border-width-base @border-style-base @border-color-split;
+            }
+          }
+        }
+
+        // =========================== Content ============================
+        .@{table-prefix-cls}-container {
+          border: @popover-border;
+        }
+
+        // ========================== Expandable ==========================
+        .@{table-prefix-cls}-expanded-row-fixed {
+          &::after {
+            border-right: @popover-border;
+          }
+        }
+
+        .@{table-prefix-cls}-footer {
+          border: @popover-border;
+        }
+      }
+      .@{table-prefix-cls}-filter-trigger-container-open {
+        background-color: #525252;
+      }
+    }
+
+    .@{calendar-prefix-cls}-full {
+      background-color: @background;
+      .@{calendar-picker-prefix-cls}-panel {
+        background-color: @background;
+        .@{calendar-prefix-cls}-date {
+          border-top: 2px solid @popover-customize-border-color;
+        }
+      }
+    }
+
+    .@{tab-prefix-cls} {
+      &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
+        background-color: @background;
+        border-bottom: @border-width-base solid @background;
+      }
+    }
+
+    .@{badge-prefix-cls} {
+      &-count {
+        box-shadow: 0 0 0 1px @background;
+      }
+    }
+
+    .@{tree-prefix-cls} {
+      &-show-line {
+        .@{tree-prefix-cls}-switcher {
+          background: @background;
+        }
+      }
+    }
+  }
+}
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
@@ -8,3 +8,4 @@
 @import 'reset';
 @import 'operation-unit';
 @import 'typography';
+@import 'customize';