antd/es/progress/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
var antProgressActive = new Keyframes('antProgressActive', {
  '0%': {
    transform: 'translateX(-100%) scaleX(0)',
    opacity: 0.1
  },
  '20%': {
    transform: 'translateX(-100%) scaleX(0)',
    opacity: 0.5
  },
  to: {
    transform: 'translateX(0) scaleX(1)',
    opacity: 0
  }
});

var genBaseStyle = function genBaseStyle(token) {
  var _$concat4, _$concat5, _extends2;

  var progressCls = token.componentCls,
      iconPrefixCls = token.iconCls;
  return _defineProperty({}, progressCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    display: 'inline-block',
    '&-rtl': {
      direction: 'rtl'
    },
    '&-line': {
      position: 'relative',
      width: '100%',
      fontSize: token.fontSizeBase,
      marginInlineEnd: token.marginXS,
      marginBottom: token.marginXS
    }
  }, _defineProperty(_extends2, "".concat(progressCls, "-outer"), {
    display: 'inline-block',
    width: '100%'
  }), _defineProperty(_extends2, "&".concat(progressCls, "-show-info"), _defineProperty({}, "".concat(progressCls, "-outer"), {
    marginInlineEnd: "calc(-2em - ".concat(token.marginXS, "px)"),
    paddingInlineEnd: "calc(2em + ".concat(token.paddingXS, "px)")
  })), _defineProperty(_extends2, "".concat(progressCls, "-inner"), {
    position: 'relative',
    display: 'inline-block',
    width: '100%',
    overflow: 'hidden',
    verticalAlign: 'middle',
    backgroundColor: token.progressRemainingColor,
    borderRadius: token.progressLineRadius
  }), _defineProperty(_extends2, "".concat(progressCls, "-inner:not(").concat(progressCls, "-circle-gradient)"), _defineProperty({}, "".concat(progressCls, "-circle-path"), {
    stroke: token.colorInfo
  })), _defineProperty(_extends2, "&".concat(progressCls, "-success-bg, ").concat(progressCls, "-bg"), {
    position: 'relative',
    backgroundColor: token.colorInfo,
    borderRadius: token.progressLineRadius,
    transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOutCirc)
  }), _defineProperty(_extends2, "".concat(progressCls, "-success-bg"), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    backgroundColor: token.colorSuccess
  }), _defineProperty(_extends2, "".concat(progressCls, "-text"), _defineProperty({
    display: 'inline-block',
    width: '2em',
    marginInlineStart: token.marginXS,
    color: token.progressInfoTextColor,
    lineHeight: 1,
    whiteSpace: 'nowrap',
    textAlign: 'start',
    verticalAlign: 'middle',
    wordBreak: 'normal'
  }, iconPrefixCls, {
    fontSize: token.fontSizeBase
  })), _defineProperty(_extends2, "&".concat(progressCls, "-status-active"), _defineProperty({}, "".concat(progressCls, "-bg::before"), {
    position: 'absolute',
    inset: 0,
    background: token.colorBgContainer,
    borderRadius: token.progressLineRadius,
    opacity: 0,
    animationName: antProgressActive,
    animationDuration: token.progressActiveMotionDuration,
    animationTimingFunction: token.motionEaseOutQuint,
    animationIterationCount: 'infinite',
    content: '""'
  })), _defineProperty(_extends2, "&".concat(progressCls, "-status-exception"), (_$concat4 = {}, _defineProperty(_$concat4, "".concat(progressCls, "-bg"), {
    backgroundColor: token.colorError
  }), _defineProperty(_$concat4, "".concat(progressCls, "-text"), {
    color: token.colorError
  }), _$concat4)), _defineProperty(_extends2, "&".concat(progressCls, "-status-exception ").concat(progressCls, "-inner:not(").concat(progressCls, "-circle-gradient)"), _defineProperty({}, "".concat(progressCls, "-circle-path"), {
    stroke: token.colorError
  })), _defineProperty(_extends2, "&".concat(progressCls, "-status-success"), (_$concat5 = {}, _defineProperty(_$concat5, "".concat(progressCls, "-bg"), {
    backgroundColor: token.colorSuccess
  }), _defineProperty(_$concat5, "".concat(progressCls, "-text"), {
    color: token.colorSuccess
  }), _$concat5)), _defineProperty(_extends2, "&".concat(progressCls, "-status-success ").concat(progressCls, "-inner:not(").concat(progressCls, "-circle-gradient)"), _defineProperty({}, "".concat(progressCls, "-circle-path"), {
    stroke: token.colorSuccess
  })), _extends2)));
};

var genCircleStyle = function genCircleStyle(token) {
  var _progressCls;

  var progressCls = token.componentCls,
      iconPrefixCls = token.iconCls;
  return _defineProperty({}, progressCls, (_progressCls = {
    '&-circle': {
      marginInlineEnd: token.marginXS,
      marginBottom: token.marginXS
    }
  }, _defineProperty(_progressCls, "".concat(progressCls, "-circle-trail"), {
    stroke: token.progressRemainingColor
  }), _defineProperty(_progressCls, "&".concat(progressCls, "-circle ").concat(progressCls, "-inner"), {
    position: 'relative',
    lineHeight: 1,
    backgroundColor: 'transparent'
  }), _defineProperty(_progressCls, "&".concat(progressCls, "-circle ").concat(progressCls, "-text"), _defineProperty({
    position: 'absolute',
    insetBlockStart: '50%',
    insetInlineStart: '50%',
    width: '100%',
    margin: 0,
    padding: 0,
    color: token.colorText,
    lineHeight: 1,
    whiteSpace: 'normal',
    textAlign: 'center',
    transform: "translate(-50%, -50%)"
  }, iconPrefixCls, {
    fontSize: "".concat(token.fontSize / token.fontSizeSM, "em")
  })), _defineProperty(_progressCls, "".concat(progressCls, "-circle&-status-exception"), _defineProperty({}, "".concat(progressCls, "-text"), {
    color: token.colorError
  })), _defineProperty(_progressCls, "".concat(progressCls, "-circle&-status-success"), _defineProperty({}, "".concat(progressCls, "-text"), {
    color: token.colorSuccess
  })), _progressCls));
};

var genStepStyle = function genStepStyle(token) {
  var progressCls = token.componentCls;
  return _defineProperty({}, progressCls, _defineProperty({}, "".concat(progressCls, "-steps"), {
    display: 'inline-block',
    '&-outer': {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center'
    },
    '&-item': {
      flexShrink: 0,
      minWidth: token.progressStepMinWidth,
      marginInlineEnd: token.progressStepMarginInlineEnd,
      background: token.progressRemainingColor,
      transition: "all ".concat(token.motionDurationSlow),
      '&-active': {
        background: token.colorInfo
      }
    }
  }));
};

var genSmallLine = function genSmallLine(token) {
  var progressCls = token.componentCls,
      iconPrefixCls = token.iconCls;
  return _defineProperty({}, progressCls, _defineProperty({}, "".concat(progressCls, "-small&-line, ").concat(progressCls, "-small&-line ").concat(progressCls, "-text ").concat(iconPrefixCls), {
    fontSize: token.fontSizeSM
  }));
};

export default genComponentStyleHook('Progress', function (token) {
  var progressStepMarginInlineEnd = token.marginXXS / 2;
  var progressToken = mergeToken(token, {
    progressLineRadius: 100,
    progressInfoTextColor: token.colorText,
    progressDefaultColor: token.colorInfo,
    progressRemainingColor: token.colorFillSecondary,
    progressStepMarginInlineEnd: progressStepMarginInlineEnd,
    progressStepMinWidth: progressStepMarginInlineEnd,
    progressActiveMotionDuration: '2.4s'
  });
  return [genBaseStyle(progressToken), genCircleStyle(progressToken), genStepStyle(progressToken), genSmallLine(progressToken)];
});