You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
import type { CSSObject } from '../../_util/cssinjs';
|
|
import type { GenerateStyle } from '../../theme/internal';
|
|
import type { TableToken } from './index';
|
|
|
|
const genSorterStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
|
const { componentCls, marginXXS, fontSizeIcon, tableHeaderIconColor, tableHeaderIconColorHover } =
|
|
token;
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
[`${componentCls}-thead th${componentCls}-column-has-sorters`]: {
|
|
outline: 'none',
|
|
cursor: 'pointer',
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
'&:hover': {
|
|
background: token.tableHeaderSortHoverBg,
|
|
|
|
'&::before': {
|
|
backgroundColor: 'transparent !important',
|
|
},
|
|
},
|
|
|
|
'&:focus-visible': {
|
|
color: token.colorPrimary,
|
|
},
|
|
|
|
// https://github.com/ant-design/ant-design/issues/30969
|
|
[`
|
|
&${componentCls}-cell-fix-left:hover,
|
|
&${componentCls}-cell-fix-right:hover
|
|
`]: {
|
|
background: token.tableFixedHeaderSortActiveBg,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-thead th${componentCls}-column-sort`]: {
|
|
background: token.tableHeaderSortBg,
|
|
|
|
'&::before': {
|
|
backgroundColor: 'transparent !important',
|
|
},
|
|
},
|
|
|
|
[`td${componentCls}-column-sort`]: {
|
|
background: token.tableBodySortBg,
|
|
},
|
|
|
|
[`${componentCls}-column-title`]: {
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
flex: 1,
|
|
},
|
|
|
|
[`${componentCls}-column-sorters`]: {
|
|
display: 'flex',
|
|
flex: 'auto',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
|
|
'&::after': {
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
content: '""',
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-column-sorter`]: {
|
|
marginInlineStart: marginXXS,
|
|
color: tableHeaderIconColor,
|
|
fontSize: 0,
|
|
transition: `color ${token.motionDurationSlow}`,
|
|
|
|
'&-inner': {
|
|
display: 'inline-flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
'&-up, &-down': {
|
|
fontSize: fontSizeIcon,
|
|
|
|
'&.active': {
|
|
color: token.colorPrimary,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-column-sorter-up + ${componentCls}-column-sorter-down`]: {
|
|
marginTop: '-0.3em',
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-column-sorters:hover ${componentCls}-column-sorter`]: {
|
|
color: tableHeaderIconColorHover,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export default genSorterStyle;
|