2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
2022-08-10 17:16:46 +08:00
|
|
|
import { resetComponent } from '../../style';
|
2022-03-08 10:29:00 +08:00
|
|
|
import type { SelectToken } from '.';
|
2022-11-23 20:22:38 +08:00
|
|
|
import { mergeToken } from '../../theme/internal';
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
2022-11-01 15:06:38 +08:00
|
|
|
const { componentCls, inputPaddingHorizontalBase, borderRadius } = token;
|
2022-03-08 10:29:00 +08:00
|
|
|
|
2022-11-01 15:06:38 +08:00
|
|
|
const selectHeightWithoutBorder = token.controlHeight - token.lineWidth * 2;
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-single${suffixCls}`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
fontSize: token.fontSize,
|
|
|
|
|
|
|
|
// ========================= Selector =========================
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selector`]: {
|
2022-08-10 17:16:46 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
|
2022-03-08 10:29:00 +08:00
|
|
|
display: 'flex',
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius,
|
2022-08-19 10:10:51 +08:00
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-search`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
2022-03-11 17:07:16 +08:00
|
|
|
insetInlineStart: inputPaddingHorizontalBase,
|
|
|
|
insetInlineEnd: inputPaddingHorizontalBase,
|
2022-03-08 10:29:00 +08:00
|
|
|
bottom: 0,
|
|
|
|
|
|
|
|
'&-input': {
|
|
|
|
width: '100%',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`
|
2022-04-07 12:20:34 +08:00
|
|
|
${componentCls}-selection-item,
|
|
|
|
${componentCls}-selection-placeholder
|
2022-03-08 10:29:00 +08:00
|
|
|
`]: {
|
|
|
|
padding: 0,
|
|
|
|
lineHeight: `${selectHeightWithoutBorder}px`,
|
2023-04-10 13:11:51 +08:00
|
|
|
transition: `all ${token.motionDurationSlow}, visibility 0s`,
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
|
2022-11-19 21:49:11 +08:00
|
|
|
'@supports (-moz-appearance: meterbar)': {
|
2022-03-08 10:29:00 +08:00
|
|
|
lineHeight: `${selectHeightWithoutBorder}px`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-item`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
position: 'relative',
|
|
|
|
userSelect: 'none',
|
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-placeholder`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
transition: 'none',
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
// For common baseline align
|
|
|
|
[[
|
|
|
|
'&:after',
|
|
|
|
/* For '' value baseline align */
|
2022-04-07 12:20:34 +08:00
|
|
|
`${componentCls}-selection-item:after`,
|
2022-03-08 10:29:00 +08:00
|
|
|
/* For undefined value baseline align */
|
2022-04-07 12:20:34 +08:00
|
|
|
`${componentCls}-selection-placeholder:after`,
|
2022-03-08 10:29:00 +08:00
|
|
|
].join(',')]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
width: 0,
|
|
|
|
visibility: 'hidden',
|
|
|
|
content: '"\\a0"',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`
|
2022-04-07 12:20:34 +08:00
|
|
|
&${componentCls}-show-arrow ${componentCls}-selection-item,
|
|
|
|
&${componentCls}-show-arrow ${componentCls}-selection-placeholder
|
2022-03-08 10:29:00 +08:00
|
|
|
`]: {
|
|
|
|
paddingInlineEnd: selectionItemPadding,
|
|
|
|
},
|
|
|
|
|
|
|
|
// Opacity selection if open
|
2022-04-07 12:20:34 +08:00
|
|
|
[`&${componentCls}-open ${componentCls}-selection-item`]: {
|
2022-06-17 18:47:47 +08:00
|
|
|
color: token.colorTextPlaceholder,
|
2022-03-08 10:29:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// ========================== Input ==========================
|
|
|
|
// We only change the style of non-customize input which is only support by `combobox` mode.
|
|
|
|
// Not customize
|
2022-04-07 12:20:34 +08:00
|
|
|
[`&:not(${componentCls}-customize-input)`]: {
|
|
|
|
[`${componentCls}-selector`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
width: '100%',
|
|
|
|
height: token.controlHeight,
|
|
|
|
padding: `0 ${inputPaddingHorizontalBase}px`,
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-search-input`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
height: selectHeightWithoutBorder,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:after': {
|
|
|
|
lineHeight: `${selectHeightWithoutBorder}px`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`&${componentCls}-customize-input`]: {
|
|
|
|
[`${componentCls}-selector`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
'&:after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-search`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
position: 'static',
|
|
|
|
width: '100%',
|
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selection-placeholder`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
position: 'absolute',
|
2022-03-11 17:07:16 +08:00
|
|
|
insetInlineStart: 0,
|
|
|
|
insetInlineEnd: 0,
|
2022-03-08 10:29:00 +08:00
|
|
|
padding: `0 ${inputPaddingHorizontalBase}px`,
|
|
|
|
|
|
|
|
'&:after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
2022-04-07 12:20:34 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-08 10:29:00 +08:00
|
|
|
|
2022-11-01 15:06:38 +08:00
|
|
|
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.lineWidth;
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
return [
|
|
|
|
genSizeStyle(token),
|
|
|
|
|
|
|
|
// ======================== Small ========================
|
|
|
|
// Shared
|
|
|
|
genSizeStyle(
|
2022-04-11 16:04:00 +08:00
|
|
|
mergeToken<any>(token, {
|
2022-03-08 10:29:00 +08:00
|
|
|
controlHeight: token.controlHeightSM,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-04-11 16:04:00 +08:00
|
|
|
}),
|
2022-03-08 10:29:00 +08:00
|
|
|
'sm',
|
|
|
|
),
|
|
|
|
|
|
|
|
// padding
|
|
|
|
{
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-single${componentCls}-sm`]: {
|
|
|
|
[`&:not(${componentCls}-customize-input)`]: {
|
|
|
|
[`${componentCls}-selection-search`]: {
|
2022-03-11 17:07:16 +08:00
|
|
|
insetInlineStart: inputPaddingHorizontalSM,
|
|
|
|
insetInlineEnd: inputPaddingHorizontalSM,
|
2022-03-08 10:29:00 +08:00
|
|
|
},
|
|
|
|
|
2022-04-07 12:20:34 +08:00
|
|
|
[`${componentCls}-selector`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
padding: `0 ${inputPaddingHorizontalSM}px`,
|
|
|
|
},
|
|
|
|
|
|
|
|
// With arrow should provides `padding-right` to show the arrow
|
2022-04-07 12:20:34 +08:00
|
|
|
[`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
|
2022-03-08 10:29:00 +08:00
|
|
|
insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`
|
2022-04-07 12:20:34 +08:00
|
|
|
&${componentCls}-show-arrow ${componentCls}-selection-item,
|
|
|
|
&${componentCls}-show-arrow ${componentCls}-selection-placeholder
|
2022-03-08 10:29:00 +08:00
|
|
|
`]: {
|
|
|
|
paddingInlineEnd: token.fontSize * 1.5,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ======================== Large ========================
|
|
|
|
// Shared
|
|
|
|
genSizeStyle(
|
2022-04-11 16:04:00 +08:00
|
|
|
mergeToken<any>(token, {
|
2022-03-08 10:29:00 +08:00
|
|
|
controlHeight: token.controlHeightLG,
|
|
|
|
fontSize: token.fontSizeLG,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
2022-04-11 16:04:00 +08:00
|
|
|
}),
|
2022-03-08 10:29:00 +08:00
|
|
|
'lg',
|
|
|
|
),
|
|
|
|
];
|
|
|
|
}
|