antd/es/steps/style/nav.js

An enterprise-class UI design language and React components implementation

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

var genStepsNavStyle = function genStepsNavStyle(token) {
  var _container, _$concat2, _$concat3, _$concat4, _ref;

  var componentCls = token.componentCls,
      stepsNavContentMaxWidth = token.stepsNavContentMaxWidth,
      stepsNavArrowColor = token.stepsNavArrowColor,
      stepsNavActiveColor = token.stepsNavActiveColor,
      motionDurationSlow = token.motionDurationSlow;
  return _ref = {}, _defineProperty(_ref, "&".concat(componentCls, "-navigation"), (_$concat3 = {
    paddingTop: token.paddingSM
  }, _defineProperty(_$concat3, "&".concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-item"), {
    '&-container': {
      marginInlineStart: -token.marginSM
    }
  })), _defineProperty(_$concat3, "".concat(componentCls, "-item"), (_$concat2 = {
    overflow: 'visible',
    textAlign: 'center',
    '&-container': (_container = {
      display: 'inline-block',
      height: '100%',
      marginInlineStart: -token.margin,
      paddingBottom: token.paddingSM,
      textAlign: 'start',
      transition: "opacity ".concat(motionDurationSlow)
    }, _defineProperty(_container, "".concat(componentCls, "-item-content"), {
      maxWidth: stepsNavContentMaxWidth
    }), _defineProperty(_container, "".concat(componentCls, "-item-title"), {
      maxWidth: '100%',
      paddingInlineEnd: 0,
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      '&::after': {
        display: 'none'
      }
    }), _container)
  }, _defineProperty(_$concat2, "&:not(".concat(componentCls, "-item-active)"), _defineProperty({}, "".concat(componentCls, "-item-container[role='button']"), {
    cursor: 'pointer',
    '&:hover': {
      opacity: 0.85
    }
  })), _defineProperty(_$concat2, '&:last-child', {
    flex: 1,
    '&::after': {
      display: 'none'
    }
  }), _defineProperty(_$concat2, '&::after', {
    position: 'absolute',
    top: "calc(50% - ".concat(token.paddingSM / 2, "px)"),
    insetInlineStart: '100%',
    display: 'inline-block',
    width: token.fontSizeIcon,
    height: token.fontSizeIcon,
    borderTop: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(stepsNavArrowColor),
    borderBottom: 'none',
    borderInlineStart: 'none',
    borderInlineEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(stepsNavArrowColor),
    transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
    content: '""'
  }), _defineProperty(_$concat2, '&::before', {
    position: 'absolute',
    bottom: 0,
    insetInlineStart: '50%',
    display: 'inline-block',
    width: 0,
    height: token.lineWidthBold,
    backgroundColor: stepsNavActiveColor,
    transition: "width ".concat(motionDurationSlow, ", inset-inline-start ").concat(motionDurationSlow),
    transitionTimingFunction: 'ease-out',
    content: '""'
  }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-item").concat(componentCls, "-item-active::before"), {
    insetInlineStart: 0,
    width: '100%'
  }), _$concat3)), _defineProperty(_ref, "&".concat(componentCls, "-navigation").concat(componentCls, "-vertical"), _defineProperty({}, "> ".concat(componentCls, "-item"), (_$concat4 = {
    marginInlineEnd: '0 !important',
    '&::before': {
      display: 'none'
    }
  }, _defineProperty(_$concat4, "&".concat(componentCls, "-item-active::before"), {
    top: 0,
    insetInlineEnd: 0,
    insetInlineStart: 'unset',
    display: 'block',
    width: token.lineWidth * 3,
    height: "calc(100% - ".concat(token.marginLG, "px)")
  }), _defineProperty(_$concat4, '&::after', {
    position: 'relative',
    insetInlineStart: '50%',
    display: 'block',
    width: token.controlHeight * 0.25,
    height: token.controlHeight * 0.25,
    marginBottom: token.marginXS,
    textAlign: 'center',
    transform: 'translateY(-50%) translateX(-50%) rotate(135deg)'
  }), _defineProperty(_$concat4, "> ".concat(componentCls, "-item-container > ").concat(componentCls, "-item-tail"), {
    visibility: 'hidden'
  }), _$concat4))), _defineProperty(_ref, "&".concat(componentCls, "-navigation").concat(componentCls, "-horizontal"), _defineProperty({}, "> ".concat(componentCls, "-item > ").concat(componentCls, "-item-container > ").concat(componentCls, "-item-tail"), {
    visibility: 'hidden'
  })), _ref;
};

export default genStepsNavStyle;