@ant-design/x/lib/sender/style/slot-textarea.js

Craft AI-driven interfaces effortlessly

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
const genSlotTextAreaStyle = token => {
  const {
    componentCls,
    antCls,
    calc
  } = token;
  const slotCls = `${componentCls}-slot`;
  const antInputCls = `${antCls}-input`;
  const antDropdownCls = `${antCls}-dropdown-trigger`;
  const slotInputCls = `${componentCls}-slot-input`;
  const slotSelectCls = `${componentCls}-slot-select`;
  const slotTagCls = `${componentCls}-slot-tag`;
  const slotContentCls = `${componentCls}-slot-content`;
  const skillCls = `${componentCls}-skill`;
  return {
    [componentCls]: {
      [`${componentCls}-input-slot`]: {
        outline: 'none',
        cursor: 'text',
        whiteSpace: 'pre-wrap',
        width: '100%',
        caretColor: token.colorPrimary,
        fontSize: token.fontSize,
        lineHeight: token.lineHeight,
        '&:empty::before': {
          content: 'attr(data-placeholder)',
          color: token.colorTextPlaceholder
        }
      },
      [`${slotCls}:not(${slotContentCls})`]: {
        display: 'inline-block',
        verticalAlign: 'middle',
        alignItems: 'center',
        marginBlock: 1,
        height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
        wordBreak: 'break-all',
        marginInline: token.marginXXS
      },
      [`${antInputCls}${slotInputCls}`]: {
        height: '100%',
        background: token.colorBgSlot,
        outline: 'none',
        color: token.colorTextSlot,
        borderRadius: token.borderRadius,
        paddingInline: token.paddingXXS,
        fontSize: 'inherit',
        lineHeight: 'inherit',
        position: 'relative',
        '&::placeholder': {
          color: token.colorTextSlotPlaceholder,
          fontSize: 'inherit',
          lineHeight: 'inherit'
        },
        [slotCls]: {
          display: 'inline-flex',
          margin: `0 ${(0, _cssinjs.unit)(token.marginXXS)}`,
          verticalAlign: 'bottom',
          alignItems: 'center',
          marginBlock: (0, _cssinjs.unit)(calc(token.marginXXS).div(2).equal()),
          minHeight: token.controlHeightSM,
          wordBreak: 'break-all'
        }
      },
      [slotSelectCls]: {
        fontSize: token.fontSize,
        lineHeight: token.lineHeight,
        paddingInline: token.paddingXXS,
        transition: `border-color  ${token.motionDurationMid}`,
        position: 'relative',
        display: 'inline-flex',
        alignItems: 'center',
        cursor: 'pointer',
        background: token.colorBgSlot,
        height: '100%',
        boxSizing: 'border-box',
        borderRadius: token.borderRadius,
        color: token.colorTextSlot,
        border: `1px solid ${token.colorBorderSlot}`,
        '&.placeholder': {
          color: token.colorTextSlotPlaceholder
        },
        [`${slotSelectCls}`]: {
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
          padding: `0 ${(0, _cssinjs.unit)(token.paddingXXS)}`,
          transition: `border-color  ${token.motionDurationMid}`,
          position: 'relative',
          display: 'inline',
          cursor: 'pointer',
          background: token.colorBgSlot,
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: token.borderRadius,
          color: token.colorTextSlot,
          border: `1px solid ${token.colorBorderSlot}`,
          '&.placeholder': {
            color: token.colorTextSlotPlaceholder
          },
          [`&${antDropdownCls}-open`]: {
            borderColor: token.colorBorderSlotHover
          }
        },
        [`${slotSelectCls}-value`]: {
          flex: 1,
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
          '&:empty::before': {
            content: 'attr(data-placeholder)'
          }
        },
        [`${slotSelectCls}-arrow`]: {
          marginInlineStart: token.marginXXS,
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center'
        },
        [`${slotTagCls}`]: {
          background: token.colorBgSlot,
          border: `1px solid ${token.colorBorderSlot}`,
          outline: 'none',
          color: token.colorTextSlot,
          borderRadius: token.borderRadius,
          padding: `0 ${(0, _cssinjs.unit)(token.paddingXXS)}`,
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
          position: 'relative',
          cursor: 'default'
        }
      },
      [`${slotSelectCls}-arrow`]: {
        marginInlineStart: token.marginXXS,
        fontSize: token.fontSize,
        lineHeight: token.lineHeight,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      [slotTagCls]: {
        background: token.colorBgSlot,
        border: `1px solid ${token.colorBorderSlot}`,
        outline: 'none',
        color: token.colorTextSlot,
        borderRadius: token.borderRadius,
        padding: `0 ${(0, _cssinjs.unit)(token.paddingXXS)}`,
        fontSize: token.fontSize,
        lineHeight: token.lineHeight,
        height: '100%',
        boxSizing: 'border-box',
        position: 'relative',
        cursor: 'default'
      },
      [slotContentCls]: {
        height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
        caretColor: token.colorPrimary,
        background: token.colorBgSlot,
        outline: 'none',
        color: token.colorTextSlot,
        borderRadius: token.borderRadius,
        paddingInline: token.paddingXXS,
        boxSizing: 'border-box',
        verticalAlign: 'middle',
        fontSize: token.fontSize,
        marginBlock: 1,
        lineHeight: token.lineHeight,
        display: 'inline-block',
        position: 'relative',
        cursor: 'text',
        '&:empty': {
          width: 'fit-content',
          '&::after': {
            display: 'inline-block',
            height: 'inherit',
            content: 'attr(data-placeholder)',
            color: token.colorTextSlotPlaceholder
          }
        }
      },
      [`${slotCls}-no-width`]: {
        userSelect: 'none',
        width: '3px',
        display: 'inline-block',
        lineHeight: 'inherit'
      },
      [skillCls]: {
        display: 'inline-block',
        verticalAlign: 'baseline',
        alignItems: 'center',
        marginBlock: 1,
        height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
        wordBreak: 'break-all',
        paddingInlineEnd: 0,
        paddingInlineStart: 0,
        marginInlineEnd: 0,
        marginInlineStart: -1,
        [`&${skillCls}-empty`]: {
          '&::after': {
            display: 'inline-block',
            pointerEvents: 'none',
            height: 'inherit',
            content: 'attr(data-placeholder)',
            color: token.colorTextPlaceholder
          }
        }
      },
      [`${skillCls}-wrapper`]: {
        height: '100%',
        display: 'inline-flex'
      },
      [`${skillCls}-tag`]: {
        paddingInline: token.paddingXS,
        height: '100%',
        backgroundColor: token.colorBgSkill,
        borderRadius: token.borderRadius,
        color: token.colorPrimary,
        alignItems: 'center',
        fontWeight: 500,
        display: 'inline-flex',
        cursor: 'pointer',
        gap: token.marginXXS,
        transition: `background-color ${token.motionDurationMid}`,
        '&:hover': {
          backgroundColor: token.colorBgSkillHover,
          [`${skillCls}-tag-close:not(${skillCls}-tag-close-disabled)`]: {
            color: token.colorPrimaryHover
          }
        },
        '&-close': {
          fontSize: token.fontSizeSM,
          display: 'inline-flex',
          transition: `color ${token.motionDurationMid}`,
          color: token.colorPrimary
        },
        '&-close-disabled': {
          cursor: 'not-allowed',
          color: token.colorTextDisabled
        }
      },
      [`${skillCls}-holder`]: {
        width: token.marginXS,
        height: '100%'
      }
    }
  };
};
var _default = exports.default = genSlotTextAreaStyle;