antd/lib/steps/style/label-placement.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _util = require("./util");
const genLabelPlacementStyle = token => {
  const {
    componentCls,
    descriptionMaxWidth,
    marginXS,
    fontHeightLG,
    calc
  } = token;
  const itemCls = `${componentCls}-item`;
  return {
    // ====================== Shared ======================
    [componentCls]: {
      // Dot Steps active icon size is 2px larger than the default icon size
      '--steps-icon-size-max': 'max(var(--steps-icon-size), var(--steps-icon-size-active, var(--steps-icon-size)))',
      // Icon
      [`${itemCls}-icon`]: {
        marginBlockStart: `calc((var(--steps-heading-height) - var(--steps-icon-size)) / 2)`
      }
    },
    // ==================== Horizontal ====================
    [`${componentCls}-title-horizontal`]: {
      '--steps-title-horizontal-item-margin': token.margin,
      '--steps-title-horizontal-rail-margin': token.margin,
      '--steps-title-horizontal-title-height': fontHeightLG,
      '--steps-heading-height': `max(var(--steps-icon-size), var(--steps-title-horizontal-title-height))`,
      // Horizontal only
      [`&${componentCls}-horizontal, &${componentCls}-horizontal-alternate`]: {
        [`${itemCls}:not(:first-child)`]: {
          marginInlineStart: `var(--steps-title-horizontal-item-margin)`
        },
        [`${itemCls}:last-child`]: {
          flex: '0 1 auto'
        },
        [`${itemCls}-wrapper`]: {
          columnGap: token.marginXS
        }
      },
      // Vertical only
      [`&${componentCls}-vertical`]: {
        [`${itemCls}-wrapper`]: {
          columnGap: token.margin
        },
        [`${itemCls}-empty-header`]: {
          [`${itemCls}-header`]: {
            minHeight: 'auto'
          },
          [`${itemCls}-content`]: {
            marginTop: calc('var(--steps-heading-height)').sub(token.fontHeight).div(2).equal()
          }
        }
      },
      // Shared
      [`${itemCls}-section`]: {
        flex: 1,
        minWidth: 0
      },
      [`${itemCls}-header`]: {
        minHeight: 'var(--steps-heading-height)'
      },
      [`${itemCls}-title`]: {
        flex: '0 1 auto'
      },
      [`${itemCls}-content`]: {
        maxWidth: descriptionMaxWidth
      },
      [`${itemCls}-subtitle`]: {
        flex: '0 9999 auto'
      },
      [`&${componentCls}-horizontal ${itemCls}-rail`]: {
        '--steps-item-wrapper-padding-top': '0px',
        flex: 1,
        marginInlineStart: `var(--steps-title-horizontal-rail-margin)`
      }
    },
    // ===================== Vertical =====================
    [`${componentCls}-title-vertical`]: {
      '--steps-title-vertical-row-gap': token.paddingSM,
      '--steps-title-horizontal-rail-gap': token.marginXXS,
      '--steps-heading-height': 'var(--steps-icon-size-max)',
      [`> ${itemCls}`]: {
        flex: 1,
        [`${itemCls}-wrapper`]: {
          flexDirection: 'column',
          rowGap: `var(--steps-title-vertical-row-gap)`,
          alignItems: 'center'
        },
        // Section
        [`${itemCls}-section`]: {
          alignSelf: 'stretch'
        },
        // Header
        [`${itemCls}-header`]: {
          flexDirection: 'column',
          alignItems: 'center'
        },
        // >>> title & subtitle & Content
        [`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
          textAlign: 'center',
          maxWidth: '100%'
        },
        [`${itemCls}-subtitle`]: {
          margin: 0
        },
        // >>> rail
        [`${itemCls}-rail`]: {
          position: 'absolute',
          top: 0,
          width: `calc(100% - var(--steps-icon-size) - var(--steps-title-horizontal-rail-gap) * 2)`,
          insetInlineStart: `calc(50% + var(--steps-icon-size) / 2 + var(--steps-title-horizontal-rail-gap))`
        }
      },
      // With descriptionMaxWidth
      ...(0, _util.getItemWithWidthStyle)(token, marginXS, {
        [`${itemCls}:last-child`]: {
          flex: 'none'
        },
        // Icon
        [`${itemCls}-icon`]: {
          alignSelf: 'flex-start'
        },
        // Section
        [`${itemCls}-section`]: {
          width: descriptionMaxWidth
        }
      })
    }
  };
};
var _default = exports.default = genLabelPlacementStyle;