143 lines
4.3 KiB
JavaScript
143 lines
4.3 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _style = require("../../style");
|
|
var _internal = require("../../theme/internal");
|
|
// ============================== Shared ==============================
|
|
const genSharedDividerStyle = token => {
|
|
const {
|
|
componentCls,
|
|
sizePaddingEdgeHorizontal,
|
|
colorSplit,
|
|
lineWidth,
|
|
textPaddingInline,
|
|
orientationMargin,
|
|
verticalMarginInline
|
|
} = token;
|
|
return {
|
|
[componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
|
|
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
|
|
// vertical
|
|
'&-vertical': {
|
|
position: 'relative',
|
|
top: '-0.06em',
|
|
display: 'inline-block',
|
|
height: '0.9em',
|
|
marginInline: verticalMarginInline,
|
|
marginBlock: 0,
|
|
verticalAlign: 'middle',
|
|
borderTop: 0,
|
|
borderInlineStart: `${lineWidth}px solid ${colorSplit}`
|
|
},
|
|
'&-horizontal': {
|
|
display: 'flex',
|
|
clear: 'both',
|
|
width: '100%',
|
|
minWidth: '100%',
|
|
margin: `${token.dividerHorizontalGutterMargin}px 0`
|
|
},
|
|
[`&-horizontal${componentCls}-with-text`]: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
|
color: token.colorTextHeading,
|
|
fontWeight: 500,
|
|
fontSize: token.fontSizeLG,
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
borderBlockStart: `0 ${colorSplit}`,
|
|
'&::before, &::after': {
|
|
position: 'relative',
|
|
width: '50%',
|
|
borderBlockStart: `${lineWidth}px solid transparent`,
|
|
// Chrome not accept `inherit` in `border-top`
|
|
borderBlockStartColor: 'inherit',
|
|
borderBlockEnd: 0,
|
|
transform: 'translateY(50%)',
|
|
content: "''"
|
|
}
|
|
},
|
|
[`&-horizontal${componentCls}-with-text-left`]: {
|
|
'&::before': {
|
|
width: `${orientationMargin * 100}%`
|
|
},
|
|
'&::after': {
|
|
width: `${100 - orientationMargin * 100}%`
|
|
}
|
|
},
|
|
[`&-horizontal${componentCls}-with-text-right`]: {
|
|
'&::before': {
|
|
width: `${100 - orientationMargin * 100}%`
|
|
},
|
|
'&::after': {
|
|
width: `${orientationMargin * 100}%`
|
|
}
|
|
},
|
|
[`${componentCls}-inner-text`]: {
|
|
display: 'inline-block',
|
|
paddingBlock: 0,
|
|
paddingInline: textPaddingInline
|
|
},
|
|
'&-dashed': {
|
|
background: 'none',
|
|
borderColor: colorSplit,
|
|
borderStyle: 'dashed',
|
|
borderWidth: `${lineWidth}px 0 0`
|
|
},
|
|
[`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
|
|
'&::before, &::after': {
|
|
borderStyle: 'dashed none none'
|
|
}
|
|
},
|
|
[`&-vertical${componentCls}-dashed`]: {
|
|
borderInlineStartWidth: lineWidth,
|
|
borderInlineEnd: 0,
|
|
borderBlockStart: 0,
|
|
borderBlockEnd: 0
|
|
},
|
|
[`&-plain${componentCls}-with-text`]: {
|
|
color: token.colorText,
|
|
fontWeight: 'normal',
|
|
fontSize: token.fontSize
|
|
},
|
|
[`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: {
|
|
'&::before': {
|
|
width: 0
|
|
},
|
|
'&::after': {
|
|
width: '100%'
|
|
},
|
|
[`${componentCls}-inner-text`]: {
|
|
paddingInlineStart: sizePaddingEdgeHorizontal
|
|
}
|
|
},
|
|
[`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: {
|
|
'&::before': {
|
|
width: '100%'
|
|
},
|
|
'&::after': {
|
|
width: 0
|
|
},
|
|
[`${componentCls}-inner-text`]: {
|
|
paddingInlineEnd: sizePaddingEdgeHorizontal
|
|
}
|
|
}
|
|
})
|
|
};
|
|
};
|
|
// ============================== Export ==============================
|
|
var _default = exports.default = (0, _internal.genComponentStyleHook)('Divider', token => {
|
|
const dividerToken = (0, _internal.mergeToken)(token, {
|
|
dividerHorizontalWithTextGutterMargin: token.margin,
|
|
dividerHorizontalGutterMargin: token.marginLG,
|
|
sizePaddingEdgeHorizontal: 0
|
|
});
|
|
return [genSharedDividerStyle(dividerToken)];
|
|
}, token => ({
|
|
textPaddingInline: '1em',
|
|
orientationMargin: 0.05,
|
|
verticalMarginInline: token.marginXS
|
|
})); |