chore: sync ant-design v4.16.3 (#6775)

Co-authored-by: ng-zorro-bot <ng-zorro-bot@users.noreply.github.com>
NG-ZORRO · Jun 17, 2021 · d1cdd0e · d1cdd0e
1 parent 2f1f8dc
commit d1cdd0e
Show file tree

Hide file tree

Showing 25 changed files with 302 additions and 171 deletions.
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
@@ -62,6 +62,10 @@
     right: 0;
     transform: translate(50%, -50%);
     transform-origin: 100% 0%;
+
+    &.@{iconfont-css-prefix}-spin {
+      animation: antBadgeLoadingCircle 1s infinite linear;
+    }
   }
 
   &-status {
@@ -244,5 +248,16 @@
   }
 }
 
+@keyframes antBadgeLoadingCircle {
+  0% {
+    transform-origin: 50%;
+  }
+
+  100% {
+    transform: translate(50%, -50%) rotate(360deg);
+    transform-origin: 50%;
+  }
+}
+
 @import './ribbon';
 @import './rtl';
diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -144,21 +144,21 @@
     &-hidden {
       display: none;
     }
-    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
       animation-name: antSlideUpIn;
     }
 
-    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
       animation-name: antSlideDownIn;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
       animation-name: antSlideUpOut;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
       animation-name: antSlideDownOut;
     }
   }

diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -151,6 +151,13 @@
     line-height: unset;
     cursor: pointer;
 
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
     &.@{checkbox-prefix-cls}-wrapper-disabled {
       cursor: not-allowed;
     }

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -24,25 +24,17 @@
     > .@{collapse-prefix-cls}-header {
       position: relative;
       padding: @collapse-header-padding;
-      padding-left: @collapse-header-padding-extra;
       color: @heading-color;
       line-height: @line-height-base;
       cursor: pointer;
       transition: all 0.3s, visibility 0s;
       .clearfix();
 
       .@{collapse-prefix-cls}-arrow {
-        .iconfont-mixin();
-
-        position: absolute;
-        top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
-        left: @collapse-header-arrow-left;
         display: inline-block;
-        padding: @collapse-header-padding;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 0;
+        margin-right: 12px;
         font-size: @font-size-sm;
+        vertical-align: -1px;
 
         & svg {
           transition: transform 0.24s;
@@ -80,8 +72,12 @@
         padding-right: @collapse-header-padding-extra;
 
         .@{collapse-prefix-cls}-arrow {
+          position: absolute;
+          top: 50%;
           right: @padding-md;
           left: auto;
+          margin: 0;
+          transform: translateY(-50%);
         }
       }
     }

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
@@ -235,27 +235,27 @@
       }
     }
 
-    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-    &.slide-up-enter.slide-up-enter-active&-placement-topRight,
-    &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
       animation-name: antSlideDownIn;
     }
 
-    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-    &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
-    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
       animation-name: antSlideUpIn;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
-    &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
       animation-name: antSlideDownOut;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
-    &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
       animation-name: antSlideUpOut;
     }
   }

diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -32,7 +32,7 @@
     }
 
     .@{iconfont-css-prefix}-down::before {
-      transition: transform 0.2s;
+      transition: transform @animation-duration-base;
     }
   }
 
@@ -43,7 +43,8 @@
   }
 
   &-hidden,
-  &-menu-hidden {
+  &-menu-hidden,
+  &-menu-submenu-hidden {
     display: none;
   }
 
@@ -132,7 +133,7 @@
     &-item-group-title {
       padding: 5px @control-padding-horizontal;
       color: @text-color-secondary;
-      transition: all 0.3s;
+      transition: all @animation-duration-slow;
     }
 
     &-submenu-popup {
@@ -153,6 +154,42 @@
       }
     }
 
+    // ======================= Item Content =======================
+    &-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &-item-icon {
+      min-width: 12px;
+      margin-right: 8px;
+      font-size: @font-size-sm;
+    }
+
+    &-title-content {
+      flex: auto;
+
+      > a {
+        color: inherit;
+        transition: all @animation-duration-slow;
+
+        &:hover {
+          color: inherit;
+        }
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          content: '';
+        }
+      }
+    }
+
+    // =========================== Item ===========================
     &-item,
     &-submenu-title {
       clear: both;
@@ -164,35 +201,7 @@
       line-height: @dropdown-line-height;
       white-space: nowrap;
       cursor: pointer;
-      transition: all 0.3s;
-
-      > .@{iconfont-css-prefix}:first-child,
-      > a > .@{iconfont-css-prefix}:first-child,
-      > span > .@{iconfont-css-prefix}:first-child {
-        min-width: 12px;
-        margin-right: 8px;
-        font-size: @font-size-sm;
-        vertical-align: -0.1em;
-      }
-
-      > a {
-        display: block;
-        margin: -5px -@control-padding-horizontal;
-        padding: 5px @control-padding-horizontal;
-        color: @text-color;
-        transition: all 0.3s;
-        &:hover {
-          color: @text-color;
-        }
-      }
-
-      > .@{iconfont-css-prefix} + span > a {
-        color: @text-color;
-        transition: all 0.3s;
-        &:hover {
-          color: @text-color;
-        }
-      }
+      transition: all @animation-duration-slow;
 
       &:first-child {
         & when (@dropdown-edge-child-vertical-padding = 0) {
@@ -206,8 +215,7 @@
         }
       }
 
-      &-selected,
-      &-selected > a {
+      &-selected {
         color: @dropdown-selected-color;
         background-color: @item-active-bg;
       }
@@ -226,21 +234,8 @@
           cursor: not-allowed;
         }
 
-        > .@{iconfont-css-prefix} + span > a,
-        > a {
-          position: relative;
-          color: @disabled-color;
+        a {
           pointer-events: none;
-
-          &::after {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            cursor: not-allowed;
-            content: '';
-          }
         }
       }
 
@@ -303,33 +298,33 @@
     }
   }
 
-  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
-  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
-  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
-  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
-  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
-  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
     animation-name: antSlideUpIn;
   }
 
-  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
-  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
-  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
-  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
-  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
     animation-name: antSlideDownIn;
   }
 
-  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
-  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
-  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
     animation-name: antSlideUpOut;
   }
 
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
-  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
-  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
     animation-name: antSlideDownOut;
   }
 }

diff --git a/components/form/style/components.less b/components/form/style/components.less
@@ -61,7 +61,9 @@
     width: 100%;
   }
 
-  // Don't impact select inside input group
+  // Don't impact select inside input group and calendar header select
+  .@{ant-prefix}-picker-calendar-year-select,
+  .@{ant-prefix}-picker-calendar-month-select,
   .@{ant-prefix}-input-group .@{ant-prefix}-select,
   .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
     width: auto;

diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less
@@ -20,16 +20,22 @@
   }
 
   .@{ant-prefix}-input-disabled {
-    background-color: @input-disabled-bg;
-    border-color: @input-border-color;
+    &,
+    &:hover {
+      background-color: @input-disabled-bg;
+      border-color: @input-border-color;
+    }
   }
 
   .@{ant-prefix}-input-affix-wrapper-disabled {
-    background-color: @input-disabled-bg;
-    border-color: @input-border-color;
+    &,
+    &:hover {
+      background-color: @input-disabled-bg;
+      border-color: @input-border-color;
 
-    input:focus {
-      box-shadow: none !important;
+      input:focus {
+        box-shadow: none !important;
+      }
     }
   }