style: 💄 fix Pickers wrong animation direction (#27101)

* style: fix Pickers wrong animation direction

* style: reduce css bundle size

components/back-top/style/index.less

@@ -32,11 +32,11 @@
     text-align: center;
     background-color: @back-top-bg;
     border-radius: 20px;
-    transition: all 0.3s @ease-in-out;
+    transition: all 0.3s;
 
     &:hover {
       background-color: @back-top-hover-bg;
-      transition: all 0.3s @ease-in-out;
+      transition: all 0.3s;
     }
   }
 

components/cascader/style/index.less

@@ -223,11 +223,10 @@
 
     &-expand &-expand-icon,
     &-loading-icon {
-      .iconfont-size-under-12px(10px);
-
       position: absolute;
       right: @control-padding-horizontal;
       color: @text-color-secondary;
+      font-size: 10px;
 
       .@{cascader-prefix-cls}-menu-item-disabled& {
         color: @disabled-color;

components/date-picker/style/index.less

@@ -237,6 +237,30 @@
         transform: rotate(135deg);
       }
     }
+
+    &.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 {
+      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 {
+      animation-name: antSlideUpIn;
+    }
+
+    &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+    &.slide-up-leave.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 {
+      animation-name: antSlideUpOut;
+    }
   }
 
   &-dropdown-range {

components/dropdown/style/index.less

@@ -28,7 +28,7 @@
     position: relative;
 
     .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
-      .iconfont-size-under-12px(10px);
+      font-size: 10px;
     }
 
     .@{iconfont-css-prefix}-down::before {
@@ -243,8 +243,8 @@
         &-icon {
           margin-right: 0 !important;
           color: @text-color-secondary;
+          font-size: 10px;
           font-style: normal;
-          .iconfont-size-under-12px(10px);
         }
       }
     }
@@ -322,8 +322,8 @@
 .@{dropdown-prefix-cls}-link,
 .@{dropdown-prefix-cls}-button {
   > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
+    font-size: 10px;
     vertical-align: baseline;
-    .iconfont-size-under-12px(10px);
   }
 }
 

components/input-number/style/index.less

@@ -134,10 +134,9 @@
     .@{input-number-prefix-cls}-handler {
       .@{input-number-prefix-cls}-handler-up-inner,
       .@{input-number-prefix-cls}-handler-down-inner {
-        .iconfont-size-under-12px(7px);
-
         min-width: auto;
         margin-right: 0;
+        font-size: 7px;
       }
     }
   }

components/select/style/multiple.less

@@ -90,10 +90,9 @@
         display: inline-block;
         color: @text-color-secondary;
         font-weight: bold;
-        font-size: @font-size-sm;
+        font-size: 10px;
         line-height: inherit;
         cursor: pointer;
-        .iconfont-size-under-12px(10px);
 
         > .@{iconfont-css-prefix} {
           vertical-align: -0.2em;

components/style/mixins/iconfont.less

@@ -26,10 +26,3 @@
     display: block;
   }
 }
-
-// for iconfont font size
-// fix chrome 12px bug
-.iconfont-size-under-12px(@size) {
-  display: inline-block;
-  font-size: @size;
-}

components/table/style/index.less

@@ -233,7 +233,7 @@
 
     &-up,
     &-down {
-      .iconfont-size-under-12px(11px);
+      font-size: 11px;
 
       &.active {
         color: @primary-color;
@@ -383,8 +383,8 @@
       transition: all 0.3s;
 
       .@{iconfont-css-prefix} {
-        .iconfont-size-under-12px(10px);
         color: @table-header-icon-color;
+        font-size: 10px;
 
         &:hover {
           color: @table-header-icon-color-hover;

components/tag/style/index.less

@@ -18,7 +18,7 @@
   border-radius: @border-radius-base;
   cursor: default;
   opacity: 1;
-  transition: all 0.3s @ease-in-out-circ;
+  transition: all 0.3s;
 
   &:hover {
     opacity: 0.85;
@@ -37,12 +37,11 @@
   }
 
   &-close-icon {
-    .iconfont-size-under-12px(10px);
-
     margin-left: 3px;
     color: @text-color-secondary;
+    font-size: 10px;
     cursor: pointer;
-    transition: all 0.3s @ease-in-out-circ;
+    transition: all 0.3s;
 
     &:hover {
       color: @heading-color;

components/transfer/style/index.less

@@ -91,9 +91,9 @@
       }
 
       &-dropdown {
+        font-size: 10px;
         transform: translateY(10%);
         cursor: pointer;
-        .iconfont-size-under-12px(10px);
 
         &[disabled] {
           cursor: not-allowed;

components/tree/style/mixin.less

@@ -8,8 +8,8 @@
 .antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
   .@{tree-prefix-cls}-switcher-icon,
   .@{select-tree-prefix-cls}-switcher-icon {
-    .iconfont-size-under-12px(10px);
     display: inline-block;
+    font-size: 10px;
     vertical-align: baseline;
     svg {
       transition: transform 0.3s;

components/upload/style/index.less

@@ -221,12 +221,11 @@
     }
 
     .@{iconfont-css-prefix}-close {
-      .iconfont-size-under-12px(10px);
-
       position: absolute;
       top: 6px;
       right: 4px;
       color: @text-color-secondary;
+      font-size: 10px;
       line-height: 0;
       cursor: pointer;
       opacity: 0;