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