ant-design/components/style/index.ts
MadCcc 441ba5f5d1
fix: component style without hash (#46609)
* fix: Select style without hash

* fix: common style logic

* fix: lint

* fix: menu style

* chore: update checkbox demo

* chore: fix test

* chore: rm test
2024-01-30 11:08:02 +08:00

147 lines
3.6 KiB
TypeScript

/* eslint-disable import/prefer-default-export */
import { unit, type CSSObject } from '@ant-design/cssinjs';
import type { AliasToken, DerivativeToken } from '../theme/internal';
export { operationUnit } from './operationUnit';
export const textEllipsis: CSSObject = {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
};
export const resetComponent = (
token: DerivativeToken,
needInheritFontFamily = false,
): CSSObject => ({
boxSizing: 'border-box',
margin: 0,
padding: 0,
color: token.colorText,
fontSize: token.fontSize,
// font-variant: @font-variant-base;
lineHeight: token.lineHeight,
listStyle: 'none',
// font-feature-settings: @font-feature-settings-base;
fontFamily: needInheritFontFamily ? 'inherit' : token.fontFamily,
});
export const resetIcon = (): CSSObject => ({
display: 'inline-flex',
alignItems: 'center',
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',
},
});
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: '""',
},
});
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',
},
},
});
export const genCommonStyle = (
token: DerivativeToken,
componentPrefixCls: string,
rootCls?: string,
): CSSObject => {
const { fontFamily, fontSize } = token;
const prefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
const rootPrefixSelector = rootCls ? `.${rootCls}` : prefixSelector;
return {
[rootPrefixSelector]: {
fontFamily,
fontSize,
boxSizing: 'border-box',
'&::before, &::after': {
boxSizing: 'border-box',
},
[prefixSelector]: {
boxSizing: 'border-box',
'&::before, &::after': {
boxSizing: 'border-box',
},
},
},
};
};
export const genFocusOutline = (token: AliasToken): CSSObject => ({
outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
outlineOffset: 1,
transition: 'outline-offset 0s, outline 0s',
});
export const genFocusStyle = (token: DerivativeToken): CSSObject => ({
'&:focus-visible': {
...genFocusOutline(token),
},
});