fixed.js 3.5 KB

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