antd
Version:
An enterprise-class UI design language and React components implementation
99 lines • 3.06 kB
JavaScript
import { unit } from '@ant-design/cssinjs';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { textEllipsis } from '../../style';
const getColumnsStyle = token => {
const {
prefixCls,
componentCls
} = token;
const cascaderMenuItemCls = `${componentCls}-menu-item`;
const iconCls = `
&${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
${cascaderMenuItemCls}-loading-icon
`;
return [
// ==================== Checkbox ====================
getCheckboxStyle(`${prefixCls}-checkbox`, token), {
[componentCls]: {
// ================== Checkbox ==================
'&-checkbox': {
top: 0,
marginInlineEnd: token.paddingXS
},
// ==================== Menu ====================
// >>> Menus
'&-menus': {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'flex-start',
[`&${componentCls}-menu-empty`]: {
[`${componentCls}-menu`]: {
width: '100%',
height: 'auto',
[cascaderMenuItemCls]: {
color: token.colorTextDisabled
}
}
}
},
// >>> Menu
'&-menu': {
flexGrow: 1,
flexShrink: 0,
minWidth: token.controlItemWidth,
height: token.dropdownHeight,
margin: 0,
padding: token.menuPadding,
overflow: 'auto',
verticalAlign: 'top',
listStyle: 'none',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
// https://github.com/ant-design/ant-design/issues/11857
'&:not(:last-child)': {
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
},
'&-item': Object.assign(Object.assign({}, textEllipsis), {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
padding: token.optionPadding,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${token.motionDurationMid}`,
borderRadius: token.borderRadiusSM,
'&:hover': {
background: token.controlItemBgHover
},
'&-disabled': {
color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:hover': {
background: 'transparent'
},
[iconCls]: {
color: token.colorTextDisabled
}
},
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
'&, &:hover': {
fontWeight: token.optionSelectedFontWeight,
backgroundColor: token.optionSelectedBg
}
},
'&-content': {
flex: 'auto'
},
[iconCls]: {
marginInlineStart: token.paddingXXS,
color: token.colorTextDescription,
fontSize: token.fontSizeIcon
},
'&-keyword': {
color: token.colorHighlight
}
})
}
}
}];
};
export default getColumnsStyle;