|
|
@ -1,156 +1,273 @@ |
|
|
import { createStyles } from 'antd-style'; |
|
|
import { createStyles } from "antd-style"; |
|
|
|
|
|
|
|
|
const useStyles = createStyles(({ token }) => { |
|
|
const useStyles = createStyles(({ token }) => { |
|
|
return { |
|
|
return { |
|
|
|
|
|
"clearfix()": { |
|
|
|
|
|
zoom: "1", |
|
|
|
|
|
"&::before, &::after": { display: "table", content: "' '" }, |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
clear: "both", |
|
|
|
|
|
height: "0", |
|
|
|
|
|
fontSize: "0", |
|
|
|
|
|
visibility: "hidden", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
activitiesList: { |
|
|
activitiesList: { |
|
|
padding: '0 24px 8px 24px', |
|
|
padding: "0 24px 8px 24px", |
|
|
}, |
|
|
}, |
|
|
username: { |
|
|
username: { |
|
|
color: token.colorText, |
|
|
color: token.colorText, |
|
|
}, |
|
|
}, |
|
|
event: { |
|
|
event: { |
|
|
fontWeight: 'normal', |
|
|
fontWeight: "normal", |
|
|
}, |
|
|
}, |
|
|
pageHeaderContent: { |
|
|
pageHeaderContent: { |
|
|
|
|
|
display: "flex", |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
|
display: 'block', |
|
|
display: "block", |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
avatar: { |
|
|
avatar: { |
|
|
flex: '0 1 72px', |
|
|
flex: "0 1 72px", |
|
|
'& > span': { |
|
|
"& > span": { |
|
|
display: 'block', |
|
|
display: "block", |
|
|
width: '72px', |
|
|
width: "72px", |
|
|
height: '72px', |
|
|
height: "72px", |
|
|
borderRadius: '72px', |
|
|
borderRadius: "72px", |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
content: { |
|
|
content: { |
|
|
|
|
|
position: "relative", |
|
|
|
|
|
top: "4px", |
|
|
|
|
|
flex: "1 1 auto", |
|
|
|
|
|
marginLeft: "24px", |
|
|
|
|
|
color: token.colorTextSecondary, |
|
|
|
|
|
lineHeight: "22px", |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
|
marginLeft: '0', |
|
|
marginLeft: "0", |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
contentTitle: { |
|
|
contentTitle: { |
|
|
marginBottom: '12px', |
|
|
marginBottom: "12px", |
|
|
color: token.colorTextHeading, |
|
|
color: token.colorTextHeading, |
|
|
fontWeight: '500', |
|
|
fontWeight: "500", |
|
|
fontSize: '20px', |
|
|
fontSize: "20px", |
|
|
lineHeight: '28px', |
|
|
lineHeight: "28px", |
|
|
}, |
|
|
}, |
|
|
extraContent: { |
|
|
extraContent: { |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: {}, |
|
|
zoom: "1", |
|
|
|
|
|
"&::before, &::after": { display: "table", content: "' '" }, |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
clear: "both", |
|
|
|
|
|
height: "0", |
|
|
|
|
|
fontSize: "0", |
|
|
|
|
|
visibility: "hidden", |
|
|
|
|
|
}, |
|
|
|
|
|
float: "right", |
|
|
|
|
|
whiteSpace: "nowrap", |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
|
|
|
|
{ marginLeft: "-44px" }, |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
|
|
|
float: "none", |
|
|
|
|
|
marginRight: "0", |
|
|
|
|
|
}, |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
|
|
|
|
marginLeft: "-16px", |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
statItem: { |
|
|
statItem: { |
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { float: 'none' }, |
|
|
position: "relative", |
|
|
}, |
|
|
display: "inline-block", |
|
|
'> p:first-child': { |
|
|
padding: "0 32px", |
|
|
marginBottom: '4px', |
|
|
"> p:first-child": { |
|
|
color: token.colorTextSecondary, |
|
|
marginBottom: "4px", |
|
|
fontSize: token.fontSize, |
|
|
color: token.colorTextSecondary, |
|
|
lineHeight: '22px', |
|
|
fontSize: token.fontSize, |
|
|
}, |
|
|
lineHeight: "22px", |
|
|
'> p': { |
|
|
}, |
|
|
margin: '0', |
|
|
"> p": { |
|
|
color: token.colorTextHeading, |
|
|
margin: "0", |
|
|
fontSize: '30px', |
|
|
color: token.colorTextHeading, |
|
|
lineHeight: '38px', |
|
|
fontSize: "30px", |
|
|
}, |
|
|
lineHeight: "38px", |
|
|
'> span': { |
|
|
"> span": { |
|
|
color: token.colorTextSecondary, |
|
|
color: token.colorTextSecondary, |
|
|
fontSize: '20px', |
|
|
fontSize: "20px", |
|
|
}, |
|
|
}, |
|
|
members: { |
|
|
}, |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
top: "8px", |
|
|
|
|
|
right: "0", |
|
|
|
|
|
width: "1px", |
|
|
|
|
|
height: "40px", |
|
|
|
|
|
backgroundColor: token.colorSplit, |
|
|
|
|
|
content: "''", |
|
|
|
|
|
}, |
|
|
|
|
|
"&:last-child": { |
|
|
|
|
|
paddingRight: "0", |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
display: "none", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
|
|
|
|
{ padding: "0 16px" }, |
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
marginBottom: '0', |
|
|
padding: "0 16px", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
display: "none", |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" }, |
|
|
}, |
|
|
}, |
|
|
a: { |
|
|
members: { |
|
|
display: 'inline-block', |
|
|
a: { |
|
|
flex: '1 1 0', |
|
|
display: "block", |
|
|
color: token.colorTextSecondary, |
|
|
height: "24px", |
|
|
position: 'relative', |
|
|
margin: "12px 0", |
|
|
maxHeight: '4.5em', |
|
|
color: token.colorText, |
|
|
marginRight: '-1em', |
|
|
transition: "all 0.3s", |
|
|
paddingRight: '1em', |
|
|
position: "relative", |
|
|
overflow: 'hidden', |
|
|
maxHeight: "4.5em", |
|
|
lineHeight: '1.5em', |
|
|
marginRight: "-1em", |
|
|
textAlign: 'justify', |
|
|
paddingRight: "1em", |
|
|
'&::before': { |
|
|
overflow: "hidden", |
|
|
position: 'absolute', |
|
|
lineHeight: "1.5em", |
|
|
right: '14px', |
|
|
textAlign: "justify", |
|
|
bottom: '0', |
|
|
"&::before": { |
|
|
padding: '0 1px', |
|
|
position: "absolute", |
|
|
background: token.colorBgContainer, |
|
|
right: "14px", |
|
|
content: "'...'", |
|
|
bottom: "0", |
|
|
|
|
|
padding: "0 1px", |
|
|
|
|
|
background: token.colorBgContainer, |
|
|
|
|
|
content: "'...'", |
|
|
|
|
|
}, |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
right: "14px", |
|
|
|
|
|
width: "1em", |
|
|
|
|
|
height: "1em", |
|
|
|
|
|
marginTop: "0.2em", |
|
|
|
|
|
background: "white", |
|
|
|
|
|
content: "''", |
|
|
|
|
|
}, |
|
|
|
|
|
"&:hover": { |
|
|
|
|
|
color: token.colorPrimary, |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
'&::after': { |
|
|
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
|
position: 'absolute', |
|
|
{ marginBottom: "0" }, |
|
|
right: '14px', |
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
width: '1em', |
|
|
marginBottom: "0", |
|
|
height: '1em', |
|
|
|
|
|
marginTop: '0.2em', |
|
|
|
|
|
background: 'white', |
|
|
|
|
|
content: "''", |
|
|
|
|
|
}, |
|
|
}, |
|
|
'&:hover': { color: token.colorPrimary }, |
|
|
|
|
|
}, |
|
|
}, |
|
|
member: { |
|
|
member: { |
|
|
marginLeft: '12px', |
|
|
marginLeft: "12px", |
|
|
fontSize: token.fontSize, |
|
|
fontSize: token.fontSize, |
|
|
lineHeight: '24px', |
|
|
lineHeight: "24px", |
|
|
verticalAlign: 'top', |
|
|
verticalAlign: "top", |
|
|
}, |
|
|
}, |
|
|
projectList: { |
|
|
projectList: { |
|
|
[`@media screen and (max-width: ${token.screenXS}px)`]: {}, |
|
|
".ant-card-meta-description": { |
|
|
}, |
|
|
height: "44px", |
|
|
'.ant-card-meta-description': { |
|
|
overflow: "hidden", |
|
|
height: '44px', |
|
|
color: token.colorTextSecondary, |
|
|
overflow: 'hidden', |
|
|
lineHeight: "22px", |
|
|
color: token.colorTextSecondary, |
|
|
}, |
|
|
lineHeight: '22px', |
|
|
|
|
|
}, |
|
|
}, |
|
|
cardTitle: { |
|
|
cardTitle: { |
|
|
fontSize: '0', |
|
|
fontSize: "0", |
|
|
|
|
|
a: { |
|
|
|
|
|
display: "inline-block", |
|
|
|
|
|
height: "24px", |
|
|
|
|
|
marginLeft: "12px", |
|
|
|
|
|
color: token.colorTextHeading, |
|
|
|
|
|
fontSize: token.fontSize, |
|
|
|
|
|
lineHeight: "24px", |
|
|
|
|
|
verticalAlign: "top", |
|
|
|
|
|
"&:hover": { |
|
|
|
|
|
color: token.colorPrimary, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
projectGrid: { |
|
|
projectGrid: { |
|
|
[`@media screen and (max-width: ${token.screenXS}px)`]: { width: '100%' }, |
|
|
width: "33.33%", |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenMD}px)`]: { width: "50%" }, |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenXS}px)`]: { width: "100%" }, |
|
|
}, |
|
|
}, |
|
|
projectItemContent: { |
|
|
projectItemContent: { |
|
|
display: 'flex', |
|
|
display: "flex", |
|
|
height: '20px', |
|
|
height: "20px", |
|
|
marginTop: '8px', |
|
|
marginTop: "8px", |
|
|
overflow: 'hidden', |
|
|
overflow: "hidden", |
|
|
fontSize: '12px', |
|
|
fontSize: "12px", |
|
|
lineHeight: '1.5em', |
|
|
lineHeight: "1.5em", |
|
|
position: 'relative', |
|
|
position: "relative", |
|
|
maxHeight: '4.5em', |
|
|
maxHeight: "4.5em", |
|
|
marginRight: '-1em', |
|
|
marginRight: "-1em", |
|
|
paddingRight: '1em', |
|
|
paddingRight: "1em", |
|
|
textAlign: 'justify', |
|
|
textAlign: "justify", |
|
|
'&::before': { |
|
|
"&::before": { |
|
|
position: 'absolute', |
|
|
position: "absolute", |
|
|
right: '14px', |
|
|
right: "14px", |
|
|
bottom: '0', |
|
|
bottom: "0", |
|
|
padding: '0 1px', |
|
|
padding: "0 1px", |
|
|
background: token.colorBgContainer, |
|
|
background: token.colorBgContainer, |
|
|
content: "'...'", |
|
|
content: "'...'", |
|
|
}, |
|
|
}, |
|
|
'&::after': { |
|
|
"&::after": { |
|
|
position: 'absolute', |
|
|
position: "absolute", |
|
|
right: '14px', |
|
|
right: "14px", |
|
|
width: '1em', |
|
|
width: "1em", |
|
|
height: '1em', |
|
|
height: "1em", |
|
|
marginTop: '0.2em', |
|
|
marginTop: "0.2em", |
|
|
background: 'white', |
|
|
background: "white", |
|
|
content: "''", |
|
|
content: "''", |
|
|
}, |
|
|
}, |
|
|
|
|
|
a: { |
|
|
|
|
|
display: "inline-block", |
|
|
|
|
|
flex: "1 1 0", |
|
|
|
|
|
color: token.colorTextSecondary, |
|
|
|
|
|
position: "relative", |
|
|
|
|
|
maxHeight: "4.5em", |
|
|
|
|
|
marginRight: "-1em", |
|
|
|
|
|
paddingRight: "1em", |
|
|
|
|
|
overflow: "hidden", |
|
|
|
|
|
lineHeight: "1.5em", |
|
|
|
|
|
textAlign: "justify", |
|
|
|
|
|
"&::before": { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
right: "14px", |
|
|
|
|
|
bottom: "0", |
|
|
|
|
|
padding: "0 1px", |
|
|
|
|
|
background: token.colorBgContainer, |
|
|
|
|
|
content: "'...'", |
|
|
|
|
|
}, |
|
|
|
|
|
"&::after": { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
right: "14px", |
|
|
|
|
|
width: "1em", |
|
|
|
|
|
height: "1em", |
|
|
|
|
|
marginTop: "0.2em", |
|
|
|
|
|
background: "white", |
|
|
|
|
|
content: "''", |
|
|
|
|
|
}, |
|
|
|
|
|
"&:hover": { |
|
|
|
|
|
color: token.colorPrimary, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
datetime: { |
|
|
datetime: { |
|
|
|
|
|
flex: "0 0 auto", |
|
|
|
|
|
float: "right", |
|
|
color: token.colorTextDisabled, |
|
|
color: token.colorTextDisabled, |
|
|
}, |
|
|
}, |
|
|
activeCard: { |
|
|
activeCard: { |
|
|
|
|
|
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
|
|
|
|
{ marginBottom: "24px" }, |
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
|
marginBottom: '24px', |
|
|
marginBottom: "24px", |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
|