83 lines
1.7 KiB
TypeScript
83 lines
1.7 KiB
TypeScript
import { createStyles } from 'antd-style'
|
|
|
|
export default createStyles(({ cx, css, token }) => {
|
|
const cover = cx(css`
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 50%;
|
|
background-color: ${token.colorBgLayout};
|
|
transition: all 0.8s ease;
|
|
`)
|
|
|
|
const ball = cx(css`
|
|
position: absolute;
|
|
width: ${token.sizeXL * 4}px;
|
|
height: ${token.sizeXL * 4}px;
|
|
background-color: ${token.colorPrimary};
|
|
border-radius: 50%;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(50%);
|
|
`)
|
|
|
|
return {
|
|
root: {
|
|
backgroundColor: token.colorBorderSecondary,
|
|
userSelect: 'none',
|
|
|
|
a: {
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
|
|
signBox: {
|
|
position: 'relative',
|
|
backgroundColor: token.colorBgContainer,
|
|
width: 900,
|
|
height: 600,
|
|
overflow: 'hidden',
|
|
borderRadius: token.borderRadiusLG
|
|
},
|
|
|
|
switch: css`
|
|
.${cover} {
|
|
transform: translateX(100%);
|
|
transition: all 0.8s ease;
|
|
}
|
|
`,
|
|
|
|
side: {
|
|
opacity: 1,
|
|
transition: 'all 1s ease',
|
|
|
|
'> *': {
|
|
width: '100%',
|
|
height: '100%'
|
|
}
|
|
},
|
|
|
|
hidden: {
|
|
opacity: 0
|
|
},
|
|
|
|
cover,
|
|
|
|
ballBox: {
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
},
|
|
|
|
ball,
|
|
|
|
mask: css`
|
|
transform: rotateZ(180deg);
|
|
filter: blur(${token.sizeSM}px);
|
|
|
|
.${ball} {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
`
|
|
}
|
|
})
|