index.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { mergeToken, genComponentStyleHook } from '../../theme/internal';
  3. import { resetComponent } from '../../style';
  4. const genQRCodeStyle = token => {
  5. const {
  6. componentCls
  7. } = token;
  8. return {
  9. [componentCls]: _extends(_extends({}, resetComponent(token)), {
  10. display: 'flex',
  11. justifyContent: 'center',
  12. alignItems: 'center',
  13. padding: token.paddingSM,
  14. backgroundColor: token.colorWhite,
  15. borderRadius: token.borderRadiusLG,
  16. border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
  17. position: 'relative',
  18. width: '100%',
  19. height: '100%',
  20. overflow: 'hidden',
  21. [`& > ${componentCls}-mask`]: {
  22. position: 'absolute',
  23. insetBlockStart: 0,
  24. insetInlineStart: 0,
  25. zIndex: 10,
  26. display: 'flex',
  27. flexDirection: 'column',
  28. justifyContent: 'center',
  29. alignItems: 'center',
  30. width: '100%',
  31. height: '100%',
  32. color: token.colorText,
  33. lineHeight: token.lineHeight,
  34. background: token.QRCodeMaskBackgroundColor,
  35. textAlign: 'center',
  36. [`& > ${componentCls}-expired , & > ${componentCls}-scanned`]: {
  37. color: token.QRCodeTextColor
  38. }
  39. },
  40. '&-icon': {
  41. marginBlockEnd: token.marginXS,
  42. fontSize: token.controlHeight
  43. }
  44. }),
  45. [`${componentCls}-borderless`]: {
  46. borderColor: 'transparent'
  47. }
  48. };
  49. };
  50. export default genComponentStyleHook('QRCode', token => genQRCodeStyle(mergeToken(token, {
  51. QRCodeTextColor: 'rgba(0, 0, 0, 0.88)',
  52. QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)'
  53. })));