antd/lib/timeline/style/horizontal.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");
const genHorizontalStyle = token => {
  const {
    componentCls,
    fontHeight
  } = token;
  const itemCls = `${componentCls}-item`;
  return {
    [`${componentCls}-horizontal`]: {
      '--steps-title-vertical-row-gap': token.paddingXS,
      '--timeline-content-height': `${(0, _cssinjs.unit)(fontHeight)}`,
      // =============================================================
      // ==                          Share                          ==
      // =============================================================
      alignItems: 'stretch',
      // =============================================================
      // ==                        Alternate                        ==
      // =============================================================
      [`&${componentCls}-layout-alternate`]: {
        [itemCls]: {
          [`${itemCls}-wrapper`]: {
            '--timeline-alternate-content-offset': `calc(var(--timeline-content-height) + var(--steps-title-vertical-row-gap) * 2 + var(--steps-icon-size-max))`,
            height: `calc(var(--timeline-content-height) * 2 + var(--steps-title-vertical-row-gap) * 2 + var(--steps-icon-size-max))`
          },
          // Icon
          [`${itemCls}-icon`]: {
            position: 'absolute'
          },
          // Icon & Rail
          [`${itemCls}-icon, ${itemCls}-rail`]: {
            position: 'absolute',
            top: '50%',
            transform: 'translateY(-50%)',
            margin: 0
          },
          // Title & Content
          [`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
            whiteSpace: 'nowrap',
            maxWidth: 'unset'
          },
          // Title
          [`${itemCls}-title`]: {
            position: 'absolute',
            left: {
              _skip_check_: true,
              value: '50%'
            },
            transform: 'translateX(-50%)'
          },
          // Content
          [`${itemCls}-content`]: {
            position: 'absolute',
            left: {
              _skip_check_: true,
              value: '50%'
            },
            transform: 'translateX(-50%)'
          },
          // Placement
          '&-placement-start': {
            [`${itemCls}-title`]: {
              bottom: 'var(--timeline-alternate-content-offset)'
            },
            [`${itemCls}-content`]: {
              top: 'var(--timeline-alternate-content-offset)'
            }
          },
          '&-placement-end': {
            [`${itemCls}-title`]: {
              top: 'var(--timeline-alternate-content-offset)'
            },
            [`${itemCls}-content`]: {
              bottom: 'var(--timeline-alternate-content-offset)'
            }
          }
        }
      },
      // =============================================================
      // ==                        Same Side                        ==
      // =============================================================
      [`&:not(${componentCls}-layout-alternate)`]: {
        [`${itemCls}-placement-end`]: {
          display: 'flex',
          alignItems: 'flex-end',
          [`${itemCls}-wrapper`]: {
            flex: 'auto',
            flexDirection: 'column-reverse'
          },
          [`${itemCls}-rail`]: {
            top: 'auto',
            bottom: 'var(--steps-horizontal-rail-margin)',
            transform: 'translateY(50%)'
          }
        }
      }
    }
  };
};
var _default = exports.default = genHorizontalStyle;