sorter.js 2.5 KB

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