Merge pull request #6655 from megawac/date-picker-style

Make -clear and -icon styles consistent at different input sizes

components/date-picker/style/Picker.less

@@ -43,21 +43,27 @@
     border-color: @primary-color;
   }
 
-  &-clear {
+  &-clear,
-    opacity: 0;
+  &-icon {
-    pointer-events: none;
-    z-index: 1;
     position: absolute;
-    right: 7px;
-    background: @input-bg;
-    top: 50%;
-    font-size: @font-size-base;
-    color: @disabled-color;
     width: 14px;
     height: 14px;
+    right: 8px;
+    top: 50%;
     margin-top: -7px;
+    line-height: 1em;
+    font-size: @font-size-base;
+    transition: all .3s;
     cursor: pointer;
-    transition: color 0.3s, opacity 0.3s;
+    user-select: none;
+  }
+
+  &-clear {
+    opacity: 0;
+    z-index: 1;
+    color: @disabled-color;
+    background: @input-bg;
+    pointer-events: none;
     &:hover {
       color: @text-color-secondary;
     }
@@ -69,16 +75,7 @@
   }
 
   &-icon {
-    position: absolute;
-    user-select: none;
-    transition: all .3s;
-    width: 1em;
-    height: 1em;
-    line-height: 1em;
-    right: 8px;
     color: @text-color-secondary;
-    top: 50%;
-    margin-top: -0.5em;
     &:after {
       content: "\e6bb";
       font-family: "anticon";

components/date-picker/style/RangePicker.less

@@ -17,6 +17,9 @@
 
 .@{calendar-prefix-cls}-range-picker-separator {
   color: @text-color-secondary;
+  position: absolute;
+  top: 50%;
+  margin-top: -10px;
 }
 
 .@{calendar-prefix-cls}-range {