91 lines
1.9 KiB
TypeScript
91 lines
1.9 KiB
TypeScript
|
import { createStyles } from 'antd-style';
|
||
|
|
|
||
|
|
const useStyles = createStyles(({ token }) => {
|
||
|
|
return {
|
||
|
|
timelineItem: {
|
||
|
|
marginBottom: '20px',
|
||
|
|
boxShadow: token.boxShadow,
|
||
|
|
borderRadius: token.borderRadius,
|
||
|
|
transition: 'all 0.3s',
|
||
|
|
cursor: 'pointer',
|
||
|
|
'&:hover': {
|
||
|
|
boxShadow: token.boxShadowSecondary,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
actions: {
|
||
|
|
display: 'flex',
|
||
|
|
gap: '8px',
|
||
|
|
alignItems: 'center',
|
||
|
|
height: '24px',
|
||
|
|
width: '120px',
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
padding: '10px 0',
|
||
|
|
},
|
||
|
|
cover: {
|
||
|
|
width: '100%',
|
||
|
|
height: '200px',
|
||
|
|
overflow: 'hidden',
|
||
|
|
borderRadius: '4px',
|
||
|
|
marginBottom: '15px',
|
||
|
|
img: {
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
objectFit: 'cover',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
date: {
|
||
|
|
fontSize: '14px',
|
||
|
|
color: token.colorTextSecondary,
|
||
|
|
marginBottom: '10px',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
description: {
|
||
|
|
fontSize: '16px',
|
||
|
|
lineHeight: '1.6',
|
||
|
|
color: token.colorText,
|
||
|
|
marginBottom: '15px',
|
||
|
|
'.ant-btn-link': {
|
||
|
|
padding: '0 4px',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
subItems: {
|
||
|
|
borderTop: `1px dashed ${token.colorBorder}`,
|
||
|
|
paddingTop: '15px',
|
||
|
|
marginTop: '15px',
|
||
|
|
},
|
||
|
|
subItemsHeader: {
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: token.colorTextHeading,
|
||
|
|
marginBottom: '10px',
|
||
|
|
padding: '5px 0',
|
||
|
|
},
|
||
|
|
subItemsList: {
|
||
|
|
maxHeight: '300px',
|
||
|
|
overflowY: 'auto',
|
||
|
|
},
|
||
|
|
subItem: {
|
||
|
|
display: 'flex',
|
||
|
|
marginBottom: '10px',
|
||
|
|
'&:last-child': {
|
||
|
|
marginBottom: 0,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
subItemDate: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
minWidth: '100px',
|
||
|
|
color: token.colorTextSecondary,
|
||
|
|
},
|
||
|
|
subItemContent: {
|
||
|
|
flex: 1,
|
||
|
|
color: token.colorText,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
export default useStyles;
|