fixed.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. const genFixedStyle = token => {
  2. const {
  3. componentCls,
  4. lineWidth,
  5. colorSplit,
  6. motionDurationSlow,
  7. zIndexTableFixed,
  8. tableBg,
  9. zIndexTableSticky
  10. } = token;
  11. const shadowColor = colorSplit;
  12. // Follow style is magic of shadow which should not follow token:
  13. return {
  14. [`${componentCls}-wrapper`]: {
  15. [`
  16. ${componentCls}-cell-fix-left,
  17. ${componentCls}-cell-fix-right
  18. `]: {
  19. position: 'sticky !important',
  20. zIndex: zIndexTableFixed,
  21. background: tableBg
  22. },
  23. [`
  24. ${componentCls}-cell-fix-left-first::after,
  25. ${componentCls}-cell-fix-left-last::after
  26. `]: {
  27. position: 'absolute',
  28. top: 0,
  29. right: {
  30. _skip_check_: true,
  31. value: 0
  32. },
  33. bottom: -lineWidth,
  34. width: 30,
  35. transform: 'translateX(100%)',
  36. transition: `box-shadow ${motionDurationSlow}`,
  37. content: '""',
  38. pointerEvents: 'none'
  39. },
  40. [`${componentCls}-cell-fix-left-all::after`]: {
  41. display: 'none'
  42. },
  43. [`
  44. ${componentCls}-cell-fix-right-first::after,
  45. ${componentCls}-cell-fix-right-last::after
  46. `]: {
  47. position: 'absolute',
  48. top: 0,
  49. bottom: -lineWidth,
  50. left: {
  51. _skip_check_: true,
  52. value: 0
  53. },
  54. width: 30,
  55. transform: 'translateX(-100%)',
  56. transition: `box-shadow ${motionDurationSlow}`,
  57. content: '""',
  58. pointerEvents: 'none'
  59. },
  60. [`${componentCls}-container`]: {
  61. '&::before, &::after': {
  62. position: 'absolute',
  63. top: 0,
  64. bottom: 0,
  65. zIndex: zIndexTableSticky + 1,
  66. width: 30,
  67. transition: `box-shadow ${motionDurationSlow}`,
  68. content: '""',
  69. pointerEvents: 'none'
  70. },
  71. '&::before': {
  72. insetInlineStart: 0
  73. },
  74. '&::after': {
  75. insetInlineEnd: 0
  76. }
  77. },
  78. [`${componentCls}-ping-left`]: {
  79. [`&:not(${componentCls}-has-fix-left) ${componentCls}-container`]: {
  80. position: 'relative',
  81. '&::before': {
  82. boxShadow: `inset 10px 0 8px -8px ${shadowColor}`
  83. }
  84. },
  85. [`
  86. ${componentCls}-cell-fix-left-first::after,
  87. ${componentCls}-cell-fix-left-last::after
  88. `]: {
  89. boxShadow: `inset 10px 0 8px -8px ${shadowColor}`
  90. },
  91. [`${componentCls}-cell-fix-left-last::before`]: {
  92. backgroundColor: 'transparent !important'
  93. }
  94. },
  95. [`${componentCls}-ping-right`]: {
  96. [`&:not(${componentCls}-has-fix-right) ${componentCls}-container`]: {
  97. position: 'relative',
  98. '&::after': {
  99. boxShadow: `inset -10px 0 8px -8px ${shadowColor}`
  100. }
  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. }
  110. };
  111. };
  112. export default genFixedStyle;