ant-design-x-vue-next/es/sender/style/slot-textarea.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as h } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
const x = (i) => {
  const { componentCls: l, antCls: a, calc: r } = i, d = `${l}-slot`, t = `${a}-input`, c = `${t}-borderless`, s = `${l}-slot-input`, e = `${l}-slot-select`, g = `${l}-slot-tag`, n = `${l}-slot-content`, o = `${l}-skill`;
  return {
    [l]: {
      [`${l}-input-slot`]: {
        outline: "none",
        cursor: "text",
        whiteSpace: "pre-wrap",
        width: "100%",
        caretColor: i.colorPrimary,
        fontSize: i.fontSize,
        lineHeight: i.lineHeight,
        "&:empty::before": {
          content: "attr(data-placeholder)",
          color: i.colorTextPlaceholder
        }
      },
      [`${d}:not(${n})`]: {
        display: "inline-block",
        verticalAlign: "middle",
        alignItems: "center",
        marginBlock: 1,
        height: r(i.fontSize).mul(i.lineHeight).add(2).equal(),
        wordBreak: "break-all",
        marginInline: i.marginXXS
      },
      [`${t}${s}`]: {
        height: "100%",
        background: i.colorBgSlot,
        outline: "none",
        color: i.colorTextSlot,
        borderRadius: i.borderRadius,
        paddingInline: i.paddingXXS,
        fontSize: "inherit",
        lineHeight: "inherit",
        position: "relative",
        [`&${c}`]: {
          "&:focus-visible, &:has(input:focus-visible), &:has(textarea:focus-visible)": {
            outline: "none"
          }
        },
        "&::placeholder": {
          color: i.colorTextSlotPlaceholder,
          fontSize: "inherit",
          lineHeight: "inherit"
        }
      },
      [e]: {
        fontSize: i.fontSize,
        lineHeight: i.lineHeight,
        paddingInline: i.paddingXXS,
        transition: `border-color ${i.motionDurationMid}`,
        position: "relative",
        display: "inline-flex",
        alignItems: "center",
        cursor: "pointer",
        background: i.colorBgSlot,
        height: "100%",
        boxSizing: "border-box",
        borderRadius: i.borderRadius,
        color: i.colorTextSlot,
        border: `1px solid ${i.colorBorderSlot}`,
        "&.placeholder": {
          color: i.colorTextSlotPlaceholder
        },
        [`${e}-value`]: {
          flex: 1,
          fontSize: i.fontSize,
          lineHeight: i.lineHeight,
          "&:empty::before": {
            content: "attr(data-placeholder)"
          }
        },
        [`${e}-arrow`]: {
          marginInlineStart: i.marginXXS,
          fontSize: i.fontSize,
          lineHeight: i.lineHeight,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center"
        }
      },
      [g]: {
        background: i.colorBgSlot,
        border: `1px solid ${i.colorBorderSlot}`,
        outline: "none",
        color: i.colorTextSlot,
        borderRadius: i.borderRadius,
        padding: `0 ${h(i.paddingXXS)}`,
        fontSize: i.fontSize,
        lineHeight: i.lineHeight,
        height: "100%",
        boxSizing: "border-box",
        position: "relative",
        cursor: "default"
      },
      [n]: {
        height: r(i.fontSize).mul(i.lineHeight).add(2).equal(),
        caretColor: i.colorPrimary,
        background: i.colorBgSlot,
        outline: "none",
        color: i.colorTextSlot,
        borderRadius: i.borderRadius,
        paddingInline: i.paddingXXS,
        boxSizing: "border-box",
        verticalAlign: "middle",
        fontSize: i.fontSize,
        marginBlock: 1,
        lineHeight: i.lineHeight,
        display: "inline-block",
        position: "relative",
        cursor: "text",
        "&:empty": {
          width: "fit-content",
          "&::after": {
            display: "inline-block",
            height: "inherit",
            content: "attr(data-placeholder)",
            color: i.colorTextSlotPlaceholder
          }
        }
      },
      [o]: {
        display: "inline-block",
        verticalAlign: "baseline",
        alignItems: "center",
        marginBlock: 1,
        height: r(i.fontSize).mul(i.lineHeight).add(2).equal(),
        wordBreak: "break-all",
        paddingInlineEnd: 0,
        paddingInlineStart: 0,
        marginInlineEnd: 0,
        marginInlineStart: -1
      },
      [`${o}-wrapper`]: {
        height: "100%",
        display: "inline-flex"
      },
      [`${o}-tag`]: {
        paddingInline: i.paddingXS,
        height: "100%",
        backgroundColor: i.colorBgSkill,
        borderRadius: i.borderRadius,
        color: i.colorPrimary,
        alignItems: "center",
        fontWeight: 500,
        display: "inline-flex",
        cursor: "pointer",
        gap: i.marginXXS,
        transition: `background-color ${i.motionDurationMid}`,
        "&:hover": {
          backgroundColor: i.colorBgSkillHover,
          [`${o}-close:not(${o}-close-disabled)`]: {
            color: i.colorPrimaryHover
          }
        },
        "&-close": {
          fontSize: i.fontSizeSM,
          display: "inline-flex",
          transition: `color ${i.motionDurationMid}`,
          color: i.colorPrimary
        },
        "&-close-disabled": {
          cursor: "not-allowed",
          color: i.colorTextDisabled
        }
      },
      [`${o}-holder`]: {
        width: i.marginXS,
        height: "100%"
      }
    }
  };
};
export {
  x as default
};