2022-03-08 10:29:00 +08:00
|
|
|
/* eslint-disable import/prefer-default-export */
|
2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-07-11 15:35:58 +08:00
|
|
|
import type { DerivativeToken } from '../theme';
|
2022-03-08 10:29:00 +08:00
|
|
|
|
2022-04-24 18:05:08 +08:00
|
|
|
export { operationUnit } from './operationUnit';
|
2022-03-25 13:20:42 +08:00
|
|
|
export { roundedArrow } from './roundedArrow';
|
|
|
|
|
2022-03-08 10:29:00 +08:00
|
|
|
export const resetComponent = (token: DerivativeToken): CSSObject => ({
|
|
|
|
boxSizing: 'border-box',
|
|
|
|
margin: 0,
|
|
|
|
padding: 0,
|
2022-03-22 09:37:37 +08:00
|
|
|
color: token.colorText,
|
2022-03-08 10:29:00 +08:00
|
|
|
fontSize: token.fontSize,
|
|
|
|
// font-variant: @font-variant-base;
|
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
listStyle: 'none',
|
|
|
|
// font-feature-settings: @font-feature-settings-base;
|
2022-09-15 11:37:10 +08:00
|
|
|
fontFamily: token.fontFamily,
|
2022-03-08 10:29:00 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
export const resetIcon = (): CSSObject => ({
|
2022-03-25 17:54:57 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'center',
|
2022-03-08 10:29:00 +08:00
|
|
|
color: 'inherit',
|
|
|
|
fontStyle: 'normal',
|
|
|
|
lineHeight: 0,
|
|
|
|
textAlign: 'center',
|
|
|
|
textTransform: 'none',
|
|
|
|
// for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
|
|
|
verticalAlign: '-0.125em',
|
|
|
|
textRendering: 'optimizeLegibility',
|
|
|
|
'-webkit-font-smoothing': 'antialiased',
|
|
|
|
'-moz-osx-font-smoothing': 'grayscale',
|
|
|
|
|
|
|
|
'> *': {
|
|
|
|
lineHeight: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
svg: {
|
|
|
|
display: 'inline-block',
|
|
|
|
},
|
|
|
|
|
|
|
|
'& &-icon': {
|
|
|
|
display: 'block',
|
|
|
|
},
|
|
|
|
});
|
2022-03-09 10:38:02 +08:00
|
|
|
|
|
|
|
export const clearFix = (): CSSObject => ({
|
|
|
|
// https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
|
|
|
|
'&::before': {
|
|
|
|
display: 'table',
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
// https://github.com/ant-design/ant-design/issues/21864
|
|
|
|
display: 'table',
|
|
|
|
clear: 'both',
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
});
|
2022-07-11 15:35:58 +08:00
|
|
|
|
|
|
|
export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
|
|
|
|
a: {
|
|
|
|
color: token.colorLink,
|
|
|
|
textDecoration: token.linkDecoration,
|
|
|
|
backgroundColor: 'transparent', // remove the gray background on active links in IE 10.
|
|
|
|
outline: 'none',
|
|
|
|
cursor: 'pointer',
|
|
|
|
transition: `color ${token.motionDurationSlow}`,
|
|
|
|
'-webkit-text-decoration-skip': 'objects', // remove gaps in links underline in iOS 8+ and Safari 8+.
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
color: token.colorLinkHover,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:active': {
|
|
|
|
color: token.colorLinkActive,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&:active,
|
|
|
|
&:hover`]: {
|
|
|
|
textDecoration: token.linkHoverDecoration,
|
|
|
|
outline: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/22503
|
|
|
|
'&:focus': {
|
|
|
|
textDecoration: token.linkFocusDecoration,
|
|
|
|
outline: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&[disabled]': {
|
|
|
|
color: token.colorTextDisabled,
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2022-09-09 10:53:03 +08:00
|
|
|
|
2022-10-17 21:08:44 +08:00
|
|
|
export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: string): CSSObject => {
|
2022-09-15 11:37:10 +08:00
|
|
|
const { fontFamily, fontSize } = token;
|
|
|
|
|
2022-10-17 21:08:44 +08:00
|
|
|
const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
|
2022-09-30 15:30:20 +08:00
|
|
|
|
2022-09-15 11:37:10 +08:00
|
|
|
return {
|
2022-09-30 15:30:20 +08:00
|
|
|
[rootPrefixSelector]: {
|
2022-09-15 11:37:10 +08:00
|
|
|
fontFamily,
|
|
|
|
fontSize,
|
2022-09-30 15:30:20 +08:00
|
|
|
boxSizing: 'border-box',
|
|
|
|
|
2022-10-12 17:43:22 +08:00
|
|
|
'&::before, &::after': {
|
|
|
|
boxSizing: 'border-box',
|
|
|
|
},
|
|
|
|
|
2022-09-30 15:30:20 +08:00
|
|
|
[rootPrefixSelector]: {
|
|
|
|
boxSizing: 'border-box',
|
2022-10-12 17:43:22 +08:00
|
|
|
|
|
|
|
'&::before, &::after': {
|
|
|
|
boxSizing: 'border-box',
|
|
|
|
},
|
2022-09-30 15:30:20 +08:00
|
|
|
},
|
2022-09-15 11:37:10 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-09-09 10:53:03 +08:00
|
|
|
export const genFocusOutline = (token: DerivativeToken): CSSObject => ({
|
|
|
|
outline: `${token.lineWidth * 4}px solid ${token.colorPrimaryBorder}`,
|
|
|
|
outlineOffset: 1,
|
|
|
|
transition: 'outline-offset 0s, outline 0s',
|
|
|
|
});
|
|
|
|
|
|
|
|
export const genFocusStyle = (token: DerivativeToken): CSSObject => ({
|
|
|
|
'&:focus-visible': {
|
|
|
|
...genFocusOutline(token),
|
|
|
|
},
|
|
|
|
});
|