ant-design/components/breadcrumb/style/index.tsx
二货机器人 de2992f96f
chore: move path (#36243)
* chore: base move

* chore: all path

* chore: fix script
2022-06-27 14:25:59 +08:00

102 lines
2.6 KiB
TypeScript

// deps-lint-skip-all
import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
breadcrumbBaseColor: string;
breadcrumbFontSize: number;
breadcrumbIconFontSize: number;
breadcrumbLinkColor: string;
breadcrumbLinkColorHover: string;
breadcrumbLastItemColor: string;
breadcrumbSeparatorMargin: number;
breadcrumbSeparatorColor: string;
}
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
const { componentCls, iconCls } = token;
return {
[componentCls]: {
...resetComponent(token),
color: token.breadcrumbBaseColor,
fontSize: token.breadcrumbFontSize,
[iconCls]: {
fontSize: token.breadcrumbIconFontSize,
},
ol: {
display: 'flex',
flexWrap: 'wrap',
margin: 0,
padding: 0,
listStyle: 'none',
},
a: {
color: token.breadcrumbLinkColor,
transition: `color ${token.motionDurationSlow}`,
'&:hover': {
color: token.breadcrumbLinkColorHover,
},
},
'li:last-child': {
color: token.breadcrumbLastItemColor,
a: {
color: token.breadcrumbLastItemColor,
},
},
[`li:last-child ${componentCls}-separator`]: {
display: 'none',
},
[`${componentCls}-separator`]: {
marginInline: token.breadcrumbSeparatorMargin,
color: token.breadcrumbSeparatorColor,
},
[`${componentCls}-link`]: {
[`
> ${iconCls} + span,
> ${iconCls} + a
`]: {
marginInlineStart: token.marginXXS,
},
},
[`${componentCls}-overlay-link`]: {
[`> ${iconCls}`]: {
marginInlineStart: token.marginXXS,
},
},
// rtl style
[`&${token.componentCls}-rtl`]: {
direction: 'rtl',
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook('Breadcrumb', token => {
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
breadcrumbBaseColor: token.colorTextSecondary,
breadcrumbFontSize: token.fontSizeBase,
breadcrumbIconFontSize: token.fontSizeBase,
breadcrumbLinkColor: token.colorTextSecondary,
breadcrumbLinkColorHover: token.colorText,
breadcrumbLastItemColor: token.colorText,
breadcrumbSeparatorMargin: token.paddingXS,
breadcrumbSeparatorColor: token.colorTextSecondary,
});
return [genBreadcrumbStyle(BreadcrumbToken)];
});