ant-design/components/style/compact-item-vertical.tsx
Yuki Zhang 977a9a92ff
Fix the issue where the clear icon does not show when hovering over the Select series component under the Space component. (#39468)
* fix: Fix the problem that the clear icon is not displayed when the Select series component hovers under the Space component

* refactor: 修改 Space.Compact css 优先级以及简化调用

* refactor: 修改 Space.Compact 垂直方向 css 优先级以及简化调用

* docs: 添加注释

* fix: lint

* test: update snapshot

* test: update snapshot
2022-12-12 16:36:46 +08:00

57 lines
1.4 KiB
TypeScript

/* eslint-disable import/prefer-default-export */
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken, FullToken } from '../theme/internal';
import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
return {
// border collapse
'&-item:not(&-last-item)': {
marginBottom: -token.lineWidth,
},
'&-item': {
'&:hover,&:focus,&:active': {
zIndex: 2,
},
'&[disabled]': {
zIndex: 0,
},
},
};
}
function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
return {
'&-item:not(&-first-item):not(&-last-item)': {
borderRadius: 0,
},
'&-item&-first-item:not(&-last-item)': {
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
borderEndEndRadius: 0,
borderEndStartRadius: 0,
},
},
'&-item&-last-item:not(&-first-item)': {
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
borderStartStartRadius: 0,
borderStartEndRadius: 0,
},
},
};
}
export function genCompactItemVerticalStyle<T extends OverrideComponent>(
token: FullToken<T>,
): CSSInterpolation {
return {
[`${token.componentCls}-compact-vertical`]: {
...compactItemVerticalBorder(token),
...compactItemBorderVerticalRadius(token.componentCls),
},
};
}