mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-11 10:05:07 +08:00
40944a1c02
* chore: add parent selector * chore: update lint script * chore: code clean * perf: style * chore: remove demo test cssinjs * fix: input group
167 lines
4.9 KiB
TypeScript
167 lines
4.9 KiB
TypeScript
import type { CSSObject } from '@ant-design/cssinjs';
|
|
import type { SelectToken } from '.';
|
|
import {
|
|
initMoveMotion,
|
|
initSlideMotion,
|
|
slideDownIn,
|
|
slideDownOut,
|
|
slideUpIn,
|
|
slideUpOut,
|
|
} from '../../style/motion';
|
|
import type { GenerateStyle } from '../../theme/internal';
|
|
import { resetComponent, textEllipsis } from '../../style';
|
|
|
|
const genItemStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
|
|
const { controlPaddingHorizontal } = token;
|
|
|
|
return {
|
|
position: 'relative',
|
|
display: 'block',
|
|
minHeight: token.controlHeight,
|
|
padding: `${
|
|
(token.controlHeight - token.fontSize * token.lineHeight) / 2
|
|
}px ${controlPaddingHorizontal}px`,
|
|
color: token.colorText,
|
|
fontWeight: 'normal',
|
|
fontSize: token.fontSize,
|
|
lineHeight: token.lineHeight,
|
|
boxSizing: 'border-box',
|
|
};
|
|
};
|
|
|
|
const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
|
const { antCls, componentCls } = token;
|
|
|
|
const selectItemCls = `${componentCls}-item`;
|
|
|
|
return [
|
|
{
|
|
[`${componentCls}-dropdown`]: {
|
|
// ========================== Popup ==========================
|
|
...resetComponent(token),
|
|
|
|
position: 'absolute',
|
|
top: -9999,
|
|
zIndex: token.zIndexPopup,
|
|
boxSizing: 'border-box',
|
|
padding: token.paddingXXS,
|
|
overflow: 'hidden',
|
|
fontSize: token.fontSize,
|
|
// Fix select render lag of long text in chrome
|
|
// https://github.com/ant-design/ant-design/issues/11456
|
|
// https://github.com/ant-design/ant-design/issues/11843
|
|
fontVariant: 'initial',
|
|
backgroundColor: token.colorBgElevated,
|
|
borderRadius: token.borderRadiusLG,
|
|
outline: 'none',
|
|
boxShadow: token.boxShadowSecondary,
|
|
|
|
[`
|
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
|
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft
|
|
`]: {
|
|
animationName: slideUpIn,
|
|
},
|
|
|
|
[`
|
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
|
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft
|
|
`]: {
|
|
animationName: slideDownIn,
|
|
},
|
|
|
|
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft`]:
|
|
{
|
|
animationName: slideUpOut,
|
|
},
|
|
|
|
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft`]:
|
|
{
|
|
animationName: slideDownOut,
|
|
},
|
|
|
|
'&-hidden': {
|
|
display: 'none',
|
|
},
|
|
|
|
'&-empty': {
|
|
color: token.colorTextDisabled,
|
|
},
|
|
|
|
// ========================= Options =========================
|
|
[`${selectItemCls}-empty`]: {
|
|
...genItemStyle(token),
|
|
color: token.colorTextDisabled,
|
|
},
|
|
|
|
[`${selectItemCls}`]: {
|
|
...genItemStyle(token),
|
|
cursor: 'pointer',
|
|
transition: `background ${token.motionDurationSlow} ease`,
|
|
borderRadius: token.borderRadiusSM,
|
|
|
|
// =========== Group ============
|
|
'&-group': {
|
|
color: token.colorTextDescription,
|
|
fontSize: token.fontSizeSM,
|
|
cursor: 'default',
|
|
},
|
|
|
|
// =========== Option ===========
|
|
'&-option': {
|
|
display: 'flex',
|
|
|
|
'&-content': {
|
|
flex: 'auto',
|
|
...textEllipsis,
|
|
},
|
|
|
|
'&-state': {
|
|
flex: 'none',
|
|
},
|
|
|
|
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
|
backgroundColor: token.controlItemBgHover,
|
|
},
|
|
|
|
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
|
color: token.colorText,
|
|
fontWeight: token.fontWeightStrong,
|
|
backgroundColor: token.controlItemBgActive,
|
|
|
|
[`${selectItemCls}-option-state`]: {
|
|
color: token.colorPrimary,
|
|
},
|
|
},
|
|
'&-disabled': {
|
|
[`&${selectItemCls}-option-selected`]: {
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
},
|
|
|
|
color: token.colorTextDisabled,
|
|
cursor: 'not-allowed',
|
|
},
|
|
|
|
'&-grouped': {
|
|
paddingInlineStart: token.controlPaddingHorizontal * 2,
|
|
},
|
|
},
|
|
},
|
|
|
|
// =========================== RTL ===========================
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
},
|
|
},
|
|
},
|
|
|
|
// Follow code may reuse in other components
|
|
initSlideMotion(token, 'slide-up'),
|
|
initSlideMotion(token, 'slide-down'),
|
|
initMoveMotion(token, 'move-up'),
|
|
initMoveMotion(token, 'move-down'),
|
|
];
|
|
};
|
|
|
|
export default genSingleStyle;
|