118 lines
3.5 KiB
JavaScript
118 lines
3.5 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
Object.defineProperty(exports, "__esModule", {
|
||
|
value: true
|
||
|
});
|
||
|
exports.prepareComponentToken = exports.default = void 0;
|
||
|
var _cssinjs = require("@ant-design/cssinjs");
|
||
|
var _internal = require("../../theme/internal");
|
||
|
// ============================== Styles ==============================
|
||
|
const genBaseStyle = token => {
|
||
|
const {
|
||
|
componentCls,
|
||
|
lineHeightHeading3,
|
||
|
iconCls,
|
||
|
padding,
|
||
|
paddingXL,
|
||
|
paddingXS,
|
||
|
paddingLG,
|
||
|
marginXS,
|
||
|
lineHeight
|
||
|
} = token;
|
||
|
return {
|
||
|
// Result
|
||
|
[componentCls]: {
|
||
|
padding: `${(0, _cssinjs.unit)(token.calc(paddingLG).mul(2).equal())} ${(0, _cssinjs.unit)(paddingXL)}`,
|
||
|
// RTL
|
||
|
'&-rtl': {
|
||
|
direction: 'rtl'
|
||
|
}
|
||
|
},
|
||
|
// Exception Status image
|
||
|
[`${componentCls} ${componentCls}-image`]: {
|
||
|
width: token.imageWidth,
|
||
|
height: token.imageHeight,
|
||
|
margin: 'auto'
|
||
|
},
|
||
|
[`${componentCls} ${componentCls}-icon`]: {
|
||
|
marginBottom: paddingLG,
|
||
|
textAlign: 'center',
|
||
|
[`& > ${iconCls}`]: {
|
||
|
fontSize: token.iconFontSize
|
||
|
}
|
||
|
},
|
||
|
[`${componentCls} ${componentCls}-title`]: {
|
||
|
color: token.colorTextHeading,
|
||
|
fontSize: token.titleFontSize,
|
||
|
lineHeight: lineHeightHeading3,
|
||
|
marginBlock: marginXS,
|
||
|
textAlign: 'center'
|
||
|
},
|
||
|
[`${componentCls} ${componentCls}-subtitle`]: {
|
||
|
color: token.colorTextDescription,
|
||
|
fontSize: token.subtitleFontSize,
|
||
|
lineHeight,
|
||
|
textAlign: 'center'
|
||
|
},
|
||
|
[`${componentCls} ${componentCls}-content`]: {
|
||
|
marginTop: paddingLG,
|
||
|
padding: `${(0, _cssinjs.unit)(paddingLG)} ${(0, _cssinjs.unit)(token.calc(padding).mul(2.5).equal())}`,
|
||
|
backgroundColor: token.colorFillAlter
|
||
|
},
|
||
|
[`${componentCls} ${componentCls}-extra`]: {
|
||
|
margin: token.extraMargin,
|
||
|
textAlign: 'center',
|
||
|
'& > *': {
|
||
|
marginInlineEnd: paddingXS,
|
||
|
'&:last-child': {
|
||
|
marginInlineEnd: 0
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
};
|
||
|
const genStatusIconStyle = token => {
|
||
|
const {
|
||
|
componentCls,
|
||
|
iconCls
|
||
|
} = token;
|
||
|
return {
|
||
|
[`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: {
|
||
|
color: token.resultSuccessIconColor
|
||
|
},
|
||
|
[`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: {
|
||
|
color: token.resultErrorIconColor
|
||
|
},
|
||
|
[`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: {
|
||
|
color: token.resultInfoIconColor
|
||
|
},
|
||
|
[`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: {
|
||
|
color: token.resultWarningIconColor
|
||
|
}
|
||
|
};
|
||
|
};
|
||
|
const genResultStyle = token => [genBaseStyle(token), genStatusIconStyle(token)];
|
||
|
const getStyle = token => genResultStyle(token);
|
||
|
// ============================== Export ==============================
|
||
|
const prepareComponentToken = token => ({
|
||
|
titleFontSize: token.fontSizeHeading3,
|
||
|
subtitleFontSize: token.fontSize,
|
||
|
iconFontSize: token.fontSizeHeading3 * 3,
|
||
|
extraMargin: `${token.paddingLG}px 0 0 0`
|
||
|
});
|
||
|
exports.prepareComponentToken = prepareComponentToken;
|
||
|
var _default = exports.default = (0, _internal.genStyleHooks)('Result', token => {
|
||
|
const resultInfoIconColor = token.colorInfo;
|
||
|
const resultErrorIconColor = token.colorError;
|
||
|
const resultSuccessIconColor = token.colorSuccess;
|
||
|
const resultWarningIconColor = token.colorWarning;
|
||
|
const resultToken = (0, _internal.mergeToken)(token, {
|
||
|
resultInfoIconColor,
|
||
|
resultErrorIconColor,
|
||
|
resultSuccessIconColor,
|
||
|
resultWarningIconColor,
|
||
|
imageWidth: 250,
|
||
|
imageHeight: 295
|
||
|
});
|
||
|
return [getStyle(resultToken)];
|
||
|
}, prepareComponentToken);
|