fixed.js 3.1 KB

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