107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _ = require(".");
|
|
var _style = require("../../style");
|
|
var _internal = require("../../theme/internal");
|
|
// Style as confirm component
|
|
|
|
// ============================= Confirm ==============================
|
|
const genModalConfirmStyle = token => {
|
|
const {
|
|
componentCls,
|
|
titleFontSize,
|
|
titleLineHeight,
|
|
modalConfirmIconSize,
|
|
fontSize,
|
|
lineHeight,
|
|
modalTitleHeight,
|
|
fontHeight,
|
|
confirmBodyPadding
|
|
} = token;
|
|
const confirmComponentCls = `${componentCls}-confirm`;
|
|
return {
|
|
[confirmComponentCls]: {
|
|
'&-rtl': {
|
|
direction: 'rtl'
|
|
},
|
|
[`${token.antCls}-modal-header`]: {
|
|
display: 'none'
|
|
},
|
|
[`${confirmComponentCls}-body-wrapper`]: Object.assign({}, (0, _style.clearFix)()),
|
|
[`&${componentCls} ${componentCls}-body`]: {
|
|
padding: confirmBodyPadding
|
|
},
|
|
// ====================== Body ======================
|
|
[`${confirmComponentCls}-body`]: {
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
alignItems: 'start',
|
|
[`> ${token.iconCls}`]: {
|
|
flex: 'none',
|
|
fontSize: modalConfirmIconSize,
|
|
marginInlineEnd: token.confirmIconMarginInlineEnd,
|
|
marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
|
|
},
|
|
[`&-has-title > ${token.iconCls}`]: {
|
|
marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
|
|
}
|
|
},
|
|
[`${confirmComponentCls}-paragraph`]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 'auto',
|
|
rowGap: token.marginXS
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/48159
|
|
[`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
|
|
maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
|
|
},
|
|
[`${confirmComponentCls}-title`]: {
|
|
color: token.colorTextHeading,
|
|
fontWeight: token.fontWeightStrong,
|
|
fontSize: titleFontSize,
|
|
lineHeight: titleLineHeight
|
|
},
|
|
[`${confirmComponentCls}-content`]: {
|
|
color: token.colorText,
|
|
fontSize,
|
|
lineHeight
|
|
},
|
|
// ===================== Footer =====================
|
|
[`${confirmComponentCls}-btns`]: {
|
|
textAlign: 'end',
|
|
marginTop: token.confirmBtnsMarginTop,
|
|
[`${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 ==============================
|
|
var _default = exports.default = (0, _internal.genSubStyleComponent)(['Modal', 'confirm'], token => {
|
|
const modalToken = (0, _.prepareToken)(token);
|
|
return [genModalConfirmStyle(modalToken)];
|
|
}, _.prepareComponentToken, {
|
|
// confirm is weak than modal since no conflict here
|
|
order: -1000
|
|
}); |