ant-design-x-vue-next/es/prompts/style/index.mjs

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

import { genStyleHooks as i } from "../../theme/genStyleUtils.mjs";
import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as o } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as l } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { initFadeLeftMotion as n, initFadeMotion as a } from "../../style/motion/fade.mjs";
const d = (r) => {
  const { componentCls: t } = r;
  return {
    [t]: {
      // ======================== Prompt ========================
      "&, & *": {
        boxSizing: "border-box"
      },
      maxWidth: "100%",
      [`&${t}-rtl`]: {
        direction: "rtl"
      },
      [`& ${t}-title`]: {
        marginBlockStart: 0,
        fontWeight: "normal",
        color: r.colorTextTertiary
      },
      [`& ${t}-list`]: {
        display: "flex",
        gap: r.paddingSM,
        overflowX: "auto",
        // Hide scrollbar
        scrollbarWidth: "none",
        "-ms-overflow-style": "none",
        "&::-webkit-scrollbar": {
          display: "none"
        },
        listStyle: "none",
        paddingInlineStart: 0,
        marginBlock: 0,
        alignItems: "stretch",
        "&-wrap": {
          flexWrap: "wrap"
        },
        "&-vertical": {
          flexDirection: "column",
          alignItems: "flex-start"
        }
      },
      // ========================= Item =========================
      [`${t}-item`]: {
        flex: "none",
        display: "flex",
        gap: r.paddingXS,
        height: "auto",
        paddingBlock: r.paddingSM,
        paddingInline: r.padding,
        alignItems: "flex-start",
        justifyContent: "flex-start",
        background: r.colorBgContainer,
        borderRadius: r.borderRadiusLG,
        transition: ["border", "background"].map((e) => `${e} ${r.motionDurationSlow}`).join(","),
        border: `${o(r.lineWidth)} ${r.lineType} ${r.colorBorderSecondary}`,
        [`&:not(${t}-item-has-nest)`]: {
          "&:hover": {
            cursor: "pointer",
            background: r.colorFillTertiary
          },
          "&:active": {
            background: r.colorFill
          }
        },
        [`${t}-content`]: {
          flex: "auto",
          minWidth: 0,
          display: "flex",
          gap: r.paddingXXS,
          flexDirection: "column",
          alignItems: "flex-start"
        },
        [`${t}-icon, ${t}-label, ${t}-desc`]: {
          margin: 0,
          padding: 0,
          fontSize: r.fontSize,
          lineHeight: r.lineHeight,
          textAlign: "start",
          whiteSpace: "normal"
        },
        [`${t}-label`]: {
          color: r.colorTextHeading,
          fontWeight: 500
        },
        [`${t}-label + ${t}-desc`]: {
          color: r.colorTextTertiary
        },
        // Disabled
        [`&${t}-item-disabled`]: {
          pointerEvents: "none",
          background: r.colorBgContainerDisabled,
          [`${t}-label, ${t}-desc`]: {
            color: r.colorTextTertiary
          }
        }
      }
    }
  };
}, s = (r) => {
  const { componentCls: t } = r;
  return {
    [t]: {
      // ========================= Parent =========================
      [`${t}-item-has-nest`]: {
        [`> ${t}-content`]: {
          // gap: token.paddingSM,
          [`> ${t}-label`]: {
            fontSize: r.fontSizeLG,
            lineHeight: r.lineHeightLG
          }
        }
      },
      // ========================= Nested =========================
      [`&${t}-nested`]: {
        marginTop: r.paddingXS,
        // ======================== Prompt ========================
        alignSelf: "stretch",
        [`${t}-list`]: {
          alignItems: "stretch"
        },
        // ========================= Item =========================
        [`${t}-item`]: {
          border: 0,
          background: r.colorFillQuaternary
        }
      }
    }
  };
}, c = () => ({}), h = i(
  "Prompts",
  (r) => {
    const t = l(r, {});
    return [
      d(t),
      s(t),
      n(t, !0),
      a(t, !0)
    ];
  },
  c
);
export {
  h as default,
  c as prepareComponentToken
};