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 CarouselComponentToken } from '../../carousel/style';
|
||||
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
||||
import type { ComponentToken as ModalComponentToken } from '../../modal/style';
|
||||
|
||||
export const PresetColors = [
|
||||
'blue',
|
||||
@ -91,6 +92,7 @@ export interface OverrideToken {
|
||||
Card?: {};
|
||||
Steps?: {};
|
||||
Menu?: MenuComponentToken;
|
||||
Modal?: ModalComponentToken;
|
||||
Layout?: {};
|
||||
Upload?: UploadComponentToken;
|
||||
Tooltip?: {};
|
||||
|
||||
@ -10,6 +10,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { ConfigContext, DirectionType } from '../config-provider';
|
||||
import { canUseDocElement } from '../_util/styleChecker';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import useStyle from './style';
|
||||
|
||||
let mousePosition: { x: number; y: number } | null;
|
||||
|
||||
@ -181,6 +182,8 @@ const Modal: React.FC<ModalProps> = props => {
|
||||
|
||||
const prefixCls = getPrefixCls('modal', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const defaultFooter = (
|
||||
<LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
|
||||
@ -198,13 +201,14 @@ const Modal: React.FC<ModalProps> = props => {
|
||||
[`${prefixCls}-centered`]: !!centered,
|
||||
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
return wrapSSR(
|
||||
<Dialog
|
||||
{...restProps}
|
||||
getContainer={
|
||||
getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
|
||||
}
|
||||
prefixCls={prefixCls}
|
||||
rootClassName={hashId}
|
||||
wrapClassName={wrapClassNameExtended}
|
||||
footer={footer === undefined ? defaultFooter : footer}
|
||||
visible={visible}
|
||||
@ -214,7 +218,7 @@ const Modal: React.FC<ModalProps> = props => {
|
||||
focusTriggerAfterClose={focusTriggerAfterClose}
|
||||
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
||||
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} {
|
||||
.@{ant-prefix}-modal-header {
|
||||
display: none;
|
||||
}
|
||||
// .@{confirm-prefix-cls} {
|
||||
// .@{ant-prefix}-modal-header {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.@{ant-prefix}-modal-body {
|
||||
padding: @modal-confirm-body-padding;
|
||||
}
|
||||
// .@{ant-prefix}-modal-body {
|
||||
// padding: @modal-confirm-body-padding;
|
||||
// }
|
||||
|
||||
&-body-wrapper {
|
||||
.clearfix();
|
||||
}
|
||||
// &-body-wrapper {
|
||||
// .clearfix();
|
||||
// }
|
||||
|
||||
&-body {
|
||||
.@{confirm-prefix-cls}-title {
|
||||
display: block;
|
||||
// create BFC to avoid
|
||||
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||
overflow: hidden;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @modal-confirm-title-font-size;
|
||||
line-height: 1.4;
|
||||
}
|
||||
// &-body {
|
||||
// .@{confirm-prefix-cls}-title {
|
||||
// display: block;
|
||||
// // create BFC to avoid
|
||||
// // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||
// overflow: hidden;
|
||||
// color: @heading-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @modal-confirm-title-font-size;
|
||||
// line-height: 1.4;
|
||||
// }
|
||||
|
||||
.@{confirm-prefix-cls}-content {
|
||||
margin-top: 8px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
// .@{confirm-prefix-cls}-content {
|
||||
// margin-top: 8px;
|
||||
// color: @text-color;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
font-size: 22px;
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// float: left;
|
||||
// margin-right: 16px;
|
||||
// font-size: 22px;
|
||||
|
||||
// `content` after `icon` should set marginLeft
|
||||
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||
margin-left: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // `content` after `icon` should set marginLeft
|
||||
// + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||
// margin-left: 38px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{confirm-prefix-cls}-btns {
|
||||
float: right;
|
||||
margin-top: 24px;
|
||||
// .@{confirm-prefix-cls}-btns {
|
||||
// float: right;
|
||||
// margin-top: 24px;
|
||||
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
// margin-bottom: 0;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-error &-body > .@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
// &-error &-body > .@{iconfont-css-prefix} {
|
||||
// color: @error-color;
|
||||
// }
|
||||
|
||||
&-warning &-body > .@{iconfont-css-prefix},
|
||||
&-confirm &-body > .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
}
|
||||
// &-warning &-body > .@{iconfont-css-prefix},
|
||||
// &-confirm &-body > .@{iconfont-css-prefix} {
|
||||
// color: @warning-color;
|
||||
// }
|
||||
|
||||
&-info &-body > .@{iconfont-css-prefix} {
|
||||
color: @info-color;
|
||||
}
|
||||
// &-info &-body > .@{iconfont-css-prefix} {
|
||||
// color: @info-color;
|
||||
// }
|
||||
|
||||
&-success &-body > .@{iconfont-css-prefix} {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
// &-success &-body > .@{iconfont-css-prefix} {
|
||||
// color: @success-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './modal';
|
||||
@import './confirm';
|
||||
@import './rtl';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import './modal';
|
||||
// @import './confirm';
|
||||
// @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';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
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
|
||||
import '../../button/style';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
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} {
|
||||
.reset-component();
|
||||
.modal-mask();
|
||||
// .@{dialog-prefix-cls} {
|
||||
// .reset-component();
|
||||
// .modal-mask();
|
||||
|
||||
position: relative;
|
||||
top: 100px;
|
||||
width: auto;
|
||||
max-width: calc(100vw - 32px);
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24px;
|
||||
// position: relative;
|
||||
// top: 100px;
|
||||
// width: auto;
|
||||
// max-width: calc(100vw - 32px);
|
||||
// margin: 0 auto;
|
||||
// padding-bottom: 24px;
|
||||
|
||||
&-wrap {
|
||||
z-index: @zindex-modal;
|
||||
}
|
||||
// &-wrap {
|
||||
// z-index: @zindex-modal;
|
||||
// }
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
color: @modal-heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @modal-header-title-font-size;
|
||||
line-height: @modal-header-title-line-height;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
// &-title {
|
||||
// margin: 0;
|
||||
// color: @modal-heading-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @modal-header-title-font-size;
|
||||
// line-height: @modal-header-title-line-height;
|
||||
// word-wrap: break-word;
|
||||
// }
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
background-color: @modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
pointer-events: auto;
|
||||
}
|
||||
// &-content {
|
||||
// position: relative;
|
||||
// background-color: @modal-content-bg;
|
||||
// background-clip: padding-box;
|
||||
// border: 0;
|
||||
// border-radius: @border-radius-base;
|
||||
// box-shadow: @shadow-2;
|
||||
// pointer-events: auto;
|
||||
// }
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: @zindex-popup-close;
|
||||
padding: 0;
|
||||
color: @modal-close-color;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
// &-close {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// z-index: @zindex-popup-close;
|
||||
// padding: 0;
|
||||
// color: @modal-close-color;
|
||||
// font-weight: 700;
|
||||
// line-height: 1;
|
||||
// text-decoration: none;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// outline: 0;
|
||||
// cursor: pointer;
|
||||
// transition: color 0.3s;
|
||||
|
||||
&-x {
|
||||
display: block;
|
||||
width: @modal-header-close-size;
|
||||
height: @modal-header-close-size;
|
||||
font-size: @font-size-lg;
|
||||
font-style: normal;
|
||||
line-height: @modal-header-close-size;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
}
|
||||
// &-x {
|
||||
// display: block;
|
||||
// width: @modal-header-close-size;
|
||||
// height: @modal-header-close-size;
|
||||
// font-size: @font-size-lg;
|
||||
// font-style: normal;
|
||||
// line-height: @modal-header-close-size;
|
||||
// text-align: center;
|
||||
// text-transform: none;
|
||||
// text-rendering: auto;
|
||||
// }
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// &:focus,
|
||||
// &:hover {
|
||||
// color: @icon-color-hover;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-header {
|
||||
padding: @modal-header-padding;
|
||||
color: @text-color;
|
||||
background: @modal-header-bg;
|
||||
border-bottom: @modal-header-border-width @modal-header-border-style
|
||||
@modal-header-border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
// &-header {
|
||||
// padding: @modal-header-padding;
|
||||
// color: @text-color;
|
||||
// background: @modal-header-bg;
|
||||
// border-bottom: @modal-header-border-width @modal-header-border-style
|
||||
// @modal-header-border-color-split;
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
// }
|
||||
|
||||
&-body {
|
||||
padding: @modal-body-padding;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
// &-body {
|
||||
// padding: @modal-body-padding;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// word-wrap: break-word;
|
||||
// }
|
||||
|
||||
&-footer {
|
||||
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
|
||||
text-align: right;
|
||||
background: @modal-footer-bg;
|
||||
border-top: @modal-footer-border-width @modal-footer-border-style
|
||||
@modal-footer-border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
// &-footer {
|
||||
// padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
|
||||
// text-align: right;
|
||||
// background: @modal-footer-bg;
|
||||
// border-top: @modal-footer-border-width @modal-footer-border-style
|
||||
// @modal-footer-border-color-split;
|
||||
// border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
// .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
|
||||
// margin-bottom: 0;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
// &-open {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
text-align: center;
|
||||
// .@{dialog-prefix-cls}-centered {
|
||||
// text-align: center;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
.@{dialog-prefix-cls} {
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
padding-bottom: 0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// display: inline-block;
|
||||
// width: 0;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// content: '';
|
||||
// }
|
||||
// .@{dialog-prefix-cls} {
|
||||
// top: 0;
|
||||
// display: inline-block;
|
||||
// padding-bottom: 0;
|
||||
// text-align: left;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
.@{dialog-prefix-cls} {
|
||||
max-width: calc(100vw - 16px);
|
||||
margin: 8px auto;
|
||||
}
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
.@{dialog-prefix-cls} {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media (max-width: @screen-sm-max) {
|
||||
// .@{dialog-prefix-cls} {
|
||||
// max-width: calc(100vw - 16px);
|
||||
// margin: 8px auto;
|
||||
// }
|
||||
// .@{dialog-prefix-cls}-centered {
|
||||
// .@{dialog-prefix-cls} {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,74 +1,74 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
||||
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
||||
// @dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||
// @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
|
||||
// @dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
||||
|
||||
.@{dialog-prefix-cls} {
|
||||
&-wrap {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
// .@{dialog-prefix-cls} {
|
||||
// &-wrap {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-close {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
right: initial;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// &-close {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// right: initial;
|
||||
// left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-footer {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
text-align: left;
|
||||
}
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-footer {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// text-align: left;
|
||||
// }
|
||||
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// margin-right: 8px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-confirm {
|
||||
&-body {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
direction: rtl;
|
||||
}
|
||||
> .@{iconfont-css-prefix} {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
margin-right: 38px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-confirm {
|
||||
// &-body {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// direction: rtl;
|
||||
// }
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// float: right;
|
||||
// margin-right: 0;
|
||||
// margin-left: 16px;
|
||||
// }
|
||||
// + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// margin-right: 38px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-btns {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
float: left;
|
||||
}
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-btns {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// float: left;
|
||||
// }
|
||||
// .@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
// .@{dialog-wrap-rtl-cls} & {
|
||||
// margin-right: 8px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
.@{dialog-prefix-cls} {
|
||||
.@{dialog-wrap-rtl-cls}& {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{dialog-prefix-cls}-centered {
|
||||
// .@{dialog-prefix-cls} {
|
||||
// .@{dialog-wrap-rtl-cls}& {
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user