mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import { unit } from '@ant-design/cssinjs';
|
|
|
|
import type { PaginationToken } from '.';
|
|
import { prepareComponentToken, prepareToken } from '.';
|
|
import type { GenerateStyle } from '../../theme/interface';
|
|
import { genSubStyleComponent } from '../../theme/internal';
|
|
|
|
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,
|
|
);
|