86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { createStyles } from 'antd-style';
|
|
|
|
export const useStyle = createStyles(({ token, css, cx }) => {
|
|
const lunar = css`
|
|
color: ${token.colorTextTertiary};
|
|
font-size: ${token.fontSizeSM}px;
|
|
`;
|
|
return {
|
|
wrapper: css`
|
|
width: 450px;
|
|
border: 1px solid ${token.colorBorderSecondary};
|
|
border-radius: ${token.borderRadiusOuter};
|
|
padding: 5px;
|
|
`,
|
|
dateCell: css`
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
max-width: 40px;
|
|
max-height: 40px;
|
|
background: transparent;
|
|
transition: background 300ms;
|
|
border-radius: ${token.borderRadiusOuter}px;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
&:hover:before {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
`,
|
|
today: css`
|
|
&:before {
|
|
border: 1px solid ${token.colorPrimary};
|
|
}
|
|
`,
|
|
text: css`
|
|
position: relative;
|
|
z-index: 1;
|
|
`,
|
|
lunar,
|
|
current: css`
|
|
color: ${token.colorTextLightSolid};
|
|
&:before {
|
|
background: ${token.colorPrimary};
|
|
}
|
|
&:hover:before {
|
|
background: ${token.colorPrimary};
|
|
opacity: 0.8;
|
|
}
|
|
.${cx(lunar)} {
|
|
color: ${token.colorTextLightSolid};
|
|
opacity: 0.9;
|
|
}
|
|
`,
|
|
monthCell: css`
|
|
width: 120px;
|
|
color: ${token.colorTextBase};
|
|
border-radius: ${token.borderRadiusOuter}px;
|
|
padding: 5px 0;
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
`,
|
|
monthCellCurrent: css`
|
|
color: ${token.colorTextLightSolid};
|
|
background: ${token.colorPrimary};
|
|
&:hover {
|
|
background: ${token.colorPrimary};
|
|
opacity: 0.8;
|
|
}
|
|
`,
|
|
weekend: css`
|
|
color: ${token.colorError};
|
|
&.gray {
|
|
opacity: 0.4;
|
|
}
|
|
`,
|
|
};
|
|
});
|