sorter.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. const genSorterStyle = token => {
  2. const {
  3. componentCls,
  4. marginXXS,
  5. fontSizeIcon,
  6. tableHeaderIconColor,
  7. tableHeaderIconColorHover
  8. } = token;
  9. return {
  10. [`${componentCls}-wrapper`]: {
  11. [`${componentCls}-thead th${componentCls}-column-has-sorters`]: {
  12. outline: 'none',
  13. cursor: 'pointer',
  14. transition: `all ${token.motionDurationSlow}`,
  15. '&:hover': {
  16. background: token.tableHeaderSortHoverBg,
  17. '&::before': {
  18. backgroundColor: 'transparent !important'
  19. }
  20. },
  21. '&:focus-visible': {
  22. color: token.colorPrimary
  23. },
  24. // https://github.com/ant-design/ant-design/issues/30969
  25. [`
  26. &${componentCls}-cell-fix-left:hover,
  27. &${componentCls}-cell-fix-right:hover
  28. `]: {
  29. background: token.tableFixedHeaderSortActiveBg
  30. }
  31. },
  32. [`${componentCls}-thead th${componentCls}-column-sort`]: {
  33. background: token.tableHeaderSortBg,
  34. '&::before': {
  35. backgroundColor: 'transparent !important'
  36. }
  37. },
  38. [`td${componentCls}-column-sort`]: {
  39. background: token.tableBodySortBg
  40. },
  41. [`${componentCls}-column-title`]: {
  42. position: 'relative',
  43. zIndex: 1,
  44. flex: 1
  45. },
  46. [`${componentCls}-column-sorters`]: {
  47. display: 'flex',
  48. flex: 'auto',
  49. alignItems: 'center',
  50. justifyContent: 'space-between',
  51. '&::after': {
  52. position: 'absolute',
  53. inset: 0,
  54. width: '100%',
  55. height: '100%',
  56. content: '""'
  57. }
  58. },
  59. [`${componentCls}-column-sorter`]: {
  60. marginInlineStart: marginXXS,
  61. color: tableHeaderIconColor,
  62. fontSize: 0,
  63. transition: `color ${token.motionDurationSlow}`,
  64. '&-inner': {
  65. display: 'inline-flex',
  66. flexDirection: 'column',
  67. alignItems: 'center'
  68. },
  69. '&-up, &-down': {
  70. fontSize: fontSizeIcon,
  71. '&.active': {
  72. color: token.colorPrimary
  73. }
  74. },
  75. [`${componentCls}-column-sorter-up + ${componentCls}-column-sorter-down`]: {
  76. marginTop: '-0.3em'
  77. }
  78. },
  79. [`${componentCls}-column-sorters:hover ${componentCls}-column-sorter`]: {
  80. color: tableHeaderIconColorHover
  81. }
  82. }
  83. };
  84. };
  85. export default genSorterStyle;