mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

feat: add input hover and active backgroundColor (#44752)

Browse Source 
Co-authored-by: PanYoYo <panyongyong@zuoshouyisheng.com>
This commit is contained in:
YonYon 2023-09-12 15:06:35 +08:00 committed by GitHub
parent 09cd55a3f9
commit 1aa7183d68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/input/style/index.ts
View File

@ -66,6 +66,16 @@ export interface SharedComponentToken {
* @descEN Box-shadow when active in warning status
*/
warningActiveShadow: string;
/**
* @desc 输入框hover状态时背景颜色
* @descEN Background color when the input box hovers
*/
hoverBg: string;
/**
* @desc 输入框激活状态时背景颜色
* @descEN Background color when the input box is activated
*/
activeBg: string;
}
export interface ComponentToken extends SharedComponentToken {}
@ -92,12 +102,14 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
export const genHoverStyle = (token: InputToken): CSSObject => ({
borderColor: token.hoverBorderColor,
backgroundColor: token.hoverBg,
});
export const genActiveStyle = (token: InputToken) => ({
borderColor: token.activeBorderColor,
boxShadow: token.activeShadow,
outline: 0,
backgroundColor: token.activeBg,
});
export const genDisabledStyle = (token: InputToken): CSSObject => ({
@ -201,7 +213,6 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
borderRadius: token.borderRadius,
transition: `all ${token.motionDurationMid}`,
...genPlaceholderStyle(token.colorTextPlaceholder),
'&:hover': {
...genHoverStyle(token),
},
@ -1048,6 +1059,8 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
hoverBg: 'transparent',
activeBg: 'transparent',
};
};