antd/es/steps/style/progress-dot.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

var genStepsProgressDotStyle = function genStepsProgressDotStyle(token) {
  var _$concat, _$concat2, _$concat$concat, _ref;

  var componentCls = token.componentCls,
      descriptionWidth = token.descriptionWidth,
      lineHeight = token.lineHeight,
      stepsCurrentDotSize = token.stepsCurrentDotSize,
      stepsDotSize = token.stepsDotSize,
      motionDurationSlow = token.motionDurationSlow;
  return _ref = {}, _defineProperty(_ref, "&".concat(componentCls, "-dot, &").concat(componentCls, "-dot").concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-item"), (_$concat = {
    '&-title': {
      lineHeight: lineHeight
    },
    '&-tail': {
      top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
      width: '100%',
      marginTop: 0,
      marginBottom: 0,
      marginInline: "".concat(descriptionWidth / 2, "px 0"),
      padding: 0,
      '&::after': {
        width: "calc(100% - ".concat(token.marginSM * 2, "px)"),
        height: token.lineWidth * 3,
        marginInlineStart: token.marginSM
      }
    },
    '&-icon': _defineProperty({
      width: stepsDotSize,
      height: stepsDotSize,
      marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
      paddingInlineEnd: 0,
      lineHeight: "".concat(stepsDotSize, "px"),
      background: 'transparent',
      border: 0
    }, "".concat(componentCls, "-icon-dot"), {
      position: 'relative',
      "float": 'left',
      width: '100%',
      height: '100%',
      borderRadius: 100,
      transition: "all ".concat(motionDurationSlow),

      /* expand hover area */
      '&::after': {
        position: 'absolute',
        top: -token.marginSM,
        insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
        width: token.controlHeightLG * 1.5,
        height: token.controlHeight,
        background: 'transparent',
        content: '""'
      }
    }),
    '&-content': {
      width: descriptionWidth
    }
  }, _defineProperty(_$concat, "&-process ".concat(componentCls, "-item-icon"), {
    position: 'relative',
    top: (stepsDotSize - stepsCurrentDotSize) / 2,
    width: stepsCurrentDotSize,
    height: stepsCurrentDotSize,
    lineHeight: "".concat(stepsCurrentDotSize, "px"),
    background: 'none',
    marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2
  }), _defineProperty(_$concat, "&-process ".concat(componentCls, "-icon"), _defineProperty({}, "&:first-child ".concat(componentCls, "-icon-dot"), {
    insetInlineStart: 0
  })), _$concat))), _defineProperty(_ref, "&".concat(componentCls, "-vertical").concat(componentCls, "-dot"), (_$concat$concat = {}, _defineProperty(_$concat$concat, "".concat(componentCls, "-item-icon"), {
    marginTop: (token.controlHeight - stepsDotSize) / 2,
    marginInlineStart: 0,
    background: 'none'
  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-item-process ").concat(componentCls, "-item-icon"), {
    marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
    top: 0,
    insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
    marginInlineStart: 0
  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-item > ").concat(componentCls, "-item-container > ").concat(componentCls, "-item-tail"), {
    top: (token.controlHeight - stepsDotSize) / 2,
    insetInlineStart: 0,
    margin: 0,
    padding: "".concat(stepsDotSize + token.paddingXS, "px 0 ").concat(token.paddingXS, "px"),
    '&::after': {
      marginInlineStart: (stepsDotSize - token.lineWidth) / 2
    }
  }), _defineProperty(_$concat$concat, "&".concat(componentCls, "-small"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(componentCls, "-item-icon"), {
    marginTop: (token.controlHeightSM - stepsDotSize) / 2
  }), _defineProperty(_$concat2, "".concat(componentCls, "-item-process ").concat(componentCls, "-item-icon"), {
    marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2
  }), _defineProperty(_$concat2, "".concat(componentCls, "-item > ").concat(componentCls, "-item-container > ").concat(componentCls, "-item-tail"), {
    top: (token.controlHeightSM - stepsDotSize) / 2
  }), _$concat2)), _defineProperty(_$concat$concat, "".concat(componentCls, "-item:first-child ").concat(componentCls, "-icon-dot"), {
    insetInlineStart: 0
  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-item-content"), {
    width: 'inherit'
  }), _$concat$concat)), _ref;
};

export default genStepsProgressDotStyle;