@aplus-frontend/ui
Version:
109 lines (108 loc) • 2.83 kB
JavaScript
import { resetComponent as o } from "../../style/index.mjs";
import { genComponentStyleHook as n } from "../../utils/cssinjs/index.mjs";
const s = (i) => {
const {
componentCls: e,
checkCardDisabledOutlineColor: l,
checkCardIndicatorSize: a,
checkCardOutlineWidth: r,
checkCardIndicatorOffset: d
} = i, c = i.calc(a).mul(2).equal();
return {
[`${e}`]: {
...o(i),
borderRadius: i.borderRadius,
position: "relative",
"&--disabled": {
backgroundColor: i.checkCardDisabledBg,
cursor: "not-allowed !important"
},
"&--bordered": {
outline: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`
},
[`&:hover:not(${e}--disabled)`]: {
cursor: "pointer",
outline: `${i.lineWidth} ${i.lineType} ${i.colorPrimary}`
},
"&::after": {
content: '""',
position: "absolute",
width: 0,
height: 0,
insetBlockStart: 0,
insetInlineEnd: 0,
clipPath: "polygon(100% 0, 100% 100%, 0 0)",
background: i.colorPrimary,
borderTopRightRadius: i.calc(i.borderRadius).add("2px").equal()
},
"&--checked": {
outline: `${r} ${i.lineType} ${i.colorPrimary}`,
[`&:hover:not(${e}--disabled)`]: {
outline: `${r} ${i.lineType} ${i.colorPrimary}`
},
"&::after": {
width: c,
height: c,
insetBlockStart: d,
insetInlineEnd: d,
transition: ["width", "height", "inset"].map(
(t) => `${t} ${i.motionDurationSlow} cubic-bezier(0.645, 0.045, 0.355, 1)`
).join(", ")
},
[`&${e}--disabled`]: {
outlineColor: l,
"&::after": {
backgroundColor: l
}
}
},
"&--middle": {
padding: i.spaceLG
},
"&--small": {
padding: `${i.spaceSM} ${i.spaceLG}`
},
[`${e}__title`]: {
...o(i),
marginBottom: i.spaceXS,
color: i.textColor1,
fontWeight: "bold",
"&--disabled": {
color: i.textColor4
}
},
[`${e}__content`]: {
...o(i),
color: i.textColor1,
"&--disabled": {
color: i.textColor4
}
},
[`${e}__checked-icon`]: {
position: "absolute",
top: 0,
right: 0,
zIndex: 1,
lineHeight: 1,
userSelect: "none",
"& > img": {
width: i.calc(a).sub(r).equal(),
verticalAlign: "top"
}
}
}
};
}, p = n(
"CheckCard",
(i) => [s(i)],
{
checkCardDisabledBg: "#F9F9FA",
checkCardDisabledOutlineColor: "#E9EDF3",
checkCardIndicatorSize: 14,
checkCardOutlineWidth: 2,
checkCardIndicatorOffset: -2
}
);
export {
p as default
};