ant-design/components/qrcode/style/index.ts

60 lines
1.6 KiB
TypeScript
Raw Normal View History

feat: New Component QRCode (#38948) * feat: qrcode * chore: code clean * feat: New Component Qr-Code (#38891) * feat: QrCode * fix * fix * fix: fix bug * fix: fix bug * fix * fix * fix * delete * delete * test case * fix lint * bundlesize * demo * fix: fix test * remove dep * update snap * en docs * refactor: rename tests dir * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * rename * fix * adjust text * rename * fix title * rename * rename * fix: snap * fix * bundlesize * update demo * update docs * add demo * add docs * add docs * test: add warning * update demo * bundlesize * update test case * update demo * feat: add onRefresh、add status * fix: fix demo * fix: fix demo * add locale * add locale * add test case * update snap * fix demo * update demo * update demo * update demo * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/interface.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * fix * Update components/qrcode/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * fix * fix * fix * add decs * fix * fix * fix type * fix * fix demo * fix lint * fix lint * add test case for bordered * prettier-ignore Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: 栗嘉男 <lijianan@lijianandeMacBook-Pro.local>
2022-12-05 14:15:26 +08:00
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { mergeToken, genComponentStyleHook } from '../../theme/internal';
import { resetComponent } from '../../style';
export interface ComponentToken {}
interface QRCodeToken extends FullToken<'QRCode'> {
QRCodeMaskBackgroundColor: string;
}
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
const { componentCls } = token;
return {
[componentCls]: {
...resetComponent(token),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: token.paddingSM,
borderRadius: token.borderRadiusLG,
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: 'relative',
width: '100%',
height: '100%',
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',
},
'&-icon': {
marginBlockEnd: token.marginXS,
fontSize: token.controlHeight,
},
},
[`${componentCls}-borderless`]: {
borderColor: 'transparent',
},
};
};
export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
genQRCodeStyle(
mergeToken<QRCodeToken>(token, {
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
}),
),
);