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

265 lines
6.4 KiB
TypeScript
Raw Normal View History

import { unit } from '@ant-design/cssinjs';
import { genFocusStyle } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, 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 Vertical padding of footer
*/
footerPaddingBlock: number;
/**
* @desc
* @descEN Horizontal 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 ===============================
const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
2022-03-24 23:33:51 +08:00
const {
borderRadiusSM,
componentCls,
2022-07-29 15:56:11 +08:00
zIndexPopup,
colorBgMask,
colorBgElevated,
2022-03-24 23:33:51 +08:00
motionDurationSlow,
motionDurationMid,
paddingXS,
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,
marginXS,
2022-07-29 15:56:11 +08:00
colorIcon,
colorIconHover,
colorBgTextHover,
colorBgTextActive,
2022-07-29 15:56:11 +08:00
colorText,
fontWeightStrong,
footerPaddingBlock,
footerPaddingInline,
calc,
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,
display: 'flex',
flexDirection: 'column',
[`&${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`]: {
display: 'flex',
flexDirection: 'column',
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
// Header
[`${componentCls}-header`]: {
display: 'flex',
flex: 0,
alignItems: 'center',
padding: `${unit(padding)} ${unit(paddingLG)}`,
2022-07-29 15:56:11 +08:00
fontSize: fontSizeLG,
lineHeight: lineHeightLG,
borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
2022-07-29 15:56:11 +08:00
'&-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-flex',
width: calc(fontSizeLG).add(paddingXS).equal(),
height: calc(fontSizeLG).add(paddingXS).equal(),
borderRadius: borderRadiusSM,
justifyContent: 'center',
alignItems: 'center',
marginInlineEnd: marginXS,
2022-07-29 15:56:11 +08:00
color: colorIcon,
fontWeight: fontWeightStrong,
fontSize: fontSizeLG,
fontStyle: 'normal',
lineHeight: 1,
textAlign: 'center',
textTransform: 'none',
textDecoration: 'none',
background: 'transparent',
border: 0,
cursor: 'pointer',
transition: `all ${motionDurationMid}`,
2022-07-29 15:56:11 +08:00
textRendering: 'auto',
'&:hover': {
2022-07-29 15:56:11 +08:00
color: colorIconHover,
backgroundColor: colorBgTextHover,
2022-07-29 15:56:11 +08:00
textDecoration: 'none',
},
'&:active': {
backgroundColor: colorBgTextActive,
},
...genFocusStyle(token),
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',
[`${componentCls}-body-skeleton`]: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
2022-07-29 15:56:11 +08:00
},
// Footer
[`${componentCls}-footer`]: {
flexShrink: 0,
padding: `${unit(footerPaddingBlock)} ${unit(footerPaddingInline)}`,
borderTop: `${unit(lineWidth)} ${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 const prepareComponentToken: GetDefaultToken<'Drawer'> = (token) => ({
zIndexPopup: token.zIndexPopupBase,
footerPaddingBlock: token.paddingXS,
footerPaddingInline: token.padding,
});
2022-03-24 23:33:51 +08:00
// ============================== Export ==============================
export default genStyleHooks(
2022-07-29 15:56:11 +08:00
'Drawer',
(token) => {
const drawerToken = mergeToken<DrawerToken>(token, {});
2022-07-29 15:56:11 +08:00
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
},
prepareComponentToken,
2022-07-29 15:56:11 +08:00
);