ant-design/components/table/style/sticky.ts
MadCcc 5465975b1a
feat: table component token (#44118)
* feat: table component token

* chore: add typedoc
2023-08-09 10:52:39 +08:00

61 lines
1.7 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/internal';
import type { TableToken } from './index';
const genStickyStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
const {
componentCls,
opacityLoading,
tableScrollThumbBg,
tableScrollThumbBgHover,
tableScrollThumbSize,
tableScrollBg,
zIndexTableSticky,
stickyScrollBarBorderRadius,
} = token;
const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
return {
[`${componentCls}-wrapper`]: {
[`${componentCls}-sticky`]: {
'&-holder': {
position: 'sticky',
zIndex: zIndexTableSticky,
background: token.colorBgContainer,
},
'&-scroll': {
position: 'sticky',
bottom: 0,
height: `${tableScrollThumbSize}px !important`,
zIndex: zIndexTableSticky,
display: 'flex',
alignItems: 'center',
background: tableScrollBg,
borderTop: tableBorder,
opacity: opacityLoading,
'&:hover': {
transformOrigin: 'center bottom',
},
// fake scrollbar style of sticky
'&-bar': {
height: tableScrollThumbSize,
backgroundColor: tableScrollThumbBg,
borderRadius: stickyScrollBarBorderRadius,
transition: `all ${token.motionDurationSlow}, transform none`,
position: 'absolute',
bottom: 0,
'&:hover, &-active': {
backgroundColor: tableScrollThumbBgHover,
},
},
},
},
},
};
};
export default genStickyStyle;