110 lines
3.9 KiB
JavaScript
110 lines
3.9 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
|
const genHorizontalStyle = token => {
|
|
const {
|
|
componentCls,
|
|
fontHeight,
|
|
antCls,
|
|
paddingXS
|
|
} = token;
|
|
const [stepsVarName, stepsVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
|
|
const [timelineVarName, timelineVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'timeline');
|
|
const itemCls = `${componentCls}-item`;
|
|
return {
|
|
[`${componentCls}-horizontal`]: {
|
|
[stepsVarName('title-vertical-row-gap')]: paddingXS,
|
|
[timelineVarName('content-height')]: (0, _cssinjs.unit)(fontHeight),
|
|
// =============================================================
|
|
// == Share ==
|
|
// =============================================================
|
|
alignItems: 'stretch',
|
|
// =============================================================
|
|
// == Alternate ==
|
|
// =============================================================
|
|
[`&${componentCls}-layout-alternate`]: {
|
|
[itemCls]: {
|
|
[`${itemCls}-wrapper`]: {
|
|
[timelineVarName('alternate-content-offset')]: `calc(${timelineVarRef('content-height')} + ${stepsVarRef('title-vertical-row-gap')} * 2 + ${stepsVarRef('icon-size-max')})`,
|
|
height: `calc(${timelineVarRef('content-height')} * 2 + ${stepsVarRef('title-vertical-row-gap')} * 2 + ${stepsVarRef('icon-size-max')})`
|
|
},
|
|
// Icon
|
|
[`${itemCls}-icon`]: {
|
|
position: 'absolute'
|
|
},
|
|
// Icon & Rail
|
|
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
margin: 0
|
|
},
|
|
// Title & Content
|
|
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: 'unset'
|
|
},
|
|
// Title
|
|
[`${itemCls}-title`]: {
|
|
position: 'absolute',
|
|
left: {
|
|
_skip_check_: true,
|
|
value: '50%'
|
|
},
|
|
transform: 'translateX(-50%)'
|
|
},
|
|
// Content
|
|
[`${itemCls}-content`]: {
|
|
position: 'absolute',
|
|
left: {
|
|
_skip_check_: true,
|
|
value: '50%'
|
|
},
|
|
transform: 'translateX(-50%)'
|
|
},
|
|
// Placement
|
|
'&-placement-start': {
|
|
[`${itemCls}-title`]: {
|
|
bottom: timelineVarRef('alternate-content-offset')
|
|
},
|
|
[`${itemCls}-content`]: {
|
|
top: timelineVarRef('alternate-content-offset')
|
|
}
|
|
},
|
|
'&-placement-end': {
|
|
[`${itemCls}-title`]: {
|
|
top: timelineVarRef('alternate-content-offset')
|
|
},
|
|
[`${itemCls}-content`]: {
|
|
bottom: timelineVarRef('alternate-content-offset')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// =============================================================
|
|
// == Same Side ==
|
|
// =============================================================
|
|
[`&:not(${componentCls}-layout-alternate)`]: {
|
|
[`${itemCls}-placement-end`]: {
|
|
display: 'flex',
|
|
alignItems: 'flex-end',
|
|
[`${itemCls}-wrapper`]: {
|
|
flex: 'auto',
|
|
flexDirection: 'column-reverse'
|
|
},
|
|
[`${itemCls}-rail`]: {
|
|
top: 'auto',
|
|
bottom: stepsVarRef('horizontal-rail-margin'),
|
|
transform: 'translateY(50%)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
var _default = exports.default = genHorizontalStyle; |