86 lines
1.9 KiB
TypeScript
86 lines
1.9 KiB
TypeScript
import { createStyles } from 'antd-style'
|
|
|
|
export default createStyles(({ cx, css, token }) => {
|
|
const title = cx(css`
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
|
color: ${token.colorPrimary};
|
|
overflow: hidden;
|
|
`)
|
|
|
|
const titleIcon = cx(css`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: ${token.paddingXS}px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: ${token.sizeMD}px;
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
transform: rotateZ(180deg);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: ${token.colorBgLayout};
|
|
}
|
|
`)
|
|
|
|
const titleText = cx(css`
|
|
flex: 1;
|
|
font-size: ${token.fontSizeHeading3}px;
|
|
text-align: center;
|
|
letter-spacing: ${token.sizeXS}px;
|
|
`)
|
|
|
|
return {
|
|
sidebar: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
userSelect: 'none',
|
|
transition: 'all .3s',
|
|
whiteSpace: 'nowrap'
|
|
},
|
|
|
|
title,
|
|
|
|
titleIcon,
|
|
|
|
titleText,
|
|
|
|
content: {
|
|
display: 'flex',
|
|
minHeight: 0,
|
|
flexDirection: 'column',
|
|
flex: 1,
|
|
|
|
'ul > li, ul > div > li': {
|
|
padding: `${token.paddingXXS}px ${token.paddingSM}px`
|
|
}
|
|
},
|
|
|
|
collapse: cx(css`
|
|
width: ${token.sizeXL * 2}px !important;
|
|
|
|
.${title} {
|
|
.${titleIcon} {
|
|
span {
|
|
transform: rotateZ(360deg);
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
|
|
.${titleText} {
|
|
display: none;
|
|
}
|
|
}
|
|
`)
|
|
}
|
|
})
|