antd/lib/steps/style/panel.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 genPanelStyle = token => {
  const {
    componentCls,
    lineWidthBold,
    borderRadius,
    borderRadiusSM,
    motionDurationMid,
    paddingXS,
    lineType,
    paddingSM,
    antCls,
    calc
  } = token;
  const itemCls = `${componentCls}-item`;
  const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
  const borderStyle = `${(0, _cssinjs.unit)(lineWidthBold)} ${lineType} ${varRef('panel-border-color')}`;
  return {
    [`${componentCls}${componentCls}-panel`]: [
    // ==========================================================
    // ==                       Clean up                       ==
    // ==========================================================
    {
      // ====================== Shared ======================
      [`${itemCls}-rail`]: {
        display: 'none'
      },
      // ==================== Horizontal ====================
      [`&${componentCls}-horizontal`]: {
        alignItems: 'stretch',
        [itemCls]: {
          flex: 1,
          margin: 0
        }
      }
    },
    // ==========================================================
    // ==                       Template                       ==
    // ==========================================================
    {
      '&': {
        [varName('panel-padding')]: paddingSM,
        [varName('item-border-radius')]: borderRadius,
        [itemCls]: {
          // Panel background
          [varName('panel-bg-color')]: varRef('item-icon-bg-color'),
          [varName('panel-border-color')]: varRef('item-icon-border-color'),
          [varName('panel-active-bg-color')]: varRef('item-icon-active-bg-color'),
          [varName('panel-active-border-color')]: varRef('item-icon-active-border-color'),
          [varName('panel-title-height')]: `calc(${varRef('title-font-size')} * ${varRef('title-line-height')})`,
          // Base height = padding * 2 + iconSize + contentHeight
          [varName('item-base-height')]: calc(varRef('panel-padding')).mul(2).add(varRef('icon-size')).add(varRef('panel-title-height')).equal(),
          [varName('item-base-width')]: `calc(${varRef('item-base-height')} * 0.7071)`,
          transition: `background-color ${motionDurationMid}`
        }
      },
      // ======================= Icon =======================
      [`${itemCls}-icon`]: {
        display: 'none'
      },
      // ====================== Header ======================
      [`${itemCls}-header`]: {
        minHeight: 'auto'
      },
      // ====================== Arrow =======================
      [`${componentCls}-panel-arrow`]: {
        position: 'absolute',
        top: calc(lineWidthBold).mul(-1).equal(),
        insetInlineStart: '100%',
        zIndex: 1,
        height: calc(lineWidthBold).mul(2).add('100%').equal(),
        width: varRef('item-base-width'),
        overflow: 'visible',
        strokeLinecap: 'round',
        path: {
          fill: varRef('panel-bg-color'),
          stroke: varRef('panel-border-color'),
          strokeWidth: lineWidthBold,
          vectorEffect: 'non-scaling-stroke',
          transition: `fill ${motionDurationMid}`
        }
      },
      [`${itemCls}:last-child ${componentCls}-panel-arrow`]: {
        display: 'none'
      },
      // ======================= Item =======================
      [itemCls]: {
        padding: varRef('panel-padding'),
        background: varRef('panel-bg-color'),
        position: 'relative',
        borderBlock: borderStyle,
        '&:not(:first-child)': {
          paddingInlineStart: `calc(${varRef('panel-padding')} + ${varRef('item-base-width')})`
        },
        '&:first-child': {
          borderInlineStart: borderStyle,
          borderStartStartRadius: varRef('item-border-radius'),
          borderEndStartRadius: varRef('item-border-radius')
        },
        '&:last-child': {
          borderInlineEnd: borderStyle,
          borderStartEndRadius: varRef('item-border-radius'),
          borderEndEndRadius: varRef('item-border-radius')
        },
        '&-active': {
          background: varRef('panel-active-bg-color'),
          borderColor: varRef('panel-active-border-color'),
          [`${componentCls}-panel-arrow`]: {
            path: {
              fill: varRef('panel-active-bg-color'),
              stroke: varRef('panel-active-border-color')
            }
          },
          [`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
            color: varRef('item-icon-active-text-color')
          }
        }
      }
    },
    // ==========================================================
    // ==                         Size                         ==
    // ==========================================================
    {
      [`&${componentCls}-small`]: {
        [varName('panel-padding')]: paddingXS,
        [varName('item-border-radius')]: borderRadiusSM
      }
    },
    // ==========================================================
    // ==                        Filled                        ==
    // ==========================================================
    {
      [`&${componentCls}-filled`]: {
        [itemCls]: {
          '&:not(:first-child)': {
            clipPath: `polygon(${[`${(0, _cssinjs.unit)(lineWidthBold)} 0`, `calc(100% + ${varRef('item-base-width')}) 0`, `calc(100% + ${varRef('item-base-width')}) 100%`, `${(0, _cssinjs.unit)(lineWidthBold)} 100%`, `calc(${varRef('item-base-width')} + ${(0, _cssinjs.unit)(lineWidthBold)}) 50%`].join(',')})`
          }
        }
      }
    },
    // ==========================================================
    // ==                       Outlined                       ==
    // ==========================================================
    {
      [`&${componentCls}-outlined`]: {
        [`${componentCls}-panel-arrow`]: {
          top: calc(lineWidthBold).div(2).mul(-1).equal(),
          height: calc(lineWidthBold).add('100%').equal()
        }
      }
    }]
  };
};
var _default = exports.default = genPanelStyle;