ant-design/components/alert/style/index.tsx
MadCcc 93908debec
feat: v5 radius (#37146)
* feat: v5 radius

* test: fix test
2022-08-19 10:10:51 +08:00

240 lines
5.4 KiB
TypeScript

import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
export interface ComponentToken {}
type AlertToken = FullToken<'Alert'> & {
alertIconSizeLG: number;
alertPadding: number;
alertPaddingLG: number;
};
const genAlertTypeStyle = (
bgColor: string,
borderColor: string,
iconColor: string,
token: AlertToken,
alertCls: string,
): CSSObject => ({
backgroundColor: bgColor,
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColor}`,
[`${alertCls}-icon`]: {
color: iconColor,
},
});
export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
componentCls,
motionDurationSlow: duration,
marginXS,
fontSize,
fontSizeLG,
lineHeight,
radiusLG: borderRadius,
motionEaseInOutCirc,
alertIconSizeLG,
colorText,
alertPadding,
alertPaddingLG,
marginXXS,
} = token;
return {
[componentCls]: {
...resetComponent(token),
position: 'relative',
display: 'flex',
alignItems: 'center',
padding: `${alertPadding}px ${alertPaddingLG}px`,
wordWrap: 'break-word',
borderRadius,
'&&-rtl': {
direction: 'rtl',
},
[`${componentCls}-content`]: {
flex: 1,
minWidth: 0,
},
[`${componentCls}-icon`]: {
marginInlineEnd: marginXS,
},
[`&-description`]: {
display: 'none',
fontSize,
lineHeight,
},
'&-message': {
color: colorText,
},
'&&-motion-leave': {
overflow: 'hidden',
opacity: 1,
transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
padding-top ${duration} ${motionEaseInOutCirc}, padding-bottom ${duration} ${motionEaseInOutCirc},
margin-bottom ${duration} ${motionEaseInOutCirc}`,
},
'&&-motion-leave-active': {
maxHeight: 0,
marginBottom: '0 !important',
paddingTop: 0,
paddingBottom: 0,
opacity: 0,
},
},
[`${componentCls}-with-description`]: {
alignItems: 'flex-start',
paddingInline: alertPaddingLG,
paddingBlock: alertPaddingLG,
[`${componentCls}-icon`]: {
marginInlineStart: alertPadding,
marginInlineEnd: alertPaddingLG,
fontSize: alertIconSizeLG,
},
[`${componentCls}-message`]: {
display: 'block',
marginBottom: marginXXS,
color: colorText,
fontSize: fontSizeLG,
},
[`${componentCls}-description`]: {
display: 'block',
},
},
[`${componentCls}-banner`]: {
marginBottom: 0,
border: '0 !important',
borderRadius: 0,
},
};
};
export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
componentCls,
colorSuccess,
colorSuccessBorder,
colorSuccessBg,
colorWarning,
colorWarningBorder,
colorWarningBg,
colorError,
colorErrorBorder,
colorErrorBg,
colorInfo,
colorInfoBorder,
colorInfoBg,
} = token;
return {
[componentCls]: {
'&-success': genAlertTypeStyle(
colorSuccessBg,
colorSuccessBorder,
colorSuccess,
token,
componentCls,
),
'&-info': genAlertTypeStyle(colorInfoBg, colorInfoBorder, colorInfo, token, componentCls),
'&-warning': genAlertTypeStyle(
colorWarningBg,
colorWarningBorder,
colorWarning,
token,
componentCls,
),
'&-error': {
...genAlertTypeStyle(colorErrorBg, colorErrorBorder, colorError, token, componentCls),
[`${componentCls}-description > pre`]: {
margin: 0,
padding: 0,
},
},
},
};
};
export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
componentCls,
iconCls,
motionDurationSlow: duration,
marginXS,
fontSizeIcon,
colorIcon,
colorIconHover,
} = token;
return {
[componentCls]: {
[`&-action`]: {
marginInlineStart: marginXS,
},
[`${componentCls}-close-icon`]: {
marginInlineStart: marginXS,
padding: 0,
overflow: 'hidden',
fontSize: fontSizeIcon,
lineHeight: `${fontSizeIcon}px`,
backgroundColor: 'transparent',
border: 'none',
outline: 'none',
cursor: 'pointer',
[`${iconCls}-close`]: {
color: colorIcon,
transition: `color ${duration}`,
'&:hover': {
color: colorIconHover,
},
},
},
'&-close-text': {
color: colorIcon,
transition: `color ${duration}`,
'&:hover': {
color: colorIconHover,
},
},
},
};
};
export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
genBaseStyle(token),
genTypeStyle(token),
genActionStyle(token),
];
export default genComponentStyleHook('Alert', token => {
const { fontSizeHeading3, paddingXS, padding } = token;
const alertToken = mergeToken<AlertToken>(token, {
alertIconSizeLG: fontSizeHeading3,
alertPadding: paddingXS,
alertPaddingLG: padding,
});
return [genAlertStyle(alertToken)];
});