93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
"use client";
|
|
|
|
// Style as confirm component
|
|
import { prepareComponentToken, prepareToken } from '.';
|
|
import { clearFix } from '../../style';
|
|
import { genSubStyleComponent } from '../../theme/internal';
|
|
// ============================= Confirm ==============================
|
|
const genModalConfirmStyle = token => {
|
|
const {
|
|
componentCls,
|
|
titleFontSize,
|
|
titleLineHeight,
|
|
modalConfirmIconSize,
|
|
fontSize,
|
|
lineHeight
|
|
} = token;
|
|
const confirmComponentCls = `${componentCls}-confirm`;
|
|
const titleHeight = Math.round(titleFontSize * titleLineHeight);
|
|
const contentHeight = Math.round(fontSize * lineHeight);
|
|
return {
|
|
[confirmComponentCls]: {
|
|
'&-rtl': {
|
|
direction: 'rtl'
|
|
},
|
|
[`${token.antCls}-modal-header`]: {
|
|
display: 'none'
|
|
},
|
|
[`${confirmComponentCls}-body-wrapper`]: Object.assign({}, clearFix()),
|
|
// ====================== Body ======================
|
|
[`${confirmComponentCls}-body`]: {
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
alignItems: 'start',
|
|
[`> ${token.iconCls}`]: {
|
|
flex: 'none',
|
|
fontSize: modalConfirmIconSize,
|
|
marginInlineEnd: token.marginSM,
|
|
marginTop: (contentHeight - modalConfirmIconSize) / 2
|
|
},
|
|
[`&-has-title > ${token.iconCls}`]: {
|
|
marginTop: (titleHeight - modalConfirmIconSize) / 2
|
|
}
|
|
},
|
|
[`${confirmComponentCls}-paragraph`]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 'auto',
|
|
rowGap: token.marginXS
|
|
},
|
|
[`${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.marginSM,
|
|
[`${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 genSubStyleComponent(['Modal', 'confirm'], token => {
|
|
const modalToken = prepareToken(token);
|
|
return [genModalConfirmStyle(modalToken)];
|
|
}, prepareComponentToken, {
|
|
// confirm is weak than modal since no conflict here
|
|
order: -1000
|
|
}); |