ant-design/components/qr-code/style/index.ts

79 lines
2.1 KiB
TypeScript
Raw Normal View History

2023-11-14 10:34:01 +08:00
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
2023-11-14 10:34:01 +08:00
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {}
interface QRCodeToken extends FullToken<'QRCode'> {
QRCodeExpiredTextColor: string;
QRCodeMaskBackgroundColor: string;
}
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
2023-11-14 10:34:01 +08:00
const { componentCls, lineWidth, lineType, colorSplit } = token;
return {
[componentCls]: {
...resetComponent(token),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: token.paddingSM,
backgroundColor: token.colorWhite,
borderRadius: token.borderRadiusLG,
2023-11-14 10:34:01 +08:00
border: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
position: 'relative',
overflow: 'hidden',
[`& > ${componentCls}-mask`]: {
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
zIndex: 10,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
color: token.colorText,
lineHeight: token.lineHeight,
background: token.QRCodeMaskBackgroundColor,
textAlign: 'center',
[`& > ${componentCls}-expired`]: {
color: token.QRCodeExpiredTextColor,
},
},
'> canvas': {
alignSelf: 'stretch',
flex: 'auto',
minWidth: 0,
},
'&-icon': {
marginBlockEnd: token.marginXS,
fontSize: token.controlHeight,
},
},
[`${componentCls}-borderless`]: {
borderColor: 'transparent',
},
};
};
2023-11-14 10:34:01 +08:00
export const prepareComponentToken: GetDefaultToken<'QRCode'> = () => ({});
export default genStyleHooks<'QRCode'>(
2023-11-14 10:34:01 +08:00
'QRCode',
(token) => {
const mergedToken = mergeToken<QRCodeToken>(token, {
QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)',
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
2023-11-14 10:34:01 +08:00
});
return genQRCodeStyle(mergedToken);
},
prepareComponentToken,
);