antd-hz
Version:
华卓科技基于 antd 5.0 定制的组件库
136 lines • 4.65 kB
JavaScript
// Style as confirm component
import { unit } from '@ant-design/cssinjs';
import { prepareComponentToken, prepareToken } from '.';
import { clearFix } from '../../style';
import { genSubStyleComponent } from '../../theme/internal';
// ============================= 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-close`]: {
height: '16px !important',
width: '16px !important',
right: '16px !important',
top: '12px !important',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
[`span`]: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
'&:hover': {
backgroundColor: 'transparent !important'
}
},
[`${token.antCls}-modal-title`]: {
backgroundColor: 'transparent !important'
},
[`${token.antCls}-modal-header`]: {
// display: 'none',
height: '0',
backgroundColor: 'transparent !important'
},
[`${confirmComponentCls}-body-wrapper`]: Object.assign({}, clearFix()),
[`&${componentCls} ${componentCls}-body`]: {
// padding: confirmBodyPadding,
padding: '24px 26px 18px'
},
// ====================== 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% - ${unit(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
},
[`${confirmComponentCls}-title`]: {
color: token.colorTextHeading,
fontWeight: token.fontWeightStrong,
// fontSize: titleFontSize,
fontSize: '14px',
lineHeight: titleLineHeight
},
[`${confirmComponentCls}-content`]: {
color: token.colorText,
fontSize: '12px',
lineHeight
},
// ===================== Footer =====================
[`${confirmComponentCls}-btns`]: {
textAlign: 'center',
// marginTop: token.confirmBtnsMarginTop,
marginTop: '18px',
height: '26px',
[`${token.antCls}-btn`]: {
paddingTop: 0,
paddingBottom: 0,
minWidth: 90
},
[`${token.antCls}-btn, ${token.antCls}-btn *`]: {
height: '26px !important',
lineHeight: '24px !important',
overflow: 'hidden'
},
[`${token.antCls}-btn + ${token.antCls}-btn`]: {
marginBottom: 0,
marginInlineStart: 10
}
}
},
[`${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
});