index.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { genComponentStyleHook } from '../../theme/internal';
  2. // =============================== Base ===============================
  3. const genBaseStyle = token => {
  4. const {
  5. componentCls,
  6. iconCls,
  7. zIndexPopup,
  8. colorText,
  9. colorWarning,
  10. marginXS,
  11. fontSize,
  12. fontWeightStrong,
  13. lineHeight
  14. } = token;
  15. return {
  16. [componentCls]: {
  17. zIndex: zIndexPopup,
  18. [`${componentCls}-inner-content`]: {
  19. color: colorText
  20. },
  21. [`${componentCls}-message`]: {
  22. position: 'relative',
  23. marginBottom: marginXS,
  24. color: colorText,
  25. fontSize,
  26. display: 'flex',
  27. flexWrap: 'nowrap',
  28. alignItems: 'start',
  29. [`> ${componentCls}-message-icon ${iconCls}`]: {
  30. color: colorWarning,
  31. fontSize,
  32. flex: 'none',
  33. lineHeight: 1,
  34. paddingTop: (Math.round(fontSize * lineHeight) - fontSize) / 2
  35. },
  36. '&-title': {
  37. flex: 'auto',
  38. marginInlineStart: marginXS
  39. },
  40. '&-title-only': {
  41. fontWeight: fontWeightStrong
  42. }
  43. },
  44. [`${componentCls}-description`]: {
  45. position: 'relative',
  46. marginInlineStart: fontSize + marginXS,
  47. marginBottom: marginXS,
  48. color: colorText,
  49. fontSize
  50. },
  51. [`${componentCls}-buttons`]: {
  52. textAlign: 'end',
  53. button: {
  54. marginInlineStart: marginXS
  55. }
  56. }
  57. }
  58. };
  59. };
  60. // ============================== Export ==============================
  61. export default genComponentStyleHook('Popconfirm', token => genBaseStyle(token), token => {
  62. const {
  63. zIndexPopupBase
  64. } = token;
  65. return {
  66. zIndexPopup: zIndexPopupBase + 60
  67. };
  68. });