85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
import { createStyles } from 'antd-style'
|
|
|
|
export default createStyles(({ cx, css, token }) => {
|
|
const menuBt = cx(css`
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: all 0.2s;
|
|
background-color: ${token.colorBgContainer};
|
|
}
|
|
`)
|
|
|
|
const active = cx(css`
|
|
color: ${token.colorTextLightSolid};
|
|
background-color: ${token.colorPrimary} !important;
|
|
`)
|
|
|
|
return {
|
|
item: css`
|
|
position: relative;
|
|
font-size: ${token.fontSizeHeading5}px;
|
|
|
|
&:hover > div > a:not(.${active}),
|
|
&:hover > a:not(.${active}) {
|
|
background-color: ${token.colorBgLayout};
|
|
}
|
|
`,
|
|
|
|
submenuItem: css`
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
padding: 0 !important;
|
|
|
|
a {
|
|
display: block;
|
|
padding: ${token.paddingXS}px ${token.paddingMD}px;
|
|
transition: all 0.2s;
|
|
}
|
|
`,
|
|
|
|
menuBt,
|
|
|
|
active,
|
|
|
|
icon: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: `0 ${token.paddingXS}px`,
|
|
width: 40,
|
|
height: 40,
|
|
flex: '0 0 auto',
|
|
fontSize: token.sizeMD,
|
|
cursor: 'pointer',
|
|
|
|
img: {
|
|
width: '100%'
|
|
}
|
|
},
|
|
|
|
text: {
|
|
flex: 1,
|
|
paddingLeft: token.paddingXS,
|
|
width: 0,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis'
|
|
},
|
|
|
|
collapsedText: {
|
|
display: 'none'
|
|
},
|
|
|
|
collapsedExtend: {
|
|
display: 'none'
|
|
}
|
|
}
|
|
})
|