From f9bad27469515c44de97edce4bd642b8bde8ab8a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 5 Dec 2016 00:27:03 +0800
Subject: [PATCH] Fix DatePicker input style

---
 components/date-picker/style/Picker.less      | 19 +++++++++++++------
 components/date-picker/style/RangePicker.less |  6 +-----
 components/date-picker/wrapPicker.tsx         |  2 +-
 components/input/style/mixin.less             |  2 +-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less
index c68b96d4ac6b..020f4b9f4659 100644
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@@ -32,14 +32,20 @@
   display: inline-block;
   outline: none;
   font-size: @font-size-base;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.3s;
 
-  > input {
+  &-input {
     outline: none;
   }
+
+  &:hover &-input {
+    border-color: @primary-color;
+  }
+
   &-clear {
     opacity: 0;
-    z-index: -1;
+    pointer-events: none;
+    z-index: 1;
     position: absolute;
     right: 7px;
     background: #fff;
@@ -51,7 +57,7 @@
     margin-top: -7px;
     line-height: 14px;
     cursor: pointer;
-    transition: color 0.3s ease, opacity 0.15s ease;
+    transition: color 0.3s, opacity 0.3s;
     &:hover {
       color: @text-color-secondary;
     }
@@ -59,12 +65,13 @@
 
   &:hover &-clear {
     opacity: 1;
-    z-index: 1;
+    pointer-events: auto;
   }
+
   &-icon {
     position: absolute;
     user-select: none;
-    transition: all .3s @ease-in-out;
+    transition: all .3s;
     width: 12px;
     height: 12px;
     line-height: 12px;
diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less
index 68ed8ba0adca..ee2b858f4047 100644
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@@ -1,9 +1,5 @@
 @input-box-height: 34px;
 
-.@{calendar-prefix-cls}-range-picker.@{ant-prefix}-input {
-  padding-right: 26px;
-}
-
 .@{calendar-prefix-cls}-range-picker-input {
   background-color: transparent;
   border: 0;
@@ -236,4 +232,4 @@
   .@{calendar-prefix-cls}-body {
     border-top-color: transparent;
   }
-}
\ No newline at end of file
+}
diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx
index 31713acdf2cc..3fd71c681337 100644
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -67,7 +67,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
         [`${prefixCls}-picker`]: true,
       });
       const pickerInputClass = classNames({
-        [`${prefixCls}-range-picker`]: true,
+        [`${prefixCls}-picker-input`]: true,
         [inputPrefixCls]: true,
         [`${inputPrefixCls}-lg`]: props.size === 'large',
         [`${inputPrefixCls}-sm`]: props.size === 'small',
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index eac0eb984da3..53b50ca42d76 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -52,7 +52,7 @@
   border: 1px solid @input-border-color;
   border-radius: @border-radius-base;
   .placeholder(); // Reset placeholder
-  transition: border .2s @ease-in-out, background .2s @ease-in-out, box-shadow .2s @ease-in-out;
+  transition: all .3s;
 
   &:hover {
     .hover();