sticky.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. const genStickyStyle = token => {
  2. const {
  3. componentCls,
  4. opacityLoading,
  5. tableScrollThumbBg,
  6. tableScrollThumbBgHover,
  7. tableScrollThumbSize,
  8. tableScrollBg,
  9. zIndexTableSticky
  10. } = token;
  11. const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
  12. return {
  13. [`${componentCls}-wrapper`]: {
  14. [`${componentCls}-sticky`]: {
  15. '&-holder': {
  16. position: 'sticky',
  17. zIndex: zIndexTableSticky,
  18. background: token.colorBgContainer
  19. },
  20. '&-scroll': {
  21. position: 'sticky',
  22. bottom: 0,
  23. height: `${tableScrollThumbSize}px !important`,
  24. zIndex: zIndexTableSticky,
  25. display: 'flex',
  26. alignItems: 'center',
  27. background: tableScrollBg,
  28. borderTop: tableBorder,
  29. opacity: opacityLoading,
  30. '&:hover': {
  31. transformOrigin: 'center bottom'
  32. },
  33. // fake scrollbar style of sticky
  34. '&-bar': {
  35. height: tableScrollThumbSize,
  36. backgroundColor: tableScrollThumbBg,
  37. borderRadius: 100,
  38. transition: `all ${token.motionDurationSlow}, transform none`,
  39. position: 'absolute',
  40. bottom: 0,
  41. '&:hover, &-active': {
  42. backgroundColor: tableScrollThumbBgHover
  43. }
  44. }
  45. }
  46. }
  47. }
  48. };
  49. };
  50. export default genStickyStyle;