1 line
18 KiB
JSON
1 line
18 KiB
JSON
|
{"ast":null,"code":"import { unit } from '@ant-design/cssinjs';\nimport { genFocusStyle } from '../../style';\nimport { genStyleHooks, mergeToken } from '../../theme/internal';\nimport genMotionStyle from './motion';\n// =============================== Base ===============================\nconst genDrawerStyle = token => {\n const {\n borderRadiusSM,\n componentCls,\n zIndexPopup,\n colorBgMask,\n colorBgElevated,\n motionDurationSlow,\n motionDurationMid,\n paddingXS,\n padding,\n paddingLG,\n fontSizeLG,\n lineHeightLG,\n lineWidth,\n lineType,\n colorSplit,\n marginXS,\n colorIcon,\n colorIconHover,\n colorBgTextHover,\n colorBgTextActive,\n colorText,\n fontWeightStrong,\n footerPaddingBlock,\n footerPaddingInline,\n calc\n } = token;\n const wrapperCls = `${componentCls}-content-wrapper`;\n return {\n [componentCls]: {\n position: 'fixed',\n inset: 0,\n zIndex: zIndexPopup,\n pointerEvents: 'none',\n color: colorText,\n '&-pure': {\n position: 'relative',\n background: colorBgElevated,\n display: 'flex',\n flexDirection: 'column',\n [`&${componentCls}-left`]: {\n boxShadow: token.boxShadowDrawerLeft\n },\n [`&${componentCls}-right`]: {\n boxShadow: token.boxShadowDrawerRight\n },\n [`&${componentCls}-top`]: {\n boxShadow: token.boxShadowDrawerUp\n },\n [`&${componentCls}-bottom`]: {\n boxShadow: token.boxShadowDrawerDown\n }\n },\n '&-inline': {\n position: 'absolute'\n },\n // ====================== Mask ======================\n [`${componentCls}-mask`]: {\n position: 'absolute',\n inset: 0,\n zIndex: zIndexPopup,\n background: colorBgMask,\n pointerEvents: 'auto'\n },\n // ==================== Content =====================\n [wrapperCls]: {\n position: 'absolute',\n zIndex: zIndexPopup,\n maxWidth: '100vw',\n transition: `all ${motionDurationSlow}`,\n '&-hidden': {\n display: 'none'\n }\n },\n // Placement\n [`&-left > ${wrapperCls}`]: {\n top: 0,\n bottom: 0,\n left: {\n _skip_check_: true,\n value: 0\n },\n boxShadow: token.boxShadowDrawerLeft\n },\n [`&-right > ${wrapperCls}`]: {\n top: 0,\n right: {\n _skip_check_: true,\n value: 0\n },\n bottom: 0,\n boxShadow: token.boxShadowDrawerRight\n },\n [`&-top > ${wrapperCls}`]: {\n top: 0,\n insetInline: 0,\n boxShadow: token.boxShadowDrawerUp\n },\n [`&-bottom > ${wrapperCls}`]: {\n bottom: 0,\n insetInline: 0,\n boxShadow: token.boxShadowDrawerDown\n },\n [`${componentCls}-content`]: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n overflow: 'auto',\n background: colorBgElevated,\n pointerEvents: 'auto'\n },\n // Header\n [`${componentCls}-header`]: {\n display: 'flex',\n flex: 0,\n alignItems: 'center',\n padding: `${unit(padding)} ${unit(paddingLG)}`,\n fontSize: fontSizeLG,\n lineHeight: lineHeightLG,\n borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,\n '&-title': {\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n minWidth: 0,\n minHeight: 0\n }\n },\n [`${componentCls}-extra`]: {\n flex: 'none'\n },\n [`${componentCls}-close`]: Object.assign({\n display: 'inline-flex',\n width: calc(fontSizeLG).add(paddingXS).equal(),\n height: calc(fontSizeLG).add(paddingXS).equal(),\n borderRadius: borderRadiusSM,\n justifyContent: 'center',\n alignItems: 'center',\n marginInlineEnd: marginXS,\n color: colorIcon
|