@selfcommunity/react-theme-default
Version:
Default theme to use with SelfCommunity TS library
161 lines (160 loc) • 6.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const material_1 = require("@mui/material");
const Component = {
styleOverrides: {
root: ({ theme, isEventAdmin, isEventFinished }) => ({
'& .SCEventHeader-cover': {
position: 'relative',
minHeight: 150,
background: 'linear-gradient(180deg, rgba(177,177,177,1) 0%, rgba(255,255,255,1) 90%)',
height: 230,
borderRadius: 0,
[theme.breakpoints.up('md')]: {
borderRadius: theme.spacing(0, 0, 2.5, 2.5)
}
},
'& .SCEventHeader-in-progress': {
color: theme.palette.secondary.main,
paddingLeft: theme.spacing(2),
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
marginBottom: theme.spacing(0.5),
'&:before': {
content: '""',
width: '8px',
height: '8px',
borderRadius: '9999px',
backgroundColor: theme.palette.secondary.main,
animation: 'pulse-animation 2s linear infinite',
'@keyframes pulse-animation': {
'0%': {
opacity: 1
},
'50%': {
opacity: 0
},
'100%': {
opacity: 1
}
}
}
},
'& .SCEventHeader-chip': {
marginLeft: theme.spacing(2),
marginBottom: theme.spacing(),
backgroundColor: theme.palette.common.white,
color: theme.palette.error.light,
border: `1px solid ${theme.palette.grey[400]}`,
'& .SCEventHeader-chip-icon': {
marginLeft: theme.spacing(1)
}
},
'& .SCEventHeader-time': {
textTransform: 'uppercase',
fontSize: '1.143rem',
fontWeight: theme.typography.fontWeightLight,
color: isEventFinished ? theme.palette.grey[500] : theme.palette.text.secondary,
paddingLeft: theme.spacing(2)
},
'& .SCEventHeader-info': {
marginTop: theme.spacing(6),
'& .SCEventHeader-name': {
fontSize: '1.857rem',
fontWeight: theme.typography.fontWeightBold,
paddingLeft: theme.spacing(2),
color: isEventFinished ? theme.palette.grey[500] : 'inherit'
},
'& .SCEventHeader-visibility': {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
gap: theme.spacing(0.5),
paddingLeft: theme.spacing(2),
color: isEventFinished ? theme.palette.grey[500] : 'inherit',
'& .SCEventHeader-visibility-item': {
fontSize: theme.typography.fontSize,
fontWeight: theme.typography.fontWeightLight,
color: theme.palette.text.secondary,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: theme.spacing(0.5)
},
'& .SCBuyButton-request-root': {
fontWeight: theme.typography.fontWeightBold,
'& .MuiButton-startIcon': {
marginRight: theme.spacing(0.5),
'& .MuiIcon-root': {
fontSize: '1.5rem'
}
},
'&.Mui-selected, &:hover': {
backgroundColor: 'transparent'
}
}
},
'& .SCEditEvenButton-root': {
marginLeft: 'auto',
marginTop: theme.spacing(-4.25),
marginRight: theme.spacing(1)
},
'& .SCEvenSubscribeButton-root': {
marginTop: theme.spacing(1)
},
'& .SCUser-root': {
borderTop: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
borderBottom: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
marginTop: theme.spacing(1),
'& .SCBaseItemButton-content': {
paddingLeft: theme.spacing(1)
},
'& .SCBaseItemButton-actions': {
maxWidth: 'none',
[theme.breakpoints.up('sm')]: {
width: isEventAdmin && '60%'
},
'& .SCEventHeader-multi-actions': {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
'& .SCEventInviteButton-root': {
marginRight: theme.spacing(1)
}
}
}
},
'& .SCUser-skeleton-root': {
marginTop: theme.spacing(2),
'& .SCBaseItem-content': {
paddingLeft: theme.spacing(2)
},
'& .SCBaseItem-actions': {
paddingRight: theme.spacing(2)
}
}
}
}),
skeletonRoot: ({ theme }) => ({
position: 'relative',
'& .SCEventHeader-cover': {
height: 190
},
'& .SCEventHeader-avatar': {
top: 140,
display: 'block',
position: 'absolute',
marginLeft: theme.spacing(2),
[`& .MuiSkeleton-root`]: {
border: '#FFF solid 5px'
}
},
'& .SCEventHeader-info': {
marginTop: 60,
marginLeft: theme.spacing(2)
}
})
}
};
exports.default = Component;