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

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

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as m } from "../../_util/cssinjs/util.mjs";
import a from "../../_util/cssinjs/Keyframes.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as s } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as d } from "../../theme/genStyleUtils.mjs";
import { genVariantStyle as c, genShapeStyle as p } from "./content.mjs";
import { genDividerBubbleStyle as f } from "./divider.mjs";
import g from "./list.mjs";
import { genSystemBubbleStyle as u } from "./system.mjs";
const y = new a("loadingMove", {
  "0%": {
    transform: "translateY(0)"
  },
  "10%": {
    transform: "translateY(4px)"
  },
  "20%": {
    transform: "translateY(0)"
  },
  "30%": {
    transform: "translateY(-4px)"
  },
  "40%": {
    transform: "translateY(0)"
  }
}), x = new a("cursorBlink", {
  "0%": {
    opacity: 1
  },
  "50%": {
    opacity: 0
  },
  "100%": {
    opacity: 1
  }
}), h = new a("bubbleFadeIn", {
  "0%": {
    opacity: 0
  },
  "100%": {
    opacity: 1
  }
}), S = (n) => {
  const { componentCls: t, fontSize: i, lineHeight: e, paddingSM: o, colorText: l, calc: r } = n;
  return {
    [t]: {
      display: "flex",
      columnGap: o,
      [`&${t}-end`]: {
        justifyContent: "end",
        flexDirection: "row-reverse",
        [`& ${t}-content-wrapper`]: {
          alignItems: "flex-end"
        },
        [`& ${t}-editing-opts`]: {
          flexDirection: "row-reverse"
        }
      },
      [`& ${t}-content-editing`]: {
        minWidth: 120,
        "[contenteditable]": {
          outline: "none",
          minHeight: "1em",
          whiteSpace: "pre-wrap",
          wordBreak: "break-word"
        },
        [`${t}-editing-opts`]: {
          marginTop: n.marginXS
        }
      },
      [`&${t}-rtl`]: {
        direction: "rtl"
      },
      [`&${t}-typing ${t}-content:last-child::after`]: {
        content: '"|"',
        fontWeight: 900,
        userSelect: "none",
        opacity: 1,
        marginInlineStart: "0.1em",
        animationName: x,
        animationDuration: "0.8s",
        animationIterationCount: "infinite",
        animationTimingFunction: "linear"
      },
      // ============================ Avatar =============================
      [`& ${t}-avatar`]: {
        display: "inline-flex",
        justifyContent: "center",
        alignSelf: "flex-start"
      },
      // ======================== Header & Footer ========================
      [`& ${t}-header, & ${t}-footer`]: {
        fontSize: i,
        lineHeight: e,
        color: n.colorText
      },
      [`& ${t}-header`]: {
        marginBottom: n.paddingXXS
      },
      [`& ${t}-footer`]: {
        display: "flex",
        marginTop: o,
        "&-start": {
          flexDirection: "row",
          justifyContent: "flex-start"
        },
        "&-end": {
          flexDirection: "row",
          justifyContent: "flex-end"
        }
      },
      // ============================ Extra ==============================
      [`& ${t}-extra`]: {
        alignSelf: "flex-start",
        display: "inline-flex",
        alignItems: "center",
        flex: "none",
        fontSize: i,
        lineHeight: e,
        color: n.colorTextDescription
      },
      [`& ${t}-content-with-footer`]: {
        display: "flex",
        flexDirection: "column",
        gap: n.paddingXXS,
        width: "100%"
      },
      [`&${t}-fade-in .fade-in`]: {
        display: "inline",
        animationName: h,
        animationDuration: "1s",
        animationTimingFunction: "linear"
      },
      // =========================== Content =============================
      [`& ${t}-content-wrapper`]: {
        flex: "auto",
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        minWidth: 0,
        maxWidth: "100%"
      },
      [`& ${t}-content`]: {
        position: "relative",
        boxSizing: "border-box",
        minWidth: 0,
        maxWidth: "100%",
        color: l,
        fontSize: n.fontSize,
        lineHeight: n.lineHeight,
        minHeight: r(o).mul(2).add(r(e).mul(i)).equal(),
        wordBreak: "break-word",
        [`& ${t}-dot`]: {
          position: "relative",
          height: "100%",
          display: "flex",
          alignItems: "center",
          columnGap: n.marginXS,
          padding: `0 ${m(n.paddingXXS)}`,
          "&-item": {
            backgroundColor: n.colorPrimary,
            borderRadius: "100%",
            width: 4,
            height: 4,
            animationName: y,
            animationDuration: "2s",
            animationIterationCount: "infinite",
            animationTimingFunction: "linear",
            "&:nth-child(1)": {
              animationDelay: "0s"
            },
            "&:nth-child(2)": {
              animationDelay: "0.2s"
            },
            "&:nth-child(3)": {
              animationDelay: "0.4s"
            }
          }
        }
      }
    }
  };
}, b = () => ({}), z = d(
  "Bubble",
  (n) => {
    const t = s(n, {});
    return [
      S(t),
      g(t),
      c(t),
      p(t),
      u(t),
      f(t)
    ];
  },
  b
);
export {
  z as default,
  b as prepareComponentToken
};