You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.1 KiB
81 lines
2.1 KiB
/* 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),
|
|
},
|
|
};
|
|
}
|
|
|