confirm.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. // Style as confirm component
  2. import { unit } from '@ant-design/cssinjs';
  3. import { prepareComponentToken, prepareToken } from '.';
  4. import { clearFix } from '../../style';
  5. import { genSubStyleComponent } from '../../theme/internal';
  6. // ============================= Confirm ==============================
  7. const genModalConfirmStyle = token => {
  8. const {
  9. componentCls,
  10. titleFontSize,
  11. titleLineHeight,
  12. modalConfirmIconSize,
  13. fontSize,
  14. lineHeight,
  15. modalTitleHeight,
  16. fontHeight,
  17. confirmBodyPadding
  18. } = token;
  19. const confirmComponentCls = `${componentCls}-confirm`;
  20. return {
  21. [confirmComponentCls]: {
  22. '&-rtl': {
  23. direction: 'rtl'
  24. },
  25. [`${token.antCls}-modal-header`]: {
  26. display: 'none'
  27. },
  28. [`${confirmComponentCls}-body-wrapper`]: Object.assign({}, clearFix()),
  29. [`&${componentCls} ${componentCls}-body`]: {
  30. padding: confirmBodyPadding
  31. },
  32. // ====================== Body ======================
  33. [`${confirmComponentCls}-body`]: {
  34. display: 'flex',
  35. flexWrap: 'nowrap',
  36. alignItems: 'start',
  37. [`> ${token.iconCls}`]: {
  38. flex: 'none',
  39. fontSize: modalConfirmIconSize,
  40. marginInlineEnd: token.confirmIconMarginInlineEnd,
  41. marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
  42. },
  43. [`&-has-title > ${token.iconCls}`]: {
  44. marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
  45. }
  46. },
  47. [`${confirmComponentCls}-paragraph`]: {
  48. display: 'flex',
  49. flexDirection: 'column',
  50. flex: 'auto',
  51. rowGap: token.marginXS,
  52. // https://github.com/ant-design/ant-design/issues/51912
  53. maxWidth: `calc(100% - ${unit(token.marginSM)})`
  54. },
  55. // https://github.com/ant-design/ant-design/issues/48159
  56. [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
  57. maxWidth: `calc(100% - ${unit(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
  58. },
  59. [`${confirmComponentCls}-title`]: {
  60. color: token.colorTextHeading,
  61. fontWeight: token.fontWeightStrong,
  62. fontSize: titleFontSize,
  63. lineHeight: titleLineHeight
  64. },
  65. [`${confirmComponentCls}-content`]: {
  66. color: token.colorText,
  67. fontSize,
  68. lineHeight
  69. },
  70. // ===================== Footer =====================
  71. [`${confirmComponentCls}-btns`]: {
  72. textAlign: 'end',
  73. marginTop: token.confirmBtnsMarginTop,
  74. [`${token.antCls}-btn + ${token.antCls}-btn`]: {
  75. marginBottom: 0,
  76. marginInlineStart: token.marginXS
  77. }
  78. }
  79. },
  80. [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
  81. color: token.colorError
  82. },
  83. [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
  84. ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
  85. color: token.colorWarning
  86. },
  87. [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
  88. color: token.colorInfo
  89. },
  90. [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
  91. color: token.colorSuccess
  92. }
  93. };
  94. };
  95. // ============================== Export ==============================
  96. export default genSubStyleComponent(['Modal', 'confirm'], token => {
  97. const modalToken = prepareToken(token);
  98. return genModalConfirmStyle(modalToken);
  99. }, prepareComponentToken, {
  100. // confirm is weak than modal since no conflict here
  101. order: -1000
  102. });