fixed.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. const genFixedStyle = token => {
  7. const {
  8. componentCls,
  9. lineWidth,
  10. colorSplit,
  11. motionDurationSlow,
  12. zIndexTableFixed,
  13. tableBg,
  14. zIndexTableSticky,
  15. calc
  16. } = token;
  17. const shadowColor = colorSplit;
  18. // Follow style is magic of shadow which should not follow token:
  19. return {
  20. [`${componentCls}-wrapper`]: {
  21. [`
  22. ${componentCls}-cell-fix-left,
  23. ${componentCls}-cell-fix-right
  24. `]: {
  25. position: 'sticky !important',
  26. zIndex: zIndexTableFixed,
  27. background: tableBg
  28. },
  29. [`
  30. ${componentCls}-cell-fix-left-first::after,
  31. ${componentCls}-cell-fix-left-last::after
  32. `]: {
  33. position: 'absolute',
  34. top: 0,
  35. right: {
  36. _skip_check_: true,
  37. value: 0
  38. },
  39. bottom: calc(lineWidth).mul(-1).equal(),
  40. width: 30,
  41. transform: 'translateX(100%)',
  42. transition: `box-shadow ${motionDurationSlow}`,
  43. content: '""',
  44. pointerEvents: 'none',
  45. // fix issues: https://github.com/ant-design/ant-design/issues/54587
  46. willChange: 'transform'
  47. },
  48. [`${componentCls}-cell-fix-left-all::after`]: {
  49. display: 'none'
  50. },
  51. [`
  52. ${componentCls}-cell-fix-right-first::after,
  53. ${componentCls}-cell-fix-right-last::after
  54. `]: {
  55. position: 'absolute',
  56. top: 0,
  57. bottom: calc(lineWidth).mul(-1).equal(),
  58. left: {
  59. _skip_check_: true,
  60. value: 0
  61. },
  62. width: 30,
  63. transform: 'translateX(-100%)',
  64. transition: `box-shadow ${motionDurationSlow}`,
  65. content: '""',
  66. pointerEvents: 'none'
  67. },
  68. [`${componentCls}-container`]: {
  69. position: 'relative',
  70. '&::before, &::after': {
  71. position: 'absolute',
  72. top: 0,
  73. bottom: 0,
  74. zIndex: calc(zIndexTableSticky).add(1).equal({
  75. unit: false
  76. }),
  77. width: 30,
  78. transition: `box-shadow ${motionDurationSlow}`,
  79. content: '""',
  80. pointerEvents: 'none'
  81. },
  82. '&::before': {
  83. insetInlineStart: 0
  84. },
  85. '&::after': {
  86. insetInlineEnd: 0
  87. }
  88. },
  89. [`${componentCls}-ping-left`]: {
  90. [`&:not(${componentCls}-has-fix-left) ${componentCls}-container::before`]: {
  91. boxShadow: `inset 10px 0 8px -8px ${shadowColor}`
  92. },
  93. [`
  94. ${componentCls}-cell-fix-left-first::after,
  95. ${componentCls}-cell-fix-left-last::after
  96. `]: {
  97. boxShadow: `inset 10px 0 8px -8px ${shadowColor}`
  98. },
  99. [`${componentCls}-cell-fix-left-last::before`]: {
  100. backgroundColor: 'transparent !important'
  101. }
  102. },
  103. [`${componentCls}-ping-right`]: {
  104. [`&:not(${componentCls}-has-fix-right) ${componentCls}-container::after`]: {
  105. boxShadow: `inset -10px 0 8px -8px ${shadowColor}`
  106. },
  107. [`
  108. ${componentCls}-cell-fix-right-first::after,
  109. ${componentCls}-cell-fix-right-last::after
  110. `]: {
  111. boxShadow: `inset -10px 0 8px -8px ${shadowColor}`
  112. }
  113. },
  114. // Gapped fixed Columns do not show the shadow
  115. [`${componentCls}-fixed-column-gapped`]: {
  116. [`
  117. ${componentCls}-cell-fix-left-first::after,
  118. ${componentCls}-cell-fix-left-last::after,
  119. ${componentCls}-cell-fix-right-first::after,
  120. ${componentCls}-cell-fix-right-last::after
  121. `]: {
  122. boxShadow: 'none'
  123. }
  124. }
  125. }
  126. };
  127. };
  128. var _default = exports.default = genFixedStyle;