antd/lib/steps/style/nav.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genLegacyNavStyle = token => {
  const {
    componentCls,
    fontSizeIcon,
    navContentMaxWidth,
    navArrowColor,
    colorPrimary,
    motionDurationSlow,
    antCls,
    calc
  } = token;
  const itemCls = `${componentCls}-item`;
  const stepsNavActiveColor = colorPrimary;
  const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
  return {
    [`${componentCls}${componentCls}-navigation`]: {
      // ==========================================================
      // ==                        Shared                        ==
      // ==========================================================
      // ========================== Item ==========================
      [itemCls.repeat(4)]: {
        display: 'flex',
        justifyContent: 'center',
        position: 'relative',
        flex: 1,
        marginInlineStart: 0,
        [`${itemCls}-wrapper`]: {
          paddingBlock: token.paddingSM
        },
        // Section
        [`${itemCls}-section`]: {
          maxWidth: navContentMaxWidth
        },
        // Rail
        [`${itemCls}-rail`]: {
          display: 'none'
        },
        // ======================== Active ========================
        '&:before': {
          position: 'absolute',
          display: 'block',
          backgroundColor: stepsNavActiveColor,
          transition: `all ${motionDurationSlow}`,
          transitionTimingFunction: 'ease-out',
          content: '""'
        },
        '&:not(:last-child):after': {
          position: 'absolute',
          display: 'block',
          borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
          borderBottom: 'none',
          borderInlineStart: 'none',
          borderInlineEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
          content: '""'
        },
        // Reset active item style to same as default
        [`&${itemCls}-active`]: {
          [varName('item-content-active-color')]: varRef('item-content-color'),
          [varName('item-icon-active-bg-color')]: varRef('item-icon-bg-color'),
          [varName('item-icon-active-border-color')]: varRef('item-icon-border-color'),
          [varName('item-icon-active-text-color')]: varRef('item-icon-text-color')
        }
      },
      // ==========================================================
      // ==                       Horizontal                     ==
      // ==========================================================
      [`&${componentCls}-horizontal`]: {
        [itemCls]: {
          '&:before': {
            bottom: 0,
            insetInlineStart: '50%',
            width: 0,
            height: token.lineWidthBold
          },
          [`&${itemCls}-active:before`]: {
            insetInlineStart: 0,
            width: '100%'
          },
          '&:not(:last-child):after': {
            top: `50%`,
            insetInlineStart: calc(fontSizeIcon).div(2).mul(-1).add('100%').equal(),
            width: fontSizeIcon,
            height: fontSizeIcon,
            transform: 'translateY(-50%) rotate(45deg)'
          }
        }
      },
      // ==========================================================
      // ==                        Vertical                      ==
      // ==========================================================
      [`&${componentCls}-vertical`]: {
        [itemCls.repeat(4)]: {
          [`${itemCls}-content`]: {
            padding: 0
          },
          '&:before': {
            insetInlineEnd: 0,
            top: '50%',
            width: token.lineWidthBold,
            height: 0
          },
          [`&${itemCls}-active::before`]: {
            top: 0,
            height: '100%'
          },
          '&:not(:last-child):after': {
            left: {
              _skip_check_: true,
              value: '50%'
            },
            top: '100%',
            width: calc(fontSizeIcon).div(3).mul(2).equal(),
            height: calc(fontSizeIcon).div(3).mul(2).equal(),
            transform: 'translateY(-50%) translateX(-50%) rotate(135deg)'
          }
        }
      }
      // ========================= Legacy =========================
    }
  };
};
var _default = exports.default = genLegacyNavStyle;