ant-design/components/cascader/style/panel.ts
二货爱吃白萝卜 7e692ad585
feat: Cascader.Panel support (#45089)
* chore: init

* chore: panel style

* docs: update demo

* chore: fill style

* test: update snapshot

* docs: update demo

* chore: push

* docs: update desc

* chore: fix icons

* chore: use shared hooks

* test: update snapshot

* chore: fix lint
2023-09-26 17:34:49 +08:00

42 lines
1.1 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import { prepareComponentToken, type CascaderToken } from '.';
import { genComponentStyleHook, type GenerateStyle } from '../../theme/internal';
import getColumnsStyle from './columns';
// ============================== Panel ===============================
const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSObject => {
const { componentCls } = token;
return {
[`${componentCls}-panel`]: [
getColumnsStyle(token),
{
display: 'inline-flex',
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
borderRadius: token.borderRadiusLG,
overflowX: 'auto',
maxWidth: '100%',
[`${componentCls}-menus`]: {
alignItems: 'stretch',
},
[`${componentCls}-menu`]: {
height: 'auto',
},
'&-empty': {
padding: token.paddingXXS,
},
},
],
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
['Cascader', 'Panel'],
(token) => genPanelStyle(token),
prepareComponentToken,
);