ant-design/components/drawer/style/index.ts

242 lines
5.7 KiB
TypeScript
Raw Normal View History

import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
2022-07-29 15:56:11 +08:00
import genMotionStyle from './motion';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of drawer
*/
2022-07-29 15:56:11 +08:00
zIndexPopup: number;
/**
* @desc
* @descEN Horizontal padding of footer
*/
footerPaddingBlock: number;
/**
* @desc
* @descEN Vertical padding of footer
*/
footerPaddingInline: number;
2022-03-24 23:33:51 +08:00
}
export interface DrawerToken extends FullToken<'Drawer'> {}
2022-03-24 23:33:51 +08:00
// =============================== Base ===============================
2022-07-29 15:56:11 +08:00
const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
2022-03-24 23:33:51 +08:00
const {
componentCls,
2022-07-29 15:56:11 +08:00
zIndexPopup,
colorBgMask,
colorBgElevated,
2022-03-24 23:33:51 +08:00
motionDurationSlow,
motionDurationMid,
2022-07-29 15:56:11 +08:00
padding,
2022-03-24 23:33:51 +08:00
paddingLG,
2022-07-29 15:56:11 +08:00
fontSizeLG,
lineHeightLG,
2022-03-24 23:33:51 +08:00
lineWidth,
2022-05-17 20:22:26 +08:00
lineType,
colorSplit,
2022-07-29 15:56:11 +08:00
marginSM,
colorIcon,
colorIconHover,
colorText,
fontWeightStrong,
footerPaddingBlock,
footerPaddingInline,
2022-03-24 23:33:51 +08:00
} = token;
2022-07-29 15:56:11 +08:00
const wrapperCls = `${componentCls}-content-wrapper`;
2022-03-24 23:33:51 +08:00
return {
2022-07-29 15:56:11 +08:00
[componentCls]: {
2022-03-24 23:33:51 +08:00
position: 'fixed',
2022-07-29 15:56:11 +08:00
inset: 0,
zIndex: zIndexPopup,
pointerEvents: 'none',
'&-pure': {
position: 'relative',
background: colorBgElevated,
[`&${componentCls}-left`]: {
boxShadow: token.boxShadowDrawerLeft,
},
[`&${componentCls}-right`]: {
boxShadow: token.boxShadowDrawerRight,
},
[`&${componentCls}-top`]: {
boxShadow: token.boxShadowDrawerUp,
},
[`&${componentCls}-bottom`]: {
boxShadow: token.boxShadowDrawerDown,
},
},
2022-07-29 15:56:11 +08:00
'&-inline': {
2022-03-24 23:33:51 +08:00
position: 'absolute',
},
2022-07-29 15:56:11 +08:00
// ====================== Mask ======================
[`${componentCls}-mask`]: {
2022-03-24 23:33:51 +08:00
position: 'absolute',
2022-07-29 15:56:11 +08:00
inset: 0,
zIndex: zIndexPopup,
background: colorBgMask,
pointerEvents: 'auto',
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
// ==================== Content =====================
[wrapperCls]: {
position: 'absolute',
zIndex: zIndexPopup,
maxWidth: '100vw',
2022-07-29 15:56:11 +08:00
transition: `all ${motionDurationSlow}`,
2022-03-24 23:33:51 +08:00
2022-07-29 15:56:11 +08:00
'&-hidden': {
display: 'none',
},
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
// Placement
2022-08-05 15:23:36 +08:00
[`&-left > ${wrapperCls}`]: {
2022-07-29 15:56:11 +08:00
top: 0,
bottom: 0,
left: {
_skip_check_: true,
value: 0,
},
boxShadow: token.boxShadowDrawerLeft,
2022-03-24 23:33:51 +08:00
},
2022-08-05 15:23:36 +08:00
[`&-right > ${wrapperCls}`]: {
2022-07-29 15:56:11 +08:00
top: 0,
right: {
_skip_check_: true,
value: 0,
},
bottom: 0,
boxShadow: token.boxShadowDrawerRight,
2022-03-24 23:33:51 +08:00
},
2022-08-05 15:23:36 +08:00
[`&-top > ${wrapperCls}`]: {
2022-07-29 15:56:11 +08:00
top: 0,
insetInline: 0,
boxShadow: token.boxShadowDrawerUp,
2022-07-29 15:56:11 +08:00
},
2022-08-05 15:23:36 +08:00
[`&-bottom > ${wrapperCls}`]: {
2022-07-29 15:56:11 +08:00
bottom: 0,
insetInline: 0,
boxShadow: token.boxShadowDrawerDown,
2022-07-29 15:56:11 +08:00
},
2022-03-24 23:33:51 +08:00
2022-07-29 15:56:11 +08:00
[`${componentCls}-content`]: {
2022-03-24 23:33:51 +08:00
width: '100%',
2022-07-29 15:56:11 +08:00
height: '100%',
overflow: 'auto',
background: colorBgElevated,
pointerEvents: 'auto',
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
// ===================== Panel ======================
[`${componentCls}-wrapper-body`]: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
},
2022-03-24 23:33:51 +08:00
2022-07-29 15:56:11 +08:00
// Header
[`${componentCls}-header`]: {
display: 'flex',
flex: 0,
alignItems: 'center',
padding: `${padding}px ${paddingLG}px`,
fontSize: fontSizeLG,
lineHeight: lineHeightLG,
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
'&-title': {
display: 'flex',
flex: 1,
alignItems: 'center',
minWidth: 0,
minHeight: 0,
},
},
2022-03-24 23:33:51 +08:00
2022-07-29 15:56:11 +08:00
[`${componentCls}-extra`]: {
2022-11-07 23:32:46 +08:00
flex: 'none',
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
[`${componentCls}-close`]: {
display: 'inline-block',
marginInlineEnd: marginSM,
color: colorIcon,
fontWeight: fontWeightStrong,
fontSize: fontSizeLG,
fontStyle: 'normal',
lineHeight: 1,
textAlign: 'center',
textTransform: 'none',
textDecoration: 'none',
background: 'transparent',
border: 0,
outline: 0,
cursor: 'pointer',
transition: `color ${motionDurationMid}`,
2022-07-29 15:56:11 +08:00
textRendering: 'auto',
'&:focus, &:hover': {
color: colorIconHover,
textDecoration: 'none',
},
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
[`${componentCls}-title`]: {
flex: 1,
margin: 0,
color: colorText,
fontWeight: token.fontWeightStrong,
fontSize: fontSizeLG,
lineHeight: lineHeightLG,
},
// Body
[`${componentCls}-body`]: {
flex: 1,
minWidth: 0,
minHeight: 0,
padding: paddingLG,
overflow: 'auto',
},
// Footer
[`${componentCls}-footer`]: {
flexShrink: 0,
padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
2022-07-29 15:56:11 +08:00
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
2022-03-24 23:33:51 +08:00
},
2022-07-29 15:56:11 +08:00
// ====================== RTL =======================
'&-rtl': {
direction: 'rtl',
},
2022-03-24 23:33:51 +08:00
},
};
};
// ============================== Export ==============================
2022-07-29 15:56:11 +08:00
export default genComponentStyleHook(
'Drawer',
(token) => {
const drawerToken = mergeToken<DrawerToken>(token, {});
2022-07-29 15:56:11 +08:00
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
},
(token) => ({
2022-07-29 15:56:11 +08:00
zIndexPopup: token.zIndexPopupBase,
footerPaddingBlock: token.paddingXS,
footerPaddingInline: token.padding,
2022-07-29 15:56:11 +08:00
}),
);