sticky.js 1.5 KB

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