From 5f12d88c69089d38214eb6f7884fdc8f3ad4be00 Mon Sep 17 00:00:00 2001 From: foryuki Date: Tue, 26 Apr 2022 22:45:39 +0800 Subject: [PATCH 1/8] refactor: cssinjs for modal components/modal/style/modal.less --- components/_util/theme/interface.ts | 2 + components/modal/Modal.tsx | 9 +- components/modal/style/index.less | 12 +- components/modal/style/index.tsx | 270 +++++++++++++++++++++++++- components/modal/style/original.css | 291 ++++++++++++++++++++++++++++ 5 files changed, 572 insertions(+), 12 deletions(-) create mode 100644 components/modal/style/original.css diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 355e980e57..b9e4585187 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -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?: {}; diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index ecd09f383e..376f843c05 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -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; @@ -172,6 +173,7 @@ const Modal: React.FC = props => { footer, visible, wrapClassName, + rootClassName, centered, getContainer, closeIcon, @@ -181,6 +183,8 @@ const Modal: React.FC = props => { const prefixCls = getPrefixCls('modal', customizePrefixCls); const rootPrefixCls = getPrefixCls(); + // Style + const [wrapSSR, hashId] = useStyle(prefixCls); const defaultFooter = ( @@ -198,13 +202,14 @@ const Modal: React.FC = props => { [`${prefixCls}-centered`]: !!centered, [`${prefixCls}-wrap-rtl`]: direction === 'rtl', }); - return ( + return wrapSSR( = props => { focusTriggerAfterClose={focusTriggerAfterClose} transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)} maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)} - /> + />, ); }; diff --git a/components/modal/style/index.less b/components/modal/style/index.less index 5acc2608d4..2a16182d3b 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -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); diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 416ec0177e..f10935199a 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -1,5 +1,267 @@ -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, +} 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', + right: '0', + bottom: '0', + left: '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 = token => { + const { componentCls } = token; + + return { + [`${componentCls}-root`]: { + [componentCls]: { + ...resetComponent(token), + ...modalMask(componentCls, 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, + right: 0, + zIndex: token.zIndexBase + 10, + padding: 0, + color: token.modalCloseColor, + 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: 'right', + 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, + marginLeft: token.marginXS, + }, + }, + + '&-open': { + overflow: 'hidden', + }, + }, + + [`${componentCls}-wrap`]: { + zIndex: token.zIndexPopup, + // FIXME 找不到在哪里写的 + position: 'fixed', + inset: 0, + overflow: 'auto', + outline: 0, + WebkitOverflowScrolling: 'touch', + }, + + [`${componentCls}-centered`]: { + textAlign: 'center', + + '&::before': { + display: 'inline-block', + width: 0, + height: '100%', + verticalAlign: 'middle', + content: '""', + }, + [componentCls]: { + top: 0, + display: 'inline-block', + paddingBottom: 0, + textAlign: 'left', + verticalAlign: 'middle', + }, + }, + + [`@media (max-width: ${token.screenSMMax})`]: { + [componentCls]: { + maxWidth: 'calc(100vw - 16px)', + margin: `${token.marginXS} auto`, + }, + [`${componentCls}-centered`]: { + [componentCls]: { + flex: 1, + }, + }, + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook('Modal', token => { + const modalToken = mergeToken(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)]; +}); diff --git a/components/modal/style/original.css b/components/modal/style/original.css new file mode 100644 index 0000000000..0d6f2c688a --- /dev/null +++ b/components/modal/style/original.css @@ -0,0 +1,291 @@ +/* local development usage*/ +.ant-modal { + position: relative; + top: 100px; + box-sizing: border-box; + width: auto; + max-width: calc(100vw - 32px); + margin: 0 auto; + padding: 0 0 24px; + color: #000000d9; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + pointer-events: none; + font-feature-settings: 'tnum'; +} + +.ant-modal.ant-zoom-enter, +.ant-modal.ant-zoom-appear { + transform: none; + opacity: 0; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ant-modal-mask { + position: fixed; + z-index: 1000; + height: 100%; + background-color: #00000073; + inset: 0; +} + +.ant-modal-mask-hidden { + display: none; +} + +.ant-modal-wrap { + position: fixed; + overflow: auto; + outline: 0; + inset: 0; + -webkit-overflow-scrolling: touch; +} + +.ant-modal-wrap { + z-index: 1000; +} + +.ant-modal-title { + margin: 0; + color: #000000d9; + font-weight: 500; + font-size: 16px; + line-height: 22px; + word-wrap: break-word; +} + +.ant-modal-content { + position: relative; + background-color: #fff; + background-clip: padding-box; + border: 0; + border-radius: 2px; + box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; + pointer-events: auto; +} + +.ant-modal-close { + position: absolute; + top: 0; + right: 0; + z-index: 10; + padding: 0; + color: #00000073; + font-weight: 700; + line-height: 1; + text-decoration: none; + background: 0 0; + border: 0; + outline: 0; + cursor: pointer; + transition: color 0.3s; +} + +.ant-modal-close-x { + display: block; + width: 56px; + height: 56px; + font-size: 16px; + font-style: normal; + line-height: 56px; + text-align: center; + text-transform: none; + text-rendering: auto; +} + +.ant-modal-close:focus, +.ant-modal-close:hover { + color: #000000bf; + text-decoration: none; +} + +.ant-modal-header { + padding: 16px 24px; + color: #000000d9; + background: #fff; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 2px 2px 0 0; +} + +.ant-modal-body { + padding: 24px; + font-size: 14px; + line-height: 1.5715; + word-wrap: break-word; +} + +.ant-modal-footer { + padding: 10px 16px; + text-align: right; + background: 0 0; + border-top: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 0 0 2px 2px; +} + +.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) { + margin-bottom: 0; + margin-left: 8px; +} + +.ant-modal-open { + overflow: hidden; +} + +.ant-modal-centered { + text-align: center; +} + +.ant-modal-centered:before { + display: inline-block; + width: 0; + height: 100%; + vertical-align: middle; + content: ''; +} + +.ant-modal-centered .ant-modal { + top: 0; + display: inline-block; + padding-bottom: 0; + text-align: left; + vertical-align: middle; +} + +@media (max-width: 767px) { + .ant-modal { + max-width: calc(100vw - 16px); + margin: 8px auto; + } + + .ant-modal-centered .ant-modal { + flex: 1; + } +} + +.ant-modal-confirm .ant-modal-header { + display: none; +} + +.ant-modal-confirm .ant-modal-body { + padding: 32px 32px 24px; +} + +.ant-modal-confirm-body-wrapper:before { + display: table; + content: ''; +} + +.ant-modal-confirm-body-wrapper:after { + display: table; + clear: both; + content: ''; +} + +.ant-modal-confirm-body .ant-modal-confirm-title { + display: block; + overflow: hidden; + color: #000000d9; + font-weight: 500; + font-size: 16px; + line-height: 1.4; +} + +.ant-modal-confirm-body .ant-modal-confirm-content { + margin-top: 8px; + color: #000000d9; + font-size: 14px; +} + +.ant-modal-confirm-body > .anticon { + float: left; + margin-right: 16px; + font-size: 22px; +} + +.ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content { + margin-left: 38px; +} + +.ant-modal-confirm .ant-modal-confirm-btns { + float: right; + margin-top: 24px; +} + +.ant-modal-confirm .ant-modal-confirm-btns .ant-btn + .ant-btn { + margin-bottom: 0; + margin-left: 8px; +} + +.ant-modal-confirm-error .ant-modal-confirm-body > .anticon { + color: var(--ant-error-color); +} + +.ant-modal-confirm-warning .ant-modal-confirm-body > .anticon, +.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon { + color: var(--ant-warning-color); +} + +.ant-modal-confirm-info .ant-modal-confirm-body > .anticon { + color: var(--ant-info-color); +} + +.ant-modal-confirm-success .ant-modal-confirm-body > .anticon { + color: var(--ant-success-color); +} + +.ant-modal-wrap-rtl { + direction: rtl; +} + +.ant-modal-wrap-rtl .ant-modal-close { + right: initial; + left: 0; +} + +.ant-modal-wrap-rtl .ant-modal-footer { + text-align: left; +} + +.ant-modal-wrap-rtl .ant-modal-footer .ant-btn + .ant-btn { + margin-right: 8px; + margin-left: 0; +} + +.ant-modal-wrap-rtl .ant-modal-confirm-body { + direction: rtl; +} + +.ant-modal-wrap-rtl .ant-modal-confirm-body > .anticon { + float: right; + margin-right: 0; + margin-left: 16px; +} + +.ant-modal-wrap-rtl + .ant-modal-confirm-body + > .anticon + + .ant-modal-confirm-title + + .ant-modal-confirm-content { + margin-right: 38px; + margin-left: 0; +} + +.ant-modal-wrap-rtl .ant-modal-confirm-btns { + float: left; +} + +.ant-modal-wrap-rtl .ant-modal-confirm-btns .ant-btn + .ant-btn { + margin-right: 8px; + margin-left: 0; +} + +.ant-modal-wrap-rtl.ant-modal-centered .ant-modal { + text-align: right; +} From 65ae54ece702d00030c76b6ebbabbfe631e3c393 Mon Sep 17 00:00:00 2001 From: foryuki Date: Wed, 27 Apr 2022 20:29:18 +0800 Subject: [PATCH 2/8] fix: lint issues --- components/modal/Modal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 376f843c05..d7a688c0c6 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -173,7 +173,6 @@ const Modal: React.FC = props => { footer, visible, wrapClassName, - rootClassName, centered, getContainer, closeIcon, @@ -209,7 +208,7 @@ const Modal: React.FC = props => { getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer } prefixCls={prefixCls} - rootClassName={classNames(rootClassName, hashId)} + rootClassName={hashId} wrapClassName={wrapClassNameExtended} footer={footer === undefined ? defaultFooter : footer} visible={visible} From 11fb223bc074a4b065c8868e053be528ee6ad30b Mon Sep 17 00:00:00 2001 From: foryuki Date: Wed, 27 Apr 2022 21:04:09 +0800 Subject: [PATCH 3/8] feat: support ltr for modal --- components/modal/style/index.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index f10935199a..62ae422752 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -46,10 +46,10 @@ interface ModalToken extends FullToken<'Modal'> { function box(position: React.CSSProperties['position']): React.CSSProperties { return { position, - top: '0', - right: '0', - bottom: '0', - left: '0', + top: 0, + right: 0, + bottom: 0, + left: 0, }; } @@ -122,7 +122,7 @@ const genModalStyle: GenerateStyle = token => { '&-close': { position: 'absolute', top: 0, - right: 0, + insetInlineEnd: 0, zIndex: token.zIndexBase + 10, padding: 0, color: token.modalCloseColor, @@ -170,14 +170,14 @@ const genModalStyle: GenerateStyle = token => { '&-footer': { padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`, - textAlign: 'right', + 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, - marginLeft: token.marginXS, + marginInlineStart: token.marginXS, }, }, @@ -194,6 +194,10 @@ const genModalStyle: GenerateStyle = token => { overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', + + '&&-rtl': { + direction: 'rtl', + }, }, [`${componentCls}-centered`]: { From ca4af2b9e7e95dfb7c2dd7aa5299159b318f9c5c Mon Sep 17 00:00:00 2001 From: foryuki Date: Thu, 28 Apr 2022 09:45:53 +0800 Subject: [PATCH 4/8] fix: modal mask --- components/modal/style/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 62ae422752..270b22947b 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -89,9 +89,10 @@ const genModalStyle: GenerateStyle = token => { return { [`${componentCls}-root`]: { + ...modalMask(componentCls, token), + [componentCls]: { ...resetComponent(token), - ...modalMask(componentCls, token), pointerEvents: 'none', position: 'relative', top: 100, From 5a0329bb19635506348d116b4dd9e29566002651 Mon Sep 17 00:00:00 2001 From: foryuki Date: Fri, 29 Apr 2022 09:21:43 +0800 Subject: [PATCH 5/8] feat: cssinjs for confirm --- components/modal/style/confirm.less | 120 ++++++------ components/modal/style/index.tsx | 84 ++++++++- components/modal/style/modal.less | 272 ++++++++++++++-------------- components/modal/style/original.css | 4 +- 4 files changed, 280 insertions(+), 200 deletions(-) diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index dfe34d1d20..3e84b25b7f 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -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; +// } +// } diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 270b22947b..89e4e13774 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -7,6 +7,7 @@ import { GenerateStyle, mergeToken, resetComponent, + clearFix, } from '../../_util/theme'; import type { FullToken } from '../../_util/theme'; @@ -215,7 +216,7 @@ const genModalStyle: GenerateStyle = token => { top: 0, display: 'inline-block', paddingBottom: 0, - textAlign: 'left', + textAlign: 'start', verticalAlign: 'middle', }, }, @@ -235,6 +236,85 @@ const genModalStyle: GenerateStyle = token => { }; }; +const genModalConfirmStyle: GenerateStyle = token => { + const { componentCls } = token; + const confirmComponentCls = `${componentCls}-confirm`; + + return { + [`${componentCls}-root`]: { + [confirmComponentCls]: { + [`${token.antCls}-modal-header`]: { + display: 'none', + }, + [`${token.antCls}-modal-body`]: { + // FIXME: hard code + padding: '32px 32px 24px', + }, + [`${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, + fontWeight: 500, + fontSize: token.modalConfirmTitleFontSize, + 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: '22px', + + // `content` after `icon` should set marginLeft + [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: { + // FIXME: hard code + marginInlineStart: '38px', + }, + }, + }, + [`${confirmComponentCls}-btns`]: { + 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, + }, + }, + }; +}; + // ============================== Export ============================== export default genComponentStyleHook('Modal', token => { const modalToken = mergeToken(token, { @@ -268,5 +348,5 @@ export default genComponentStyleHook('Modal', token => { // FIXME: hard code modalIconHoverColor: new TinyColor('#000').setAlpha(0.75).toRgbString(), }); - return [genModalStyle(modalToken)]; + return [genModalStyle(modalToken), genModalConfirmStyle(modalToken)]; }); diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 6fb60849ca..1afb518725 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -1,136 +1,136 @@ -@dialog-prefix-cls: ~'@{ant-prefix}-modal'; - -.@{dialog-prefix-cls} { - .reset-component(); - .modal-mask(); - - position: relative; - top: 100px; - width: auto; - max-width: calc(100vw - 32px); - margin: 0 auto; - padding-bottom: 24px; - - &-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; - } - - &-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; - - &-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; - } - } - - &-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; - } - - &-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; - } - } - - &-open { - overflow: hidden; - } -} - -.@{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; - } -} - -@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; - } - } -} +// @dialog-prefix-cls: ~'@{ant-prefix}-modal'; + +// .@{dialog-prefix-cls} { +// .reset-component(); +// .modal-mask(); + +// position: relative; +// top: 100px; +// width: auto; +// max-width: calc(100vw - 32px); +// margin: 0 auto; +// padding-bottom: 24px; + +// &-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; +// } + +// &-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; + +// &-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; +// } +// } + +// &-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; +// } + +// &-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; +// } +// } + +// &-open { +// overflow: hidden; +// } +// } + +// .@{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; +// } +// } + +// @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; +// } +// } +// } diff --git a/components/modal/style/original.css b/components/modal/style/original.css index 0d6f2c688a..c978a07578 100644 --- a/components/modal/style/original.css +++ b/components/modal/style/original.css @@ -1,4 +1,4 @@ -/* local development usage*/ +/* local development usage .ant-modal { position: relative; top: 100px; @@ -288,4 +288,4 @@ .ant-modal-wrap-rtl.ant-modal-centered .ant-modal { text-align: right; -} +} */ From 32850a1e6cff4b5d3cf46bc508ef387f39569a9f Mon Sep 17 00:00:00 2001 From: foryuki Date: Mon, 2 May 2022 10:46:36 +0800 Subject: [PATCH 6/8] feat: support rtl for modal confirm --- components/modal/style/index.tsx | 40 ++++++++++++++++++++++++++------ components/modal/style/rtl.less | 24 +++++++++---------- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 89e4e13774..8d303f0e99 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -48,9 +48,9 @@ function box(position: React.CSSProperties['position']): React.CSSProperties { return { position, top: 0, - right: 0, + insetInlineEnd: 0, bottom: 0, - left: 0, + insetInlineStart: 0, }; } @@ -196,10 +196,9 @@ const genModalStyle: GenerateStyle = token => { overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', - - '&&-rtl': { - direction: 'rtl', - }, + }, + [`${componentCls}-wrap-rtl`]: { + direction: 'rtl', }, [`${componentCls}-centered`]: { @@ -243,6 +242,9 @@ const genModalConfirmStyle: GenerateStyle = token => { return { [`${componentCls}-root`]: { [confirmComponentCls]: { + '&-rtl': { + direction: 'rtl', + }, [`${token.antCls}-modal-header`]: { display: 'none', }, @@ -315,6 +317,30 @@ const genModalConfirmStyle: GenerateStyle = token => { }; }; +const genRTLStyle: GenerateStyle = 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(token, { @@ -348,5 +374,5 @@ export default genComponentStyleHook('Modal', token => { // FIXME: hard code modalIconHoverColor: new TinyColor('#000').setAlpha(0.75).toRgbString(), }); - return [genModalStyle(modalToken), genModalConfirmStyle(modalToken)]; + return [genModalStyle(modalToken), genModalConfirmStyle(modalToken), genRTLStyle(modalToken)]; }); diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less index 8a19025b6b..a56b1fa2d0 100644 --- a/components/modal/style/rtl.less +++ b/components/modal/style/rtl.less @@ -14,19 +14,19 @@ &-close { .@{dialog-wrap-rtl-cls} & { - right: initial; - left: 0; + // right: initial; + // left: 0; } } &-footer { .@{dialog-wrap-rtl-cls} & { - text-align: left; + // text-align: left; } .@{ant-prefix}-btn + .@{ant-prefix}-btn { .@{dialog-wrap-rtl-cls} & { - margin-right: 8px; - margin-left: 0; + // margin-right: 8px; + // margin-left: 0; } } } @@ -39,13 +39,13 @@ > .@{iconfont-css-prefix} { .@{dialog-wrap-rtl-cls} & { float: right; - margin-right: 0; - margin-left: 16px; + // margin-right: 0; + // margin-left: 16px; } + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content { .@{dialog-wrap-rtl-cls} & { - margin-right: 38px; - margin-left: 0; + // margin-right: 38px; + // margin-left: 0; } } } @@ -57,8 +57,8 @@ } .@{ant-prefix}-btn + .@{ant-prefix}-btn { .@{dialog-wrap-rtl-cls} & { - margin-right: 8px; - margin-left: 0; + // margin-right: 8px; + // margin-left: 0; } } } @@ -68,7 +68,7 @@ .@{dialog-prefix-cls}-centered { .@{dialog-prefix-cls} { .@{dialog-wrap-rtl-cls}& { - text-align: right; + // text-align: right; } } } From 5b7fe58403382e3932ed8403a2e211dc33352c2d Mon Sep 17 00:00:00 2001 From: foryuki Date: Thu, 5 May 2022 09:20:27 +0800 Subject: [PATCH 7/8] chore: remove useless code --- components/modal/style/index.tsx | 7 +- components/modal/style/original.css | 291 ---------------------------- components/modal/style/rtl.less | 134 ++++++------- 3 files changed, 70 insertions(+), 362 deletions(-) delete mode 100644 components/modal/style/original.css diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 8d303f0e99..6590587263 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -190,7 +190,6 @@ const genModalStyle: GenerateStyle = token => { [`${componentCls}-wrap`]: { zIndex: token.zIndexPopup, - // FIXME 找不到在哪里写的 position: 'fixed', inset: 0, overflow: 'auto', @@ -250,7 +249,7 @@ const genModalConfirmStyle: GenerateStyle = token => { }, [`${token.antCls}-modal-body`]: { // FIXME: hard code - padding: '32px 32px 24px', + padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`, }, [`${confirmComponentCls}-body-wrapper`]: { ...clearFix(), @@ -277,12 +276,12 @@ const genModalConfirmStyle: GenerateStyle = token => { float: 'left', marginInlineEnd: token.margin, // FIXME: hard code - fontSize: '22px', + fontSize: 22, // `content` after `icon` should set marginLeft [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: { // FIXME: hard code - marginInlineStart: '38px', + marginInlineStart: 38, }, }, }, diff --git a/components/modal/style/original.css b/components/modal/style/original.css deleted file mode 100644 index c978a07578..0000000000 --- a/components/modal/style/original.css +++ /dev/null @@ -1,291 +0,0 @@ -/* local development usage -.ant-modal { - position: relative; - top: 100px; - box-sizing: border-box; - width: auto; - max-width: calc(100vw - 32px); - margin: 0 auto; - padding: 0 0 24px; - color: #000000d9; - font-size: 14px; - font-variant: tabular-nums; - line-height: 1.5715; - list-style: none; - pointer-events: none; - font-feature-settings: 'tnum'; -} - -.ant-modal.ant-zoom-enter, -.ant-modal.ant-zoom-appear { - transform: none; - opacity: 0; - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ant-modal-mask { - position: fixed; - z-index: 1000; - height: 100%; - background-color: #00000073; - inset: 0; -} - -.ant-modal-mask-hidden { - display: none; -} - -.ant-modal-wrap { - position: fixed; - overflow: auto; - outline: 0; - inset: 0; - -webkit-overflow-scrolling: touch; -} - -.ant-modal-wrap { - z-index: 1000; -} - -.ant-modal-title { - margin: 0; - color: #000000d9; - font-weight: 500; - font-size: 16px; - line-height: 22px; - word-wrap: break-word; -} - -.ant-modal-content { - position: relative; - background-color: #fff; - background-clip: padding-box; - border: 0; - border-radius: 2px; - box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; - pointer-events: auto; -} - -.ant-modal-close { - position: absolute; - top: 0; - right: 0; - z-index: 10; - padding: 0; - color: #00000073; - font-weight: 700; - line-height: 1; - text-decoration: none; - background: 0 0; - border: 0; - outline: 0; - cursor: pointer; - transition: color 0.3s; -} - -.ant-modal-close-x { - display: block; - width: 56px; - height: 56px; - font-size: 16px; - font-style: normal; - line-height: 56px; - text-align: center; - text-transform: none; - text-rendering: auto; -} - -.ant-modal-close:focus, -.ant-modal-close:hover { - color: #000000bf; - text-decoration: none; -} - -.ant-modal-header { - padding: 16px 24px; - color: #000000d9; - background: #fff; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 2px 2px 0 0; -} - -.ant-modal-body { - padding: 24px; - font-size: 14px; - line-height: 1.5715; - word-wrap: break-word; -} - -.ant-modal-footer { - padding: 10px 16px; - text-align: right; - background: 0 0; - border-top: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 0 0 2px 2px; -} - -.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) { - margin-bottom: 0; - margin-left: 8px; -} - -.ant-modal-open { - overflow: hidden; -} - -.ant-modal-centered { - text-align: center; -} - -.ant-modal-centered:before { - display: inline-block; - width: 0; - height: 100%; - vertical-align: middle; - content: ''; -} - -.ant-modal-centered .ant-modal { - top: 0; - display: inline-block; - padding-bottom: 0; - text-align: left; - vertical-align: middle; -} - -@media (max-width: 767px) { - .ant-modal { - max-width: calc(100vw - 16px); - margin: 8px auto; - } - - .ant-modal-centered .ant-modal { - flex: 1; - } -} - -.ant-modal-confirm .ant-modal-header { - display: none; -} - -.ant-modal-confirm .ant-modal-body { - padding: 32px 32px 24px; -} - -.ant-modal-confirm-body-wrapper:before { - display: table; - content: ''; -} - -.ant-modal-confirm-body-wrapper:after { - display: table; - clear: both; - content: ''; -} - -.ant-modal-confirm-body .ant-modal-confirm-title { - display: block; - overflow: hidden; - color: #000000d9; - font-weight: 500; - font-size: 16px; - line-height: 1.4; -} - -.ant-modal-confirm-body .ant-modal-confirm-content { - margin-top: 8px; - color: #000000d9; - font-size: 14px; -} - -.ant-modal-confirm-body > .anticon { - float: left; - margin-right: 16px; - font-size: 22px; -} - -.ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content { - margin-left: 38px; -} - -.ant-modal-confirm .ant-modal-confirm-btns { - float: right; - margin-top: 24px; -} - -.ant-modal-confirm .ant-modal-confirm-btns .ant-btn + .ant-btn { - margin-bottom: 0; - margin-left: 8px; -} - -.ant-modal-confirm-error .ant-modal-confirm-body > .anticon { - color: var(--ant-error-color); -} - -.ant-modal-confirm-warning .ant-modal-confirm-body > .anticon, -.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon { - color: var(--ant-warning-color); -} - -.ant-modal-confirm-info .ant-modal-confirm-body > .anticon { - color: var(--ant-info-color); -} - -.ant-modal-confirm-success .ant-modal-confirm-body > .anticon { - color: var(--ant-success-color); -} - -.ant-modal-wrap-rtl { - direction: rtl; -} - -.ant-modal-wrap-rtl .ant-modal-close { - right: initial; - left: 0; -} - -.ant-modal-wrap-rtl .ant-modal-footer { - text-align: left; -} - -.ant-modal-wrap-rtl .ant-modal-footer .ant-btn + .ant-btn { - margin-right: 8px; - margin-left: 0; -} - -.ant-modal-wrap-rtl .ant-modal-confirm-body { - direction: rtl; -} - -.ant-modal-wrap-rtl .ant-modal-confirm-body > .anticon { - float: right; - margin-right: 0; - margin-left: 16px; -} - -.ant-modal-wrap-rtl - .ant-modal-confirm-body - > .anticon - + .ant-modal-confirm-title - + .ant-modal-confirm-content { - margin-right: 38px; - margin-left: 0; -} - -.ant-modal-wrap-rtl .ant-modal-confirm-btns { - float: left; -} - -.ant-modal-wrap-rtl .ant-modal-confirm-btns .ant-btn + .ant-btn { - margin-right: 8px; - margin-left: 0; -} - -.ant-modal-wrap-rtl.ant-modal-centered .ant-modal { - text-align: right; -} */ diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less index a56b1fa2d0..ed071e88c1 100644 --- a/components/modal/style/rtl.less +++ b/components/modal/style/rtl.less @@ -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; +// } +// } +// } From d21c7f8f4ed7d8feac47a81e4c8ae87013df3979 Mon Sep 17 00:00:00 2001 From: foryuki Date: Thu, 5 May 2022 11:06:31 +0800 Subject: [PATCH 8/8] chore: add fixme --- components/modal/style/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 6590587263..d987ee5fbf 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -125,9 +125,11 @@ const genModalStyle: GenerateStyle = token => { 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', @@ -261,8 +263,10 @@ const genModalConfirmStyle: GenerateStyle = token => { // 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, }, @@ -286,6 +290,7 @@ const genModalConfirmStyle: GenerateStyle = token => { }, }, [`${confirmComponentCls}-btns`]: { + // FIXME: 改成 flex 布局 float: 'right', marginTop: token.marginLG,