ant-design/components/style/compact-item.tsx
MadCcc 9f88c1238a
feat: token update (#38314)
* feat: token update

* chore: update test

* chore: lint

* chore: code clean

* test: update test case

* feat: radius token update

* fix: form size

* chore: fix steps style

* chore: code clean

* chore: update test case
2022-11-01 15:06:38 +08:00

82 lines
2.1 KiB
TypeScript

/* eslint-disable import/prefer-default-export */
import type { CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken } from '../theme';
// handle border collapse
function compactItemBorder(
token: DerivativeToken,
borderedItemCls?: string,
popoverFocusedCls?: string,
): CSSObject {
const childCombinator = borderedItemCls ? '> *' : '';
return {
'&-item:not(&-last-item)': {
marginInlineEnd: -token.lineWidth,
},
'&-item': {
[`&:hover ${childCombinator}, &:focus ${childCombinator}, &:active ${childCombinator}`]: {
zIndex: 2,
},
...(popoverFocusedCls
? {
[`&${popoverFocusedCls}`]: {
zIndex: 2,
},
}
: {}),
[`&[disabled] ${childCombinator}`]: {
zIndex: 0,
},
},
};
}
// handle border-radius
function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string): CSSObject {
const childCombinator = borderedElementCls ? `> ${borderedElementCls}` : '';
return {
[`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: {
borderRadius: 0,
},
'&-item&-first-item': {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
},
'&-item&-last-item': {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{
borderStartStartRadius: 0,
borderEndStartRadius: 0,
},
},
};
}
export function genCompactItemStyle(
token: DerivativeToken,
prefixCls: string,
/** Some component borders are implemented on child elements like `Select` */
borderedElementCls?: string,
/**
* Some components have special `focus` className especially with popovers like `Select` and
* `DatePicker`
*/
popoverFocusedCls?: string,
): CSSObject {
return {
'&-compact': {
...compactItemBorder(token, borderedElementCls, popoverFocusedCls),
...compactItemBorderRadius(prefixCls, borderedElementCls),
},
};
}