selection.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { unit } from '@ant-design/cssinjs';
  2. const genSelectionStyle = token => {
  3. const {
  4. componentCls,
  5. antCls,
  6. iconCls,
  7. fontSizeIcon,
  8. padding,
  9. paddingXS,
  10. headerIconColor,
  11. headerIconHoverColor,
  12. tableSelectionColumnWidth,
  13. tableSelectedRowBg,
  14. tableSelectedRowHoverBg,
  15. tableRowHoverBg,
  16. tablePaddingHorizontal,
  17. calc
  18. } = token;
  19. return {
  20. [`${componentCls}-wrapper`]: {
  21. // ========================== Selections ==========================
  22. [`${componentCls}-selection-col`]: {
  23. width: tableSelectionColumnWidth,
  24. [`&${componentCls}-selection-col-with-dropdown`]: {
  25. width: calc(tableSelectionColumnWidth).add(fontSizeIcon).add(calc(padding).div(4)).equal()
  26. }
  27. },
  28. [`${componentCls}-bordered ${componentCls}-selection-col`]: {
  29. width: calc(tableSelectionColumnWidth).add(calc(paddingXS).mul(2)).equal(),
  30. [`&${componentCls}-selection-col-with-dropdown`]: {
  31. width: calc(tableSelectionColumnWidth).add(fontSizeIcon).add(calc(padding).div(4)).add(calc(paddingXS).mul(2)).equal()
  32. }
  33. },
  34. [`
  35. table tr th${componentCls}-selection-column,
  36. table tr td${componentCls}-selection-column,
  37. ${componentCls}-selection-column
  38. `]: {
  39. paddingInlineEnd: token.paddingXS,
  40. paddingInlineStart: token.paddingXS,
  41. textAlign: 'center',
  42. [`${antCls}-radio-wrapper`]: {
  43. marginInlineEnd: 0
  44. }
  45. },
  46. [`table tr th${componentCls}-selection-column${componentCls}-cell-fix-left`]: {
  47. zIndex: calc(token.zIndexTableFixed).add(1).equal({
  48. unit: false
  49. })
  50. },
  51. [`table tr th${componentCls}-selection-column::after`]: {
  52. backgroundColor: 'transparent !important'
  53. },
  54. [`${componentCls}-selection`]: {
  55. position: 'relative',
  56. display: 'inline-flex',
  57. flexDirection: 'column'
  58. },
  59. [`${componentCls}-selection-extra`]: {
  60. position: 'absolute',
  61. top: 0,
  62. zIndex: 1,
  63. cursor: 'pointer',
  64. transition: `all ${token.motionDurationSlow}`,
  65. marginInlineStart: '100%',
  66. paddingInlineStart: unit(calc(tablePaddingHorizontal).div(4).equal()),
  67. [iconCls]: {
  68. color: headerIconColor,
  69. fontSize: fontSizeIcon,
  70. verticalAlign: 'baseline',
  71. '&:hover': {
  72. color: headerIconHoverColor
  73. }
  74. }
  75. },
  76. // ============================= Rows =============================
  77. [`${componentCls}-tbody`]: {
  78. [`${componentCls}-row`]: {
  79. [`&${componentCls}-row-selected`]: {
  80. [`> ${componentCls}-cell`]: {
  81. background: tableSelectedRowBg,
  82. '&-row-hover': {
  83. background: tableSelectedRowHoverBg
  84. }
  85. }
  86. },
  87. [`> ${componentCls}-cell-row-hover`]: {
  88. background: tableRowHoverBg
  89. }
  90. }
  91. }
  92. }
  93. };
  94. };
  95. export default genSelectionStyle;