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); |