fix: Input.Password border color (#30999)

* chore: form demo style

* fix: Input.Password hover border color in Form

components/form/demo/basic.md

@@ -16,14 +16,6 @@ Basic Form data control. Includes layout, initial values, validation and submit.
 ```tsx
 import { Form, Input, Button, Checkbox } from 'antd';
 
-const layout = {
-  labelCol: { span: 8 },
-  wrapperCol: { span: 16 },
-};
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
 const Demo = () => {
   const onFinish = (values: any) => {
     console.log('Success:', values);
@@ -35,8 +27,9 @@ const Demo = () => {
 
   return (
     <Form
-      {...layout}
       name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
       initialValues={{ remember: true }}
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
@@ -57,11 +50,11 @@ const Demo = () => {
         <Input.Password />
       </Form.Item>
 
-      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
+      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
         <Checkbox>Remember me</Checkbox>
       </Form.Item>
 
-      <Form.Item {...tailLayout}>
+      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
         <Button type="primary" htmlType="submit">
           Submit
         </Button>

components/form/style/index.less

@@ -235,27 +235,33 @@
 @keyframes diffZoomIn1 {
   0% {
     transform: scale(0);
+    opacity: 0;
   }
   100% {
     transform: scale(1);
+    opacity: 1;
   }
 }
 
 @keyframes diffZoomIn2 {
   0% {
     transform: scale(0);
+    opacity: 0;
   }
   100% {
     transform: scale(1);
+    opacity: 1;
   }
 }
 
 @keyframes diffZoomIn3 {
   0% {
     transform: scale(0);
+    opacity: 0;
   }
   100% {
     transform: scale(1);
+    opacity: 1;
   }
 }
 

components/form/style/mixin.less

@@ -5,8 +5,8 @@
     color: @text-color;
   }
   // 输入框的不同校验状态
-  .@{ant-prefix}-input,
-  .@{ant-prefix}-input-affix-wrapper {
+  .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled),
+  .@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled) {
     &,
     &:hover {
       background-color: @background-color;
@@ -19,26 +19,6 @@
     }
   }
 
-  .@{ant-prefix}-input-disabled {
-    &,
-    &:hover {
-      background-color: @input-disabled-bg;
-      border-color: @input-border-color;
-    }
-  }
-
-  .@{ant-prefix}-input-affix-wrapper-disabled {
-    &,
-    &:hover {
-      background-color: @input-disabled-bg;
-      border-color: @input-border-color;
-
-      input:focus {
-        box-shadow: none !important;
-      }
-    }
-  }
-
   .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
     .active(@border-color);
   }