mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
f67abe4105
* feat: pagination support cssVar * feat: optimize code * Update check-cssinjs.tsx Signed-off-by: lijianan <574980606@qq.com> * feat: pagination css var * chore: code clean * chore: update snapshot --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
|
|
import type { PaginationToken } from '.';
|
|
import { prepareComponentToken, prepareToken } from '.';
|
|
import type { GenerateStyle } from '../../theme/interface';
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
|
|
const { componentCls } = token;
|
|
|
|
return {
|
|
[`${componentCls}${componentCls}-bordered${componentCls}-disabled:not(${componentCls}-mini)`]: {
|
|
'&, &:hover': {
|
|
[`${componentCls}-item-link`]: {
|
|
borderColor: token.colorBorder,
|
|
},
|
|
},
|
|
|
|
'&:focus-visible': {
|
|
[`${componentCls}-item-link`]: {
|
|
borderColor: token.colorBorder,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-item, ${componentCls}-item-link`]: {
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
borderColor: token.colorBorder,
|
|
|
|
[`&:hover:not(${componentCls}-item-active)`]: {
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
borderColor: token.colorBorder,
|
|
|
|
a: {
|
|
color: token.colorTextDisabled,
|
|
},
|
|
},
|
|
|
|
[`&${componentCls}-item-active`]: {
|
|
backgroundColor: token.itemActiveBgDisabled,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
|
'&:hover button': {
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
borderColor: token.colorBorder,
|
|
color: token.colorTextDisabled,
|
|
},
|
|
|
|
[`${componentCls}-item-link`]: {
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
borderColor: token.colorBorder,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${componentCls}${componentCls}-bordered:not(${componentCls}-mini)`]: {
|
|
[`${componentCls}-prev, ${componentCls}-next`]: {
|
|
'&:hover button': {
|
|
borderColor: token.colorPrimaryHover,
|
|
backgroundColor: token.itemBg,
|
|
},
|
|
|
|
[`${componentCls}-item-link`]: {
|
|
backgroundColor: token.itemLinkBg,
|
|
borderColor: token.colorBorder,
|
|
},
|
|
|
|
[`&:hover ${componentCls}-item-link`]: {
|
|
borderColor: token.colorPrimary,
|
|
backgroundColor: token.itemBg,
|
|
color: token.colorPrimary,
|
|
},
|
|
|
|
[`&${componentCls}-disabled`]: {
|
|
[`${componentCls}-item-link`]: {
|
|
borderColor: token.colorBorder,
|
|
color: token.colorTextDisabled,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-item`]: {
|
|
backgroundColor: token.itemBg,
|
|
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
|
|
|
|
[`&:hover:not(${componentCls}-item-active)`]: {
|
|
borderColor: token.colorPrimary,
|
|
backgroundColor: token.itemBg,
|
|
|
|
a: {
|
|
color: token.colorPrimary,
|
|
},
|
|
},
|
|
|
|
'&-active': {
|
|
borderColor: token.colorPrimary,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export default genSubStyleComponent(
|
|
['Pagination', 'bordered'],
|
|
(token) => {
|
|
const paginationToken = prepareToken(token);
|
|
|
|
return [genBorderedStyle(paginationToken)];
|
|
},
|
|
prepareComponentToken,
|
|
);
|