@aplus-frontend/ui
Version:
142 lines (141 loc) • 4.06 kB
JavaScript
import { genComponentStyleHook as r } from "../../../utils/cssinjs/index.mjs";
const a = (i) => {
const { componentCls: e, apSelectLayoutSideWidth: l } = i;
return {
[e]: {
display: "flex",
width: "100%",
height: "100%",
[`${e}-side`]: {
display: "flex",
flexDirection: "column",
width: l,
minWidth: l,
maxWidth: l,
marginInlineEnd: i.spaceXL,
overflow: "hidden",
backgroundColor: "#fff",
"&__header": {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
paddingInline: i.spaceXL,
paddingBlock: i.spaceLG,
borderBottom: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`,
overflow: "hidden",
whiteSpace: "nowrap",
"& > h3": {
margin: 0,
color: i.textColor1,
fontSize: i.fontSize,
fontWeight: "bold",
lineHeight: i.lineHeightLG
},
"&--imgWrap": {
borderRadius: i.borderRadiusSM,
cursor: "pointer",
fontSize: i.fontSizeXXL,
color: i.textColor3,
display: "flex",
"&:hover": {
background: i.colorBg3
}
}
},
"&__body": {
position: "relative",
flex: 1,
"&--search": {
marginBlock: i.spaceMD,
paddingInline: i.spaceXL
},
"&--scroll": {
position: "absolute",
insetBlockStart: i.calc(i.controlHeight).add(i.calc(i.spaceMD).mul(2)).add(i.calc(i.lineWidth).mul(2)).equal(),
insetBlockEnd: 0,
insetInlineStart: 0,
insetInlineEnd: 0,
overflowY: "auto",
paddingInline: i.spaceXL
},
"&--scroll-item": {
marginBottom: i.space,
paddingInline: i.spaceLG,
paddingBlock: i.space,
overflow: "hidden",
color: i.textColor1,
lineHeight: i.lineHeightLG,
width: i.calc(i.apSelectLayoutSideWidth).sub(
i.calc(i.controlHeight).add(i.calc(i.lineWidth).mul(2))
).equal(),
textOverflow: "ellipsis",
textWrap: "nowrap",
cursor: "pointer",
borderRadius: i.borderRadius,
"&:hover": {
background: i.colorBg3
},
"&.active": {
backgroundColor: i.calc(i.colorPrimary).colorMix(10),
color: i.colorPrimary,
fontWeight: "bold",
"& > .ant-typography": {
color: i.colorPrimary
}
}
}
}
},
".v-enter-active, .v-leave-active": {
transition: `all ${i.motionDurationMid}, background 0s`
},
".v-enter-from, .v-leave-to": {
width: 0,
minWidth: 0,
maxWidth: 0,
marginInlineEnd: 0
},
[`${e}-content`]: {
flex: 1,
overflowX: "hidden",
display: "flex",
flexDirection: "column",
"&__header": {
display: "flex",
alignItems: "center",
height: i.controlHeight,
paddingBlockStart: i.spaceXL,
paddingInlineStart: i.spaceXL,
boxSizing: "content-box",
background: "#fff",
"&--imgWrap": {
marginInlineEnd: i.spaceMD,
borderRadius: i.borderRadiusSM,
cursor: "pointer",
fontSize: i.fontSizeXXL,
display: "flex",
color: i.textColor3,
"&:hover": {
background: i.colorBg3
}
},
"&--title": {
margin: 0,
fontSize: i.fontSizeLG,
fontWeight: "bold",
lineHeight: i.lineHeightLG
}
}
}
}
};
}, d = r(
"ApSelectLayout",
(i) => [a(i)],
{
apSelectLayoutSideWidth: 214
}
);
export {
d as default
};