mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
Merge pull request #35260 from foryuki/refactor/cssinjs-for-modal
Refactor: cssinjs for modal
This commit is contained in:
二货机器人
GitHub
commit
cb882b5a92
@ -17,6 +17,7 @@ import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
|||||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||||
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
||||||
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
||||||
|
import type { ComponentToken as ModalComponentToken } from '../../modal/style';
|
||||||
|
|
||||||
export const PresetColors = [
|
export const PresetColors = [
|
||||||
'blue',
|
'blue',
|
||||||
@ -91,6 +92,7 @@ export interface OverrideToken {
|
|||||||
Card?: {};
|
Card?: {};
|
||||||
Steps?: {};
|
Steps?: {};
|
||||||
Menu?: MenuComponentToken;
|
Menu?: MenuComponentToken;
|
||||||
|
Modal?: ModalComponentToken;
|
||||||
Layout?: {};
|
Layout?: {};
|
||||||
Upload?: UploadComponentToken;
|
Upload?: UploadComponentToken;
|
||||||
Tooltip?: {};
|
Tooltip?: {};
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|||||||
import { ConfigContext, DirectionType } from '../config-provider';
|
import { ConfigContext, DirectionType } from '../config-provider';
|
||||||
import { canUseDocElement } from '../_util/styleChecker';
|
import { canUseDocElement } from '../_util/styleChecker';
|
||||||
import { getTransitionName } from '../_util/motion';
|
import { getTransitionName } from '../_util/motion';
|
||||||
|
import useStyle from './style';
|
||||||
|
|
||||||
let mousePosition: { x: number; y: number } | null;
|
let mousePosition: { x: number; y: number } | null;
|
||||||
|
|
||||||
@ -181,6 +182,8 @@ const Modal: React.FC<ModalProps> = props => {
|
|||||||
|
|
||||||
const prefixCls = getPrefixCls('modal', customizePrefixCls);
|
const prefixCls = getPrefixCls('modal', customizePrefixCls);
|
||||||
const rootPrefixCls = getPrefixCls();
|
const rootPrefixCls = getPrefixCls();
|
||||||
|
// Style
|
||||||
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
|
|
||||||
const defaultFooter = (
|
const defaultFooter = (
|
||||||
<LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
|
<LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
|
||||||
@ -198,13 +201,14 @@ const Modal: React.FC<ModalProps> = props => {
|
|||||||
[`${prefixCls}-centered`]: !!centered,
|
[`${prefixCls}-centered`]: !!centered,
|
||||||
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
|
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
|
||||||
});
|
});
|
||||||
return (
|
return wrapSSR(
|
||||||
<Dialog
|
<Dialog
|
||||||
{...restProps}
|
{...restProps}
|
||||||
getContainer={
|
getContainer={
|
||||||
getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
|
getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
|
||||||
}
|
}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
|
rootClassName={hashId}
|
||||||
wrapClassName={wrapClassNameExtended}
|
wrapClassName={wrapClassNameExtended}
|
||||||
footer={footer === undefined ? defaultFooter : footer}
|
footer={footer === undefined ? defaultFooter : footer}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
@ -214,7 +218,7 @@ const Modal: React.FC<ModalProps> = props => {
|
|||||||
focusTriggerAfterClose={focusTriggerAfterClose}
|
focusTriggerAfterClose={focusTriggerAfterClose}
|
||||||
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
||||||
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
|
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,74 +1,74 @@
|
|||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
// @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
||||||
|
|
||||||
.@{confirm-prefix-cls} {
|
// .@{confirm-prefix-cls} {
|
||||||
.@{ant-prefix}-modal-header {
|
// .@{ant-prefix}-modal-header {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{ant-prefix}-modal-body {
|
// .@{ant-prefix}-modal-body {
|
||||||
padding: @modal-confirm-body-padding;
|
// padding: @modal-confirm-body-padding;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-body-wrapper {
|
// &-body-wrapper {
|
||||||
.clearfix();
|
// .clearfix();
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-body {
|
// &-body {
|
||||||
.@{confirm-prefix-cls}-title {
|
// .@{confirm-prefix-cls}-title {
|
||||||
display: block;
|
// display: block;
|
||||||
// create BFC to avoid
|
// // create BFC to avoid
|
||||||
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
// // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
color: @heading-color;
|
// color: @heading-color;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
font-size: @modal-confirm-title-font-size;
|
// font-size: @modal-confirm-title-font-size;
|
||||||
line-height: 1.4;
|
// line-height: 1.4;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{confirm-prefix-cls}-content {
|
// .@{confirm-prefix-cls}-content {
|
||||||
margin-top: 8px;
|
// margin-top: 8px;
|
||||||
color: @text-color;
|
// color: @text-color;
|
||||||
font-size: @font-size-base;
|
// font-size: @font-size-base;
|
||||||
}
|
// }
|
||||||
|
|
||||||
> .@{iconfont-css-prefix} {
|
// > .@{iconfont-css-prefix} {
|
||||||
float: left;
|
// float: left;
|
||||||
margin-right: 16px;
|
// margin-right: 16px;
|
||||||
font-size: 22px;
|
// font-size: 22px;
|
||||||
|
|
||||||
// `content` after `icon` should set marginLeft
|
// // `content` after `icon` should set marginLeft
|
||||||
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
// + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||||
margin-left: 38px;
|
// margin-left: 38px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{confirm-prefix-cls}-btns {
|
// .@{confirm-prefix-cls}-btns {
|
||||||
float: right;
|
// float: right;
|
||||||
margin-top: 24px;
|
// margin-top: 24px;
|
||||||
|
|
||||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||||
margin-bottom: 0;
|
// margin-bottom: 0;
|
||||||
margin-left: 8px;
|
// margin-left: 8px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-error &-body > .@{iconfont-css-prefix} {
|
// &-error &-body > .@{iconfont-css-prefix} {
|
||||||
color: @error-color;
|
// color: @error-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-warning &-body > .@{iconfont-css-prefix},
|
// &-warning &-body > .@{iconfont-css-prefix},
|
||||||
&-confirm &-body > .@{iconfont-css-prefix} {
|
// &-confirm &-body > .@{iconfont-css-prefix} {
|
||||||
color: @warning-color;
|
// color: @warning-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-info &-body > .@{iconfont-css-prefix} {
|
// &-info &-body > .@{iconfont-css-prefix} {
|
||||||
color: @info-color;
|
// color: @info-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-success &-body > .@{iconfont-css-prefix} {
|
// &-success &-body > .@{iconfont-css-prefix} {
|
||||||
color: @success-color;
|
// color: @success-color;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
@import './modal';
|
// @import './modal';
|
||||||
@import './confirm';
|
// @import './confirm';
|
||||||
@import './rtl';
|
// @import './rtl';
|
||||||
|
|
||||||
.popover-customize-bg(@dialog-prefix-cls, @popover-background);
|
// .popover-customize-bg(@dialog-prefix-cls, @popover-background);
|
||||||
|
|||||||
@ -1,5 +1,382 @@
|
|||||||
import '../../style/index.less';
|
// deps-lint-skip-all
|
||||||
import './index.less';
|
import React from 'react';
|
||||||
|
import { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
import {
|
||||||
|
genComponentStyleHook,
|
||||||
|
GenerateStyle,
|
||||||
|
mergeToken,
|
||||||
|
resetComponent,
|
||||||
|
clearFix,
|
||||||
|
} from '../../_util/theme';
|
||||||
|
import type { FullToken } from '../../_util/theme';
|
||||||
|
|
||||||
// style dependencies
|
/** Component only token. Which will handle additional calculation of alias token */
|
||||||
import '../../button/style';
|
export interface ComponentToken {
|
||||||
|
// Component token here
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ModalToken extends FullToken<'Modal'> {
|
||||||
|
// Custom token here
|
||||||
|
modalHeaderPaddingVertical: number;
|
||||||
|
modalHeaderPaddingHorizontal: number;
|
||||||
|
modalBodyPadding: number;
|
||||||
|
modalHeaderBg: string;
|
||||||
|
modalHeaderPadding: string;
|
||||||
|
modalHeaderBorderWidth: number;
|
||||||
|
modalHeaderBorderStyle: string;
|
||||||
|
modalHeaderTitleLineHeight: string;
|
||||||
|
modalHeaderTitleFontSize: number;
|
||||||
|
modalHeaderBorderColorSplit: string;
|
||||||
|
modalHeaderCloseSize: number;
|
||||||
|
modalContentBg: string;
|
||||||
|
modalHeadingColor: string;
|
||||||
|
modalCloseColor: string;
|
||||||
|
modalFooterBg: string;
|
||||||
|
modalFooterBorderColorSplit: string;
|
||||||
|
modalFooterBorderStyle: string;
|
||||||
|
modalFooterPaddingVertical: number;
|
||||||
|
modalFooterPaddingHorizontal: number;
|
||||||
|
modalFooterBorderWidth: number;
|
||||||
|
modalMaskBg: string;
|
||||||
|
modalConfirmBodyPadding: string;
|
||||||
|
modalConfirmTitleFontSize: number;
|
||||||
|
modalIconHoverColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function box(position: React.CSSProperties['position']): React.CSSProperties {
|
||||||
|
return {
|
||||||
|
position,
|
||||||
|
top: 0,
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
bottom: 0,
|
||||||
|
insetInlineStart: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalMask(componentCls: string, token: ModalToken): CSSObject {
|
||||||
|
return {
|
||||||
|
[`${componentCls}${token.antCls}-zoom-enter, ${componentCls}${token.antCls}-zoom-appear`]: {
|
||||||
|
// reset scale avoid mousePosition bug
|
||||||
|
transform: 'none',
|
||||||
|
opacity: 0,
|
||||||
|
animationDuration: token.motionDurationSlow,
|
||||||
|
// https://github.com/ant-design/ant-design/issues/11777
|
||||||
|
userSelect: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-mask`]: {
|
||||||
|
...box('fixed'),
|
||||||
|
zIndex: token.zIndexPopup,
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: token.modalMaskBg,
|
||||||
|
|
||||||
|
[`${componentCls}-hidden`]: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-wrap`]: {
|
||||||
|
...box('fixed'),
|
||||||
|
overflow: 'auto',
|
||||||
|
outline: 0,
|
||||||
|
WebkitOverflowScrolling: 'touch',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`${componentCls}-root`]: {
|
||||||
|
...modalMask(componentCls, token),
|
||||||
|
|
||||||
|
[componentCls]: {
|
||||||
|
...resetComponent(token),
|
||||||
|
pointerEvents: 'none',
|
||||||
|
position: 'relative',
|
||||||
|
top: 100,
|
||||||
|
width: 'auto',
|
||||||
|
maxWidth: 'calc(100vw - 32px)',
|
||||||
|
margin: '0 auto',
|
||||||
|
paddingBottom: token.paddingLG,
|
||||||
|
|
||||||
|
'&-title': {
|
||||||
|
margin: 0,
|
||||||
|
color: token.modalHeadingColor,
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
lineHeight: token.modalHeaderTitleLineHeight,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-content': {
|
||||||
|
position: 'relative',
|
||||||
|
backgroundColor: token.modalContentBg,
|
||||||
|
backgroundClip: 'padding-box',
|
||||||
|
border: 0,
|
||||||
|
borderRadius: token.controlRadius,
|
||||||
|
boxShadow: token.boxShadow,
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-close': {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
// FIXME: hard code
|
||||||
|
zIndex: token.zIndexBase + 10,
|
||||||
|
padding: 0,
|
||||||
|
color: token.modalCloseColor,
|
||||||
|
// FIXME: hard code
|
||||||
|
fontWeight: 700,
|
||||||
|
lineHeight: 1,
|
||||||
|
textDecoration: 'none',
|
||||||
|
background: 'transparent',
|
||||||
|
border: 0,
|
||||||
|
outline: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: `color ${token.motionDurationSlow}`,
|
||||||
|
|
||||||
|
'&-x': {
|
||||||
|
display: 'block',
|
||||||
|
width: token.modalHeaderCloseSize,
|
||||||
|
height: token.modalHeaderCloseSize,
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
fontStyle: 'normal',
|
||||||
|
lineHeight: `${token.modalHeaderCloseSize}px`,
|
||||||
|
textAlign: 'center',
|
||||||
|
textTransform: 'none',
|
||||||
|
textRendering: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:focus, &:hover': {
|
||||||
|
color: token.modalIconHoverColor,
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-header': {
|
||||||
|
padding: token.modalHeaderPadding,
|
||||||
|
color: token.colorText,
|
||||||
|
background: token.modalHeaderBg,
|
||||||
|
borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
|
||||||
|
borderRadius: `${token.controlRadius}px ${token.controlRadius}px 0 0`,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-body': {
|
||||||
|
padding: token.modalBodyPadding,
|
||||||
|
fontSize: token.fontSizeBase,
|
||||||
|
lineHeight: token.lineHeight,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-footer': {
|
||||||
|
padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
|
||||||
|
textAlign: 'end',
|
||||||
|
background: token.modalFooterBg,
|
||||||
|
borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
|
||||||
|
borderRadius: `0 0 ${token.controlRadius}px ${token.controlRadius}px`,
|
||||||
|
|
||||||
|
[`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
|
||||||
|
marginBottom: 0,
|
||||||
|
marginInlineStart: token.marginXS,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-open': {
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-wrap`]: {
|
||||||
|
zIndex: token.zIndexPopup,
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
overflow: 'auto',
|
||||||
|
outline: 0,
|
||||||
|
WebkitOverflowScrolling: 'touch',
|
||||||
|
},
|
||||||
|
[`${componentCls}-wrap-rtl`]: {
|
||||||
|
direction: 'rtl',
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-centered`]: {
|
||||||
|
textAlign: 'center',
|
||||||
|
|
||||||
|
'&::before': {
|
||||||
|
display: 'inline-block',
|
||||||
|
width: 0,
|
||||||
|
height: '100%',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
content: '""',
|
||||||
|
},
|
||||||
|
[componentCls]: {
|
||||||
|
top: 0,
|
||||||
|
display: 'inline-block',
|
||||||
|
paddingBottom: 0,
|
||||||
|
textAlign: 'start',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`@media (max-width: ${token.screenSMMax})`]: {
|
||||||
|
[componentCls]: {
|
||||||
|
maxWidth: 'calc(100vw - 16px)',
|
||||||
|
margin: `${token.marginXS} auto`,
|
||||||
|
},
|
||||||
|
[`${componentCls}-centered`]: {
|
||||||
|
[componentCls]: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
const confirmComponentCls = `${componentCls}-confirm`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`${componentCls}-root`]: {
|
||||||
|
[confirmComponentCls]: {
|
||||||
|
'&-rtl': {
|
||||||
|
direction: 'rtl',
|
||||||
|
},
|
||||||
|
[`${token.antCls}-modal-header`]: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
[`${token.antCls}-modal-body`]: {
|
||||||
|
// FIXME: hard code
|
||||||
|
padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
|
||||||
|
},
|
||||||
|
[`${confirmComponentCls}-body-wrapper`]: {
|
||||||
|
...clearFix(),
|
||||||
|
},
|
||||||
|
[`${confirmComponentCls}-body`]: {
|
||||||
|
[`${confirmComponentCls}-title`]: {
|
||||||
|
display: 'block',
|
||||||
|
// create BFC to avoid
|
||||||
|
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||||
|
overflow: 'hidden',
|
||||||
|
color: token.colorTextHeading,
|
||||||
|
// FIXME: hard code
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: token.modalConfirmTitleFontSize,
|
||||||
|
// FIXME: hard code
|
||||||
|
lineHeight: 1.4,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${confirmComponentCls}-content`]: {
|
||||||
|
marginTop: token.marginXS,
|
||||||
|
color: token.colorText,
|
||||||
|
fontSize: token.fontSizeBase,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`> ${token.iconCls}`]: {
|
||||||
|
float: 'left',
|
||||||
|
marginInlineEnd: token.margin,
|
||||||
|
// FIXME: hard code
|
||||||
|
fontSize: 22,
|
||||||
|
|
||||||
|
// `content` after `icon` should set marginLeft
|
||||||
|
[`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
|
||||||
|
// FIXME: hard code
|
||||||
|
marginInlineStart: 38,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`${confirmComponentCls}-btns`]: {
|
||||||
|
// FIXME: 改成 flex 布局
|
||||||
|
float: 'right',
|
||||||
|
marginTop: token.marginLG,
|
||||||
|
|
||||||
|
[`${token.antCls}-btn + ${token.antCls}-btn`]: {
|
||||||
|
marginBottom: 0,
|
||||||
|
marginInlineStart: token.marginXS,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
||||||
|
color: token.colorError,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
|
||||||
|
${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
||||||
|
color: token.colorWarning,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
||||||
|
color: token.colorInfo,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
||||||
|
color: token.colorSuccess,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genRTLStyle: GenerateStyle<ModalToken> = token => {
|
||||||
|
const { componentCls } = token;
|
||||||
|
return {
|
||||||
|
[`${componentCls}-root`]: {
|
||||||
|
[`${componentCls}-wrap-rtl`]: {
|
||||||
|
direction: 'rtl',
|
||||||
|
|
||||||
|
[`${componentCls}-confirm-body`]: {
|
||||||
|
// FIXME: duplicated style
|
||||||
|
// direction: 'rtl',
|
||||||
|
|
||||||
|
[`>${token.iconCls}`]: {
|
||||||
|
float: 'right',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-confirm-btns`]: {
|
||||||
|
float: 'left',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================== Export ==============================
|
||||||
|
export default genComponentStyleHook('Modal', token => {
|
||||||
|
const modalToken = mergeToken<ModalToken>(token, {
|
||||||
|
modalHeaderPaddingVertical: token.paddingXS,
|
||||||
|
modalHeaderPaddingHorizontal: token.paddingLG,
|
||||||
|
modalBodyPadding: token.paddingLG,
|
||||||
|
modalHeaderBg: token.colorBgComponent,
|
||||||
|
modalHeaderPadding: `${token.padding}px ${token.paddingLG}px`,
|
||||||
|
modalHeaderBorderWidth: token.controlLineWidth,
|
||||||
|
modalHeaderBorderStyle: token.controlLineType,
|
||||||
|
//
|
||||||
|
modalHeaderTitleLineHeight: '22px',
|
||||||
|
modalHeaderTitleFontSize: token.fontSizeLG,
|
||||||
|
modalHeaderBorderColorSplit: token.colorSplit,
|
||||||
|
// FIXME: hard code
|
||||||
|
modalHeaderCloseSize: 56,
|
||||||
|
modalContentBg: token.colorBgComponent,
|
||||||
|
modalHeadingColor: token.colorTextHeading,
|
||||||
|
modalCloseColor: token.colorTextSecondary,
|
||||||
|
modalFooterBg: 'transparent',
|
||||||
|
modalFooterBorderColorSplit: token.colorSplit,
|
||||||
|
modalFooterBorderStyle: token.controlLineType,
|
||||||
|
// FIXME: hard code
|
||||||
|
modalFooterPaddingVertical: token.paddingXS + 2,
|
||||||
|
// FIXME: hard code
|
||||||
|
modalFooterPaddingHorizontal: token.padding,
|
||||||
|
modalFooterBorderWidth: token.controlLineWidth,
|
||||||
|
modalMaskBg: token.colorTextSecondary,
|
||||||
|
modalConfirmBodyPadding: `${token.padding * 2}px ${token.padding}px ${token.paddingLG}px`,
|
||||||
|
modalConfirmTitleFontSize: token.fontSizeLG,
|
||||||
|
// FIXME: hard code
|
||||||
|
modalIconHoverColor: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||||||
|
});
|
||||||
|
return [genModalStyle(modalToken), genModalConfirmStyle(modalToken), genRTLStyle(modalToken)];
|
||||||
|
});
|
||||||
|
|||||||
@ -1,136 +1,136 @@
|
|||||||
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
// @dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||||
|
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
.reset-component();
|
// .reset-component();
|
||||||
.modal-mask();
|
// .modal-mask();
|
||||||
|
|
||||||
position: relative;
|
// position: relative;
|
||||||
top: 100px;
|
// top: 100px;
|
||||||
width: auto;
|
// width: auto;
|
||||||
max-width: calc(100vw - 32px);
|
// max-width: calc(100vw - 32px);
|
||||||
margin: 0 auto;
|
// margin: 0 auto;
|
||||||
padding-bottom: 24px;
|
// padding-bottom: 24px;
|
||||||
|
|
||||||
&-wrap {
|
// &-wrap {
|
||||||
z-index: @zindex-modal;
|
// z-index: @zindex-modal;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-title {
|
// &-title {
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
color: @modal-heading-color;
|
// color: @modal-heading-color;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
font-size: @modal-header-title-font-size;
|
// font-size: @modal-header-title-font-size;
|
||||||
line-height: @modal-header-title-line-height;
|
// line-height: @modal-header-title-line-height;
|
||||||
word-wrap: break-word;
|
// word-wrap: break-word;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-content {
|
// &-content {
|
||||||
position: relative;
|
// position: relative;
|
||||||
background-color: @modal-content-bg;
|
// background-color: @modal-content-bg;
|
||||||
background-clip: padding-box;
|
// background-clip: padding-box;
|
||||||
border: 0;
|
// border: 0;
|
||||||
border-radius: @border-radius-base;
|
// border-radius: @border-radius-base;
|
||||||
box-shadow: @shadow-2;
|
// box-shadow: @shadow-2;
|
||||||
pointer-events: auto;
|
// pointer-events: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-close {
|
// &-close {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0;
|
// top: 0;
|
||||||
right: 0;
|
// right: 0;
|
||||||
z-index: @zindex-popup-close;
|
// z-index: @zindex-popup-close;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
color: @modal-close-color;
|
// color: @modal-close-color;
|
||||||
font-weight: 700;
|
// font-weight: 700;
|
||||||
line-height: 1;
|
// line-height: 1;
|
||||||
text-decoration: none;
|
// text-decoration: none;
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
border: 0;
|
// border: 0;
|
||||||
outline: 0;
|
// outline: 0;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
transition: color 0.3s;
|
// transition: color 0.3s;
|
||||||
|
|
||||||
&-x {
|
// &-x {
|
||||||
display: block;
|
// display: block;
|
||||||
width: @modal-header-close-size;
|
// width: @modal-header-close-size;
|
||||||
height: @modal-header-close-size;
|
// height: @modal-header-close-size;
|
||||||
font-size: @font-size-lg;
|
// font-size: @font-size-lg;
|
||||||
font-style: normal;
|
// font-style: normal;
|
||||||
line-height: @modal-header-close-size;
|
// line-height: @modal-header-close-size;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
text-transform: none;
|
// text-transform: none;
|
||||||
text-rendering: auto;
|
// text-rendering: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:focus,
|
// &:focus,
|
||||||
&:hover {
|
// &:hover {
|
||||||
color: @icon-color-hover;
|
// color: @icon-color-hover;
|
||||||
text-decoration: none;
|
// text-decoration: none;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-header {
|
// &-header {
|
||||||
padding: @modal-header-padding;
|
// padding: @modal-header-padding;
|
||||||
color: @text-color;
|
// color: @text-color;
|
||||||
background: @modal-header-bg;
|
// background: @modal-header-bg;
|
||||||
border-bottom: @modal-header-border-width @modal-header-border-style
|
// border-bottom: @modal-header-border-width @modal-header-border-style
|
||||||
@modal-header-border-color-split;
|
// @modal-header-border-color-split;
|
||||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-body {
|
// &-body {
|
||||||
padding: @modal-body-padding;
|
// padding: @modal-body-padding;
|
||||||
font-size: @font-size-base;
|
// font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
// line-height: @line-height-base;
|
||||||
word-wrap: break-word;
|
// word-wrap: break-word;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-footer {
|
// &-footer {
|
||||||
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
|
// padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
|
||||||
text-align: right;
|
// text-align: right;
|
||||||
background: @modal-footer-bg;
|
// background: @modal-footer-bg;
|
||||||
border-top: @modal-footer-border-width @modal-footer-border-style
|
// border-top: @modal-footer-border-width @modal-footer-border-style
|
||||||
@modal-footer-border-color-split;
|
// @modal-footer-border-color-split;
|
||||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
// border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||||
|
|
||||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
|
// .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
|
||||||
margin-bottom: 0;
|
// margin-bottom: 0;
|
||||||
margin-left: 8px;
|
// margin-left: 8px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-open {
|
// &-open {
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{dialog-prefix-cls}-centered {
|
// .@{dialog-prefix-cls}-centered {
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
width: 0;
|
// width: 0;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
vertical-align: middle;
|
// vertical-align: middle;
|
||||||
content: '';
|
// content: '';
|
||||||
}
|
// }
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
top: 0;
|
// top: 0;
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
padding-bottom: 0;
|
// padding-bottom: 0;
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
vertical-align: middle;
|
// vertical-align: middle;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@media (max-width: @screen-sm-max) {
|
// @media (max-width: @screen-sm-max) {
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
max-width: calc(100vw - 16px);
|
// max-width: calc(100vw - 16px);
|
||||||
margin: 8px auto;
|
// margin: 8px auto;
|
||||||
}
|
// }
|
||||||
.@{dialog-prefix-cls}-centered {
|
// .@{dialog-prefix-cls}-centered {
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|||||||
@ -1,74 +1,74 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
// @dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||||
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
// @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
||||||
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
// @dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
||||||
|
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
&-wrap {
|
// &-wrap {
|
||||||
&-rtl {
|
// &-rtl {
|
||||||
direction: rtl;
|
// direction: rtl;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-close {
|
// &-close {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
right: initial;
|
// right: initial;
|
||||||
left: 0;
|
// left: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-footer {
|
// &-footer {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
margin-right: 8px;
|
// margin-right: 8px;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-confirm {
|
// &-confirm {
|
||||||
&-body {
|
// &-body {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
direction: rtl;
|
// direction: rtl;
|
||||||
}
|
// }
|
||||||
> .@{iconfont-css-prefix} {
|
// > .@{iconfont-css-prefix} {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
float: right;
|
// float: right;
|
||||||
margin-right: 0;
|
// margin-right: 0;
|
||||||
margin-left: 16px;
|
// margin-left: 16px;
|
||||||
}
|
// }
|
||||||
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
// + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
margin-right: 38px;
|
// margin-right: 38px;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-btns {
|
// &-btns {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
float: left;
|
// float: left;
|
||||||
}
|
// }
|
||||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
// .@{dialog-wrap-rtl-cls} & {
|
||||||
margin-right: 8px;
|
// margin-right: 8px;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{dialog-prefix-cls}-centered {
|
// .@{dialog-prefix-cls}-centered {
|
||||||
.@{dialog-prefix-cls} {
|
// .@{dialog-prefix-cls} {
|
||||||
.@{dialog-wrap-rtl-cls}& {
|
// .@{dialog-wrap-rtl-cls}& {
|
||||||
text-align: right;
|
// text-align: right;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user