2022-03-31 17:11:44 +08:00
|
|
|
// deps-lint-skip-all
|
|
|
|
import { CSSObject } from '@ant-design/cssinjs';
|
2022-04-11 16:04:00 +08:00
|
|
|
import {
|
|
|
|
FullToken,
|
|
|
|
genComponentStyleHook,
|
|
|
|
GenerateStyle,
|
|
|
|
mergeToken,
|
|
|
|
resetComponent,
|
|
|
|
} from '../../_util/theme';
|
2022-03-31 17:11:44 +08:00
|
|
|
|
2022-04-08 15:28:34 +08:00
|
|
|
interface DescriptionsToken extends FullToken<'Descriptions'> {
|
2022-03-31 17:11:44 +08:00
|
|
|
descriptionsTitleMarginBottom: number;
|
|
|
|
descriptionsExtraColor: string;
|
|
|
|
descriptionItemPaddingBottom: number;
|
|
|
|
descriptionItemTrailingColon: boolean;
|
|
|
|
descriptionsDefaultPadding: string;
|
|
|
|
descriptionsBg: string;
|
|
|
|
descriptionsMiddlePadding: string;
|
|
|
|
descriptionsSmallPadding: string;
|
|
|
|
descriptionsItemLabelColonMarginRight: number;
|
|
|
|
descriptionsItemLabelColonMarginLeft: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
|
|
|
|
const {
|
2022-04-08 15:28:34 +08:00
|
|
|
componentCls,
|
2022-03-31 17:11:44 +08:00
|
|
|
descriptionsSmallPadding,
|
|
|
|
descriptionsDefaultPadding,
|
|
|
|
descriptionsMiddlePadding,
|
|
|
|
descriptionsBg,
|
|
|
|
} = token;
|
|
|
|
return {
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-bordered`]: {
|
|
|
|
[`${componentCls}-view`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
border: `1px solid ${token.colorSplit}`,
|
|
|
|
'> table': {
|
|
|
|
tableLayout: 'auto',
|
|
|
|
borderCollapse: 'collapse',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
padding: descriptionsDefaultPadding,
|
|
|
|
borderInlineEnd: `1px solid ${token.colorSplit}`,
|
|
|
|
'&:last-child': {
|
|
|
|
borderInlineEnd: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
backgroundColor: descriptionsBg,
|
|
|
|
'&::after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
borderBottom: `1px solid ${token.colorSplit}`,
|
|
|
|
'&:last-child': {
|
|
|
|
borderBottom: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-middle`]: {
|
|
|
|
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
padding: descriptionsMiddlePadding,
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-small`]: {
|
|
|
|
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
padding: descriptionsSmallPadding,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: DescriptionsToken) => {
|
|
|
|
const {
|
2022-04-08 15:28:34 +08:00
|
|
|
componentCls,
|
2022-03-31 17:11:44 +08:00
|
|
|
descriptionsExtraColor,
|
|
|
|
descriptionItemPaddingBottom,
|
|
|
|
descriptionItemTrailingColon,
|
|
|
|
descriptionsItemLabelColonMarginRight,
|
|
|
|
descriptionsItemLabelColonMarginLeft,
|
|
|
|
descriptionsTitleMarginBottom,
|
|
|
|
} = token;
|
|
|
|
return {
|
2022-04-08 15:28:34 +08:00
|
|
|
[componentCls]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
...genBorderedStyle(token),
|
|
|
|
[`&-rtl`]: {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-header`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
marginBottom: descriptionsTitleMarginBottom,
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-title`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
flex: 'auto',
|
|
|
|
overflow: 'hidden',
|
|
|
|
color: token.colorText,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
fontSize: token.fontSizeLG,
|
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
textOverflow: 'ellipsis',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-extra`]: {
|
2022-04-19 11:27:09 +08:00
|
|
|
marginInlineStart: 'auto',
|
2022-03-31 17:11:44 +08:00
|
|
|
color: descriptionsExtraColor,
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
fontSize: token.fontSize,
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-view`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
width: '100%',
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
borderRadius: token.radiusBase,
|
|
|
|
table: {
|
|
|
|
width: '100%',
|
|
|
|
tableLayout: 'fixed',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
paddingBottom: descriptionItemPaddingBottom,
|
|
|
|
},
|
|
|
|
'&:last-child': {
|
|
|
|
borderBottom: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
color: token.colorText,
|
|
|
|
fontWeight: 'normal',
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
fontSize: token.fontSize,
|
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
textAlign: `start`,
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
content: descriptionItemTrailingColon ? '":"' : '" "',
|
|
|
|
position: 'relative',
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
top: -0.5,
|
|
|
|
marginInline: `${descriptionsItemLabelColonMarginLeft}px ${descriptionsItemLabelColonMarginRight}px`,
|
|
|
|
},
|
|
|
|
|
2022-04-08 15:28:34 +08:00
|
|
|
[`&${componentCls}-item-no-colon::after`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-no-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'&::after': {
|
|
|
|
margin: 0,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'table-cell',
|
|
|
|
flex: 1,
|
|
|
|
color: token.colorText,
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
fontSize: token.fontSize,
|
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
wordBreak: 'break-word',
|
|
|
|
overflowWrap: 'break-word',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
paddingBottom: 0,
|
|
|
|
verticalAlign: 'top',
|
|
|
|
'&-container': {
|
|
|
|
display: 'flex',
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'baseline',
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-item-content`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'baseline',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-middle`]: {
|
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
paddingBottom: token.paddingSM,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 15:28:34 +08:00
|
|
|
[`${componentCls}-small`]: {
|
|
|
|
[`${componentCls}-row`]: {
|
2022-03-31 17:11:44 +08:00
|
|
|
'> th, > td': {
|
|
|
|
// FIXME: hardcode in v4
|
|
|
|
paddingBottom: token.paddingXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
// ============================== Export ==============================
|
2022-04-08 15:28:34 +08:00
|
|
|
export default genComponentStyleHook('Descriptions', token => {
|
2022-03-31 17:11:44 +08:00
|
|
|
const descriptionsBg = '#fafafa';
|
|
|
|
const descriptionsTitleMarginBottom = 20;
|
|
|
|
const descriptionsExtraColor = token.colorText;
|
|
|
|
const descriptionsSmallPadding = `${token.paddingXS}px ${token.padding}px`;
|
|
|
|
const descriptionsDefaultPadding = `${token.padding}px ${token.paddingLG}px`;
|
|
|
|
const descriptionsMiddlePadding = `${token.paddingSM}px ${token.paddingLG}px`;
|
|
|
|
const descriptionItemPaddingBottom = token.padding;
|
|
|
|
const descriptionItemTrailingColon = true;
|
|
|
|
const descriptionsItemLabelColonMarginRight = 8;
|
|
|
|
const descriptionsItemLabelColonMarginLeft = 2;
|
|
|
|
|
2022-04-11 16:04:00 +08:00
|
|
|
const descriptionToken = mergeToken<DescriptionsToken>(token, {
|
2022-03-31 17:11:44 +08:00
|
|
|
descriptionsBg,
|
|
|
|
descriptionsTitleMarginBottom,
|
|
|
|
descriptionsExtraColor,
|
|
|
|
descriptionItemPaddingBottom,
|
|
|
|
descriptionItemTrailingColon,
|
|
|
|
descriptionsSmallPadding,
|
|
|
|
descriptionsDefaultPadding,
|
|
|
|
descriptionsMiddlePadding,
|
|
|
|
descriptionsItemLabelColonMarginRight,
|
|
|
|
descriptionsItemLabelColonMarginLeft,
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-03-31 17:11:44 +08:00
|
|
|
|
2022-04-08 15:28:34 +08:00
|
|
|
return [genDescriptionStyles(descriptionToken)];
|
|
|
|
});
|