ant-design/components/drawer/style/index.tsx
2022-07-29 15:56:11 +08:00

212 lines
5.0 KiB
TypeScript

import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import genMotionStyle from './motion';
export interface ComponentToken {
zIndexPopup: number;
}
export interface DrawerToken extends FullToken<'Drawer'> {
drawerFooterPaddingVertical: number;
drawerFooterPaddingHorizontal: number;
}
// =============================== Base ===============================
const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
const {
componentCls,
zIndexPopup,
colorBgMask,
colorBgElevated,
motionDurationSlow,
padding,
paddingLG,
fontSizeLG,
lineHeightLG,
lineWidth,
lineType,
colorSplit,
marginSM,
colorIcon,
colorIconHover,
colorText,
fontWeightStrong,
drawerFooterPaddingVertical,
drawerFooterPaddingHorizontal,
} = token;
const wrapperCls = `${componentCls}-content-wrapper`;
return {
[componentCls]: {
position: 'fixed',
inset: 0,
zIndex: zIndexPopup,
pointerEvents: 'none',
'&-inline': {
position: 'absolute',
},
// ====================== Mask ======================
[`${componentCls}-mask`]: {
position: 'absolute',
inset: 0,
zIndex: zIndexPopup,
background: colorBgMask,
pointerEvents: 'auto',
},
// ==================== Content =====================
[wrapperCls]: {
position: 'absolute',
zIndex: zIndexPopup,
transition: `all ${motionDurationSlow}`,
'&-hidden': {
display: 'none',
},
},
// Placement
[`&-left ${wrapperCls}`]: {
top: 0,
bottom: 0,
left: {
_skip_check_: true,
value: 0,
},
boxShadow: token.boxShadowDrawerRight,
},
[`&-right ${wrapperCls}`]: {
top: 0,
right: {
_skip_check_: true,
value: 0,
},
bottom: 0,
boxShadow: token.boxShadowDrawerLeft,
},
[`&-top ${wrapperCls}`]: {
top: 0,
insetInline: 0,
boxShadow: token.boxShadowDrawerDown,
},
[`&-bottom ${wrapperCls}`]: {
bottom: 0,
insetInline: 0,
boxShadow: token.boxShadowDrawerUp,
},
[`${componentCls}-content`]: {
width: '100%',
height: '100%',
overflow: 'auto',
background: colorBgElevated,
pointerEvents: 'auto',
},
// ===================== Panel ======================
[`${componentCls}-wrapper-body`]: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
},
// 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,
},
},
[`${componentCls}-extra`]: {
flex: 0,
},
[`${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 ${motionDurationSlow}`,
textRendering: 'auto',
'&:focus, &:hover': {
color: colorIconHover,
textDecoration: 'none',
},
},
[`${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: `${drawerFooterPaddingVertical}px ${drawerFooterPaddingHorizontal}px`,
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
},
// ====================== RTL =======================
'&-rtl': {
direction: 'rtl',
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Drawer',
token => {
const drawerToken = mergeToken<DrawerToken>(token, {
drawerFooterPaddingVertical: token.paddingXS,
drawerFooterPaddingHorizontal: token.padding,
});
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
},
token => ({
zIndexPopup: token.zIndexPopupBase,
}),
);