123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- "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;
|