fix(input): input button style error (#1567)

growingio · Dec 1, 2021 · f7adba3 · f7adba3 · vercel · Dec 1, 2021
1 parent 4597f09
commit f7adba3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 46 deletions.
diff --git a/src/input/InputButton.tsx b/src/input/InputButton.tsx
@@ -64,7 +64,6 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
   const wrapperCls = useMemo(
     () =>
       classNames(className, prefixCls, {
-        [`${prefixCls}__hover`]: !disabled,
         [`${prefixCls}__disabled`]: disabled,
         [`${prefixCls}__active`]: active,
       }),

diff --git a/src/input/style/InputButton.less b/src/input/style/InputButton.less
@@ -19,61 +19,36 @@
     color: @gray-5;
     .text-body1();
   }
-  &:disabled {
-    color: @gray-3;
-    background-color: @gray-0;
-    &::placeholder {
-      color: @gray-3;
-      .text-body1();
-    }
-    &:hover {
-      color: @gray-3;
-      background-color: @gray-0;
-      &::placeholder {
-        color: @gray-3;
-      }
-    }
-  }
-
-  &:not([disabled]):hover {
+  &:not(&__disabled) &__hover,
+  &:not(&__disabled) &__active,
+  &:not(&__disabled):hover {
     color: @blue-3;
+    background-color: @gray-1;
     border: 1px solid @gray-2;
+
+    .@{icon-prefix-cls} {
+      svg {
+        color: @blue-3;
+        // cursor: not-allowed;
+      }
+    }
+    input {
+      color: @blue-3;
+      cursor: pointer;
+    }
   }
   &:is([disabled]):hover {
     color: @gray-3;
     border: 1px solid @gray-2;
   }
 
-  &:not([disabled]):focus {
+  &:not(&__disabled):focus {
     border: 1px solid @gray-2;
     outline: none;
   }
-
-  &__active,
-  &__hover {
-    &:hover {
-      .@{input-btn-input-prefix-cls} {
-        background-color: @gray-1;
-      }
-      input {
-        color: @blue-3;
-        cursor: pointer;
-      }
-      .@{input-prefix-cls} {
-        &__prefix {
-          color: @blue-3;
-          cursor: pointer;
-          svg {
-            color: @blue-3;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
   &__disabled {
     background-color: @gray-0;
-
+    cursor: not-allowed;
     input {
       color: @gray-3;
     }

diff --git a/src/list/style/index.less b/src/list/style/index.less
@@ -106,7 +106,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-    &:hover {
+    &:not(&--disabled):hover {
       background-color: @gray-1;
     }
     &:last-child {
@@ -118,11 +118,11 @@
     &:not(&--disabled):not(&--drag):active &-prefix-icon {
       color: @blue-3;
     }
-    &--actived:not(&--multiple) {
+    &--actived:not(&--disabled):not(&--multiple) {
       color: @blue-3;
       background-color: @gray-1;
     }
-    &--actived:not(&--multiple) &-prefix-icon {
+    &--actived:not(&--disabled):not(&--multiple) &-prefix-icon {
       color: @blue-3;
     }
     &-prefix-icon {