ant-design-x-vue
Version:
Craft AI-driven interfaces effortlessly
158 lines (157 loc) • 4.47 kB
JavaScript
const o = (i) => {
const { componentCls: d, antCls: t, calc: r } = i, e = `${d}-list-card`, a = r(i.fontSize).mul(i.lineHeight).mul(2).add(i.paddingSM).add(i.paddingSM).equal();
return {
[e]: {
borderRadius: i.borderRadius,
position: "relative",
background: i.colorFillContent,
borderWidth: i.lineWidth,
borderStyle: "solid",
borderColor: "transparent",
flex: "none",
// =============================== Desc ================================
[`${e}-name,${e}-desc`]: {
display: "flex",
flexWrap: "nowrap",
maxWidth: "100%"
},
[`${e}-ellipsis-prefix`]: {
flex: "0 1 auto",
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
[`${e}-ellipsis-suffix`]: {
flex: "none"
},
// ============================= Overview ==============================
"&-type-overview": {
padding: r(i.paddingSM).sub(i.lineWidth).equal(),
paddingInlineStart: r(i.padding).add(i.lineWidth).equal(),
display: "flex",
flexWrap: "nowrap",
gap: i.paddingXS,
alignItems: "flex-start",
width: 236,
// Icon
[`${e}-icon`]: {
fontSize: r(i.fontSizeLG).mul(2).equal(),
lineHeight: 1,
paddingTop: r(i.paddingXXS).mul(1.5).equal(),
flex: "none"
},
// Content
[`${e}-content`]: {
flex: "auto",
minWidth: 0,
display: "flex",
flexDirection: "column",
alignItems: "stretch"
},
[`${e}-desc`]: {
color: i.colorTextTertiary
}
},
// ============================== Preview ==============================
"&-type-preview": {
width: a,
height: a,
lineHeight: 1,
display: "flex",
alignItems: "center",
[`&:not(${e}-status-error)`]: {
border: 0
},
// Img
[`${t}-image`]: {
width: "100%",
height: "100%",
borderRadius: "inherit",
img: {
height: "100%",
objectFit: "cover",
borderRadius: "inherit"
}
},
// Mask
[`${e}-img-mask`]: {
position: "absolute",
inset: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
background: `rgba(0, 0, 0, ${i.opacityLoading})`,
borderRadius: "inherit"
},
// Error
[`&${e}-status-error`]: {
[`img, ${e}-img-mask`]: {
borderRadius: r(i.borderRadius).sub(i.lineWidth).equal()
},
[`${e}-desc`]: {
paddingInline: i.paddingXXS
}
},
// Progress
[`${e}-progress`]: {}
},
// ============================ Remove Icon ============================
[`${e}-remove`]: {
position: "absolute",
top: 0,
insetInlineEnd: 0,
border: 0,
padding: i.paddingXXS,
background: "transparent",
lineHeight: 1,
transform: "translate(50%, -50%)",
fontSize: i.fontSize,
cursor: "pointer",
opacity: i.opacityLoading,
display: "none",
"&:dir(rtl)": {
transform: "translate(-50%, -50%)"
},
"&:hover": {
opacity: 1
},
"&:active": {
opacity: i.opacityLoading
}
},
[`&:hover ${e}-remove`]: {
display: "block"
},
// ============================== Status ===============================
"&-status-error": {
borderColor: i.colorError,
[`${e}-desc`]: {
color: i.colorError
}
},
// ============================== Motion ===============================
"&-motion": {
overflow: "hidden",
transition: ["opacity", "width", "margin", "padding"].map((n) => `${n} ${i.motionDurationSlow}`).join(","),
[`${e}-remove`]: {
display: "none !important"
},
"&-appear-start": {
width: 0,
transition: "none"
},
"&-leave-active": {
opacity: 0,
width: 0,
paddingInline: 0,
borderInlineWidth: 0,
marginInlineEnd: r(i.paddingSM).mul(-1).equal()
}
}
}
};
};
export {
o as default
};