126 lines
4.7 KiB
JavaScript
126 lines
4.7 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
const genStepsProgressDotStyle = token => {
|
|
const {
|
|
componentCls,
|
|
descriptionMaxWidth,
|
|
lineHeight,
|
|
dotCurrentSize,
|
|
dotSize,
|
|
motionDurationSlow
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
|
|
[`${componentCls}-item`]: {
|
|
'&-title': {
|
|
lineHeight
|
|
},
|
|
'&-tail': {
|
|
// Math.floor((token.size - token.lineWidth * 3) / 2)
|
|
top: token.calc(token.dotSize).sub(token.calc(token.lineWidth).mul(3).equal()).div(2).equal(),
|
|
width: '100%',
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
marginInline: `${(0, _cssinjs.unit)(token.calc(descriptionMaxWidth).div(2).equal())} 0`,
|
|
padding: 0,
|
|
'&::after': {
|
|
width: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.marginSM).mul(2).equal())})`,
|
|
height: token.calc(token.lineWidth).mul(3).equal(),
|
|
marginInlineStart: token.marginSM
|
|
}
|
|
},
|
|
'&-icon': {
|
|
width: dotSize,
|
|
height: dotSize,
|
|
marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotSize).div(2).equal(),
|
|
paddingInlineEnd: 0,
|
|
lineHeight: (0, _cssinjs.unit)(dotSize),
|
|
background: 'transparent',
|
|
border: 0,
|
|
[`${componentCls}-icon-dot`]: {
|
|
position: 'relative',
|
|
float: 'left',
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: 100,
|
|
// very large number
|
|
transition: `all ${motionDurationSlow}`,
|
|
/* expand hover area */
|
|
'&::after': {
|
|
position: 'absolute',
|
|
top: token.calc(token.marginSM).mul(-1).equal(),
|
|
insetInlineStart: token.calc(dotSize).sub(token.calc(token.controlHeightLG).mul(1.5).equal()).div(2).equal(),
|
|
width: token.calc(token.controlHeightLG).mul(1.5).equal(),
|
|
height: token.controlHeight,
|
|
background: 'transparent',
|
|
content: '""'
|
|
}
|
|
}
|
|
},
|
|
'&-content': {
|
|
width: descriptionMaxWidth
|
|
},
|
|
[`&-process ${componentCls}-item-icon`]: {
|
|
position: 'relative',
|
|
top: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
|
|
width: dotCurrentSize,
|
|
height: dotCurrentSize,
|
|
lineHeight: (0, _cssinjs.unit)(dotCurrentSize),
|
|
background: 'none',
|
|
marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotCurrentSize).div(2).equal()
|
|
},
|
|
[`&-process ${componentCls}-icon`]: {
|
|
[`&:first-child ${componentCls}-icon-dot`]: {
|
|
insetInlineStart: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`&${componentCls}-vertical${componentCls}-dot`]: {
|
|
[`${componentCls}-item-icon`]: {
|
|
marginTop: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
|
|
marginInlineStart: 0,
|
|
background: 'none'
|
|
},
|
|
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
|
marginTop: token.calc(token.controlHeight).sub(dotCurrentSize).div(2).equal(),
|
|
top: 0,
|
|
insetInlineStart: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
|
|
marginInlineStart: 0
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/18354
|
|
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
top: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
|
|
insetInlineStart: 0,
|
|
margin: 0,
|
|
padding: `${(0, _cssinjs.unit)(token.calc(dotSize).add(token.paddingXS).equal())} 0 ${(0, _cssinjs.unit)(token.paddingXS)}`,
|
|
'&::after': {
|
|
marginInlineStart: token.calc(dotSize).sub(token.lineWidth).div(2).equal()
|
|
}
|
|
},
|
|
[`&${componentCls}-small`]: {
|
|
[`${componentCls}-item-icon`]: {
|
|
marginTop: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal()
|
|
},
|
|
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
|
marginTop: token.calc(token.controlHeightSM).sub(dotCurrentSize).div(2).equal()
|
|
},
|
|
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
top: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal()
|
|
}
|
|
},
|
|
[`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
|
insetInlineStart: 0
|
|
},
|
|
[`${componentCls}-item-content`]: {
|
|
width: 'inherit'
|
|
}
|
|
}
|
|
};
|
|
};
|
|
var _default = exports.default = genStepsProgressDotStyle; |