antd/lib/steps/style/icon.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genIconStyle = token => {
  const {
    componentCls,
    customIconFontSize,
    motionDurationSlow,
    iconSize,
    lineWidth,
    lineType,
    antCls
  } = token;
  const itemCls = `${componentCls}-item`;
  const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
  return {
    [componentCls]: {
      [varName('icon-size')]: iconSize,
      [varName('icon-border-width')]: lineWidth,
      [`${itemCls}-icon`]: {
        width: varRef('icon-size'),
        height: varRef('icon-size'),
        margin: 0,
        flex: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: token.iconFontSize,
        fontFamily: token.fontFamily,
        lineHeight: varRef('icon-size'),
        textAlign: 'center',
        borderRadius: varRef('icon-size'),
        border: `${varRef('icon-border-width')} ${lineType} transparent`,
        transition: ['background-color', 'border', 'color', 'inset', 'transform'].map(key => `${key} ${motionDurationSlow}`).join(', '),
        zIndex: 1
      },
      // ==================== Custom ====================
      [`${itemCls}-custom ${itemCls}-icon`]: {
        background: 'none',
        border: 0,
        fontSize: customIconFontSize
      }
    }
  };
};
var _default = exports.default = genIconStyle;