source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Layout.Sider content overflow when collapsedWidth={0} (#52862)

Browse Source
This commit is contained in:
afc163
2025-02-18 13:59:27 +08:00
committed by GitHub
parent e7b0a9c319
commit 70ccc043cc
1 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/layout/style/sider.ts
View File

@@ -56,6 +56,10 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
},
},
[`&-zero-width ${componentCls}-children`]: {
overflow: 'hidden',
},
[`${componentCls}-trigger`]: {
position: 'fixed',
bottom: 0,
@@ -69,44 +73,38 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
transition: `all ${motionDurationMid}`,
},
[`${componentCls}-zero-width`]: {
'> *': {
overflow: 'hidden',
[`${componentCls}-zero-width-trigger`]: {
position: 'absolute',
top: headerHeight,
insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
zIndex: 1,
width: zeroTriggerWidth,
height: zeroTriggerHeight,
color: triggerColor,
fontSize: token.fontSizeXL,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: siderBg,
borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
cursor: 'pointer',
transition: `background ${motionDurationSlow} ease`,
'&::after': {
position: 'absolute',
inset: 0,
background: 'transparent',
transition: `all ${motionDurationSlow}`,
content: '""',
},
'&-trigger': {
position: 'absolute',
top: headerHeight,
insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
zIndex: 1,
width: zeroTriggerWidth,
height: zeroTriggerHeight,
color: triggerColor,
fontSize: token.fontSizeXL,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: siderBg,
borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
cursor: 'pointer',
transition: `background ${motionDurationSlow} ease`,
'&:hover::after': {
background: `rgba(255, 255, 255, 0.2)`,
},
'&::after': {
position: 'absolute',
inset: 0,
background: 'transparent',
transition: `all ${motionDurationSlow}`,
content: '""',
},
'&:hover::after': {
background: `rgba(255, 255, 255, 0.2)`,
},
'&-right': {
insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
borderRadius: `${unit(borderRadiusLG)} 0 0 ${unit(borderRadiusLG)}`,
},
'&-right': {
insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
borderRadius: `${unit(borderRadiusLG)} 0 0 ${unit(borderRadiusLG)}`,
},
},