Fix DatePicker input style

emmanuj · Dec 4, 2016 · f9bad27 · f9bad27
1 parent 99df181
commit f9bad27
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git 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,20 +57,21 @@
     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;
     }
   }
 
   &: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
@@ -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;
   }
-}
+}
diff --git 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
@@ -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();