antd/lib/space/style/addon.js

An enterprise-class UI design language and React components implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _compactItem = require("../../style/compact-item");
var _internal = require("../../theme/internal");
const genSpaceAddonStyle = token => {
  const {
    componentCls,
    borderRadius,
    paddingSM,
    colorBorder,
    paddingXS,
    fontSizeLG,
    fontSizeSM,
    borderRadiusLG,
    borderRadiusSM,
    colorBgContainerDisabled,
    lineWidth
  } = token;
  return {
    [componentCls]: [
    // ==========================================================
    // ==                         Base                         ==
    // ==========================================================
    {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 0,
      paddingInline: paddingSM,
      margin: 0,
      borderWidth: lineWidth,
      borderStyle: 'solid',
      borderRadius,
      '&:hover': {
        zIndex: 0
      },
      [`&${componentCls}-disabled`]: {
        color: token.colorTextDisabled
      },
      '&-large': {
        fontSize: fontSizeLG,
        borderRadius: borderRadiusLG
      },
      '&-small': {
        paddingInline: paddingXS,
        borderRadius: borderRadiusSM,
        fontSize: fontSizeSM
      },
      '&-compact-last-item': {
        borderEndStartRadius: 0,
        borderStartStartRadius: 0
      },
      '&-compact-first-item': {
        borderEndEndRadius: 0,
        borderStartEndRadius: 0
      },
      '&-compact-item:not(:first-child):not(:last-child)': {
        borderRadius: 0
      },
      '&-compact-item:not(:last-child)': {
        borderInlineEndWidth: 0
      },
      '&-compact-item:not(:first-child)': {
        borderInlineStartWidth: 0
      }
    },
    // ==========================================================
    // ==                       Variants                       ==
    // ==========================================================
    {
      '--space-addon-border-color': colorBorder,
      '--space-addon-background': colorBgContainerDisabled,
      // Filled
      '--space-addon-border-color-outlined': colorBorder,
      '--space-addon-background-filled': colorBgContainerDisabled,
      borderColor: 'var(--space-addon-border-color)',
      background: 'var(--space-addon-background)',
      // ======================= Outlined =======================
      '&-variant-outlined': {
        '--space-addon-border-color': 'var(--space-addon-border-color-outlined)'
      },
      // ======================== Filled ========================
      '&-variant-filled': {
        '--space-addon-border-color': 'transparent',
        '--space-addon-background': 'var(--space-addon-background-filled)',
        // Disabled
        [`&${componentCls}-disabled`]: {
          '--space-addon-border-color': colorBorder,
          '--space-addon-background': colorBgContainerDisabled
        }
      },
      // ====================== Borderless ======================
      '&-variant-borderless': {
        border: 'none',
        background: 'transparent'
      },
      // ====================== Underlined ======================
      '&-variant-underlined': {
        border: 'none',
        background: 'transparent'
      }
    },
    // ==========================================================
    // ==                        Status                        ==
    // ==========================================================
    {
      '&-status-error': {
        '--space-addon-border-color-outlined': token.colorError,
        '--space-addon-background-filled': token.colorErrorBg,
        color: token.colorError
      },
      '&-status-warning': {
        '--space-addon-border-color-outlined': token.colorWarning,
        '--space-addon-background-filled': token.colorWarningBg,
        color: token.colorWarning
      }
    }]
  };
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genStyleHooks)(['Space', 'Addon'], token => [genSpaceAddonStyle(token), (0, _compactItem.genCompactItemStyle)(token, {
  focus: false
})]);