mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
4fffbea08f
* fix: Sider support cp * fix: css layout * chore: size limit
230 lines
5.6 KiB
TypeScript
230 lines
5.6 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
import { unit } from '@ant-design/cssinjs';
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
|
import { genStyleHooks } from '../../theme/internal';
|
|
|
|
export interface ComponentToken {
|
|
/** @deprecated Use headerBg instead */
|
|
colorBgHeader: string;
|
|
/** @deprecated Use bodyBg instead */
|
|
colorBgBody: string;
|
|
/** @deprecated Use triggerBg instead */
|
|
colorBgTrigger: string;
|
|
|
|
/**
|
|
* @desc 主体部分背景色
|
|
* @descEN Background Color of body
|
|
*/
|
|
bodyBg: string;
|
|
/**
|
|
* @desc 顶部背景色
|
|
* @descEN Background Color of header
|
|
*/
|
|
headerBg: string;
|
|
/**
|
|
* @desc 顶部高度
|
|
* @descEN Height of header
|
|
*/
|
|
headerHeight: number | string;
|
|
/**
|
|
* @desc 顶部内边距
|
|
* @descEN Padding of header
|
|
*/
|
|
headerPadding: CSSProperties['padding'];
|
|
/**
|
|
* @desc 顶部文字颜色
|
|
* @descEN Text color of header
|
|
*/
|
|
headerColor: string;
|
|
/**
|
|
* @desc 页脚内边距
|
|
* @descEN Padding of footer
|
|
*/
|
|
footerPadding: CSSProperties['padding'];
|
|
/**
|
|
* @desc 页脚背景色
|
|
* @descEN Background Color of footer
|
|
*/
|
|
footerBg: string;
|
|
/**
|
|
* @desc 侧边栏背景色
|
|
* @descEN Background Color of sider
|
|
*/
|
|
siderBg: string;
|
|
/**
|
|
* @desc 侧边栏开关高度
|
|
* @descEN Height of sider trigger
|
|
*/
|
|
triggerHeight: number | string;
|
|
/**
|
|
* @desc 侧边栏开关背景色
|
|
* @descEN Background Color of sider trigger
|
|
*/
|
|
triggerBg: string;
|
|
/**
|
|
* @desc 侧边栏开关颜色
|
|
* @descEN Color of sider trigger
|
|
*/
|
|
triggerColor: string;
|
|
/**
|
|
* @desc collapse 为 0 时侧边栏开关宽度
|
|
* @descEN Width of sider trigger when collapse is 0
|
|
*/
|
|
zeroTriggerWidth: number;
|
|
/**
|
|
* @desc collapse 为 0 时侧边栏开关高度
|
|
* @descEN Height of sider trigger when collapse is 0
|
|
*/
|
|
zeroTriggerHeight: number;
|
|
/**
|
|
* @desc 亮色主题侧边栏背景色
|
|
* @descEN Background Color of light theme sider
|
|
*/
|
|
lightSiderBg: string;
|
|
/**
|
|
* @desc 亮色主题侧边栏开关背景色
|
|
* @descEN Background Color of light theme sider trigger
|
|
*/
|
|
lightTriggerBg: string;
|
|
/**
|
|
* @desc 亮色主题侧边栏开关颜色
|
|
* @descEN Color of light theme sider trigger
|
|
*/
|
|
lightTriggerColor: string;
|
|
}
|
|
|
|
export interface LayoutToken extends FullToken<'Layout'> {}
|
|
|
|
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|
const {
|
|
antCls, // .ant
|
|
componentCls, // .ant-layout
|
|
colorText,
|
|
footerBg,
|
|
headerHeight,
|
|
headerPadding,
|
|
headerColor,
|
|
footerPadding,
|
|
fontSize,
|
|
bodyBg,
|
|
headerBg,
|
|
} = token;
|
|
|
|
return {
|
|
[componentCls]: {
|
|
display: 'flex',
|
|
flex: 'auto',
|
|
flexDirection: 'column',
|
|
|
|
/* fix firefox can't set height smaller than content on flex item */
|
|
minHeight: 0,
|
|
background: bodyBg,
|
|
|
|
'&, *': {
|
|
boxSizing: 'border-box',
|
|
},
|
|
|
|
[`&${componentCls}-has-sider`]: {
|
|
flexDirection: 'row',
|
|
[`> ${componentCls}, > ${componentCls}-content`]: {
|
|
// https://segmentfault.com/a/1190000019498300
|
|
width: 0,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-header, &${componentCls}-footer`]: {
|
|
flex: '0 0 auto',
|
|
},
|
|
|
|
// RTL
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
},
|
|
},
|
|
|
|
// ==================== Header ====================
|
|
[`${componentCls}-header`]: {
|
|
height: headerHeight,
|
|
padding: headerPadding,
|
|
color: headerColor,
|
|
lineHeight: unit(headerHeight),
|
|
background: headerBg,
|
|
|
|
// Other components/menu/style/index.less line:686
|
|
// Integration with header element so menu items have the same height
|
|
[`${antCls}-menu`]: {
|
|
lineHeight: 'inherit',
|
|
},
|
|
},
|
|
|
|
// ==================== Footer ====================
|
|
[`${componentCls}-footer`]: {
|
|
padding: footerPadding,
|
|
color: colorText,
|
|
fontSize,
|
|
background: footerBg,
|
|
},
|
|
|
|
// =================== Content ====================
|
|
[`${componentCls}-content`]: {
|
|
flex: 'auto',
|
|
color: colorText,
|
|
|
|
// fix firefox can't set height smaller than content on flex item
|
|
minHeight: 0,
|
|
},
|
|
};
|
|
};
|
|
|
|
export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
|
|
const {
|
|
colorBgLayout,
|
|
controlHeight,
|
|
controlHeightLG,
|
|
colorText,
|
|
controlHeightSM,
|
|
marginXXS,
|
|
colorTextLightSolid,
|
|
colorBgContainer,
|
|
} = token;
|
|
|
|
const paddingInline = controlHeightLG * 1.25;
|
|
|
|
return {
|
|
// Deprecated
|
|
colorBgHeader: '#001529',
|
|
colorBgBody: colorBgLayout,
|
|
colorBgTrigger: '#002140',
|
|
|
|
bodyBg: colorBgLayout,
|
|
headerBg: '#001529',
|
|
headerHeight: controlHeight * 2,
|
|
headerPadding: `0 ${paddingInline}px`,
|
|
headerColor: colorText,
|
|
footerPadding: `${controlHeightSM}px ${paddingInline}px`,
|
|
footerBg: colorBgLayout,
|
|
siderBg: '#001529',
|
|
triggerHeight: controlHeightLG + marginXXS * 2,
|
|
triggerBg: '#002140',
|
|
triggerColor: colorTextLightSolid,
|
|
zeroTriggerWidth: controlHeightLG,
|
|
zeroTriggerHeight: controlHeightLG,
|
|
lightSiderBg: colorBgContainer,
|
|
lightTriggerBg: colorBgContainer,
|
|
lightTriggerColor: colorText,
|
|
};
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][] = [
|
|
['colorBgBody', 'bodyBg'],
|
|
['colorBgHeader', 'headerBg'],
|
|
['colorBgTrigger', 'triggerBg'],
|
|
];
|
|
|
|
export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
|
|
deprecatedTokens: DEPRECATED_TOKENS,
|
|
});
|