@aplus-frontend/ui
Version:
103 lines (102 loc) • 3.21 kB
JavaScript
const o = (i) => {
const { componentCls: r } = i;
return {
[`${r}-picture`]: {
".picture-context": {
display: "grid",
gap: i.spaceXL,
gridTemplateColumns: "repeat(auto-fill, 100px)",
userSelect: "none",
".picture-upload": {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: "100px",
overflow: "hidden",
transition: `all ${i.motionDurationMid}`,
border: `${i.lineWidth} dashed ${i.borderColorBase}`,
borderRadius: i.borderRadius,
background: i.colorBgLayout,
color: i.textColor4,
fontSize: i.fontSizeXL,
cursor: "pointer",
aspectRatio: "1 / 1",
"& > * + *": { marginTop: i.spaceXS, fontSize: i.fontSize },
"&:hover": {
border: `${i.lineWidth} dashed ${i.colorPrimary}`
}
},
".picture-item": {
width: i.apUploadPictureItemWidth,
padding: i.space,
overflow: "hidden",
border: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`,
borderRadius: i.borderRadius,
background: "#fff",
aspectRatio: "1 / 1",
".picture-item-box": {
position: "relative",
width: "100%",
height: "100%",
borderRadius: i.borderRadiusSM,
"& > img": {
width: "100%",
height: "100%",
borderRadius: i.borderRadiusSM,
objectFit: "cover"
},
"&:hover > .picture-item-shadow": {
display: "block !important"
},
".picture-item-shadow": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: i.borderRadiusSM,
background: "rgb(0 0 0 / 50%)",
color: "#fff",
fontSize: i.fontSize,
".picture-item-close": {
display: "flex",
position: "absolute",
top: 0,
right: 0,
alignItems: "center",
justifyContent: "center",
width: i.apUploadPictureCloseIconWidth,
overflow: "hidden",
transform: "translate(30%, -30%)",
border: `${i.lineWidth} ${i.lineType} #fff`,
borderRadius: "50%",
background: i.colorError,
color: "#fff",
fontSize: i.fontSizeSM,
cursor: "pointer",
aspectRatio: "1 / 1"
},
".picture-item-uploading": {
position: "absolute",
top: "50%",
left: "50%",
width: "84%",
transform: "translate(-50%, -50%)",
textAlign: "center"
}
}
}
}
},
".picture-title": {
marginTop: "8px",
color: i.textColor3,
fontSize: "12px"
}
}
};
};
export {
o as pictureStyle
};