@selfcommunity/react-theme-default
Version:
Default theme to use with SelfCommunity TS library
439 lines (438 loc) • 15.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const system_1 = require("@mui/system");
const colors_1 = require("@mui/material/colors");
const Component = {
styleOverrides: {
root: ({ theme }) => ({
'& .SCNotification-header': {
padding: theme.spacing(2, 2, 0, 2),
'& .SCNotification-avatar': {
width: theme.selfcommunity.user.avatar.sizeMedium,
height: theme.selfcommunity.user.avatar.sizeMedium
},
'& .SCNotification-username': {
fontWeight: theme.typography.fontWeightBold
}
},
'& .SCNotification-content': {
padding: 0,
'& .SCNotification-uncollapsed': {
padding: theme.spacing(2, 2, 1, 2),
'& > *': {
marginBottom: theme.spacing()
}
},
'& .SCNotification-show-other-aggregated': {
backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
},
'& .SCNotification-collapsed': {
padding: theme.spacing(2),
'& .MuiCollapse-wrapperInner > *': {
marginBottom: theme.spacing()
}
},
'& .SCNotificationItem-detail': {
borderRadius: 0
}
},
'& a:not(.MuiButton-root)': {
textDecoration: 'none',
color: theme.palette.text.primary,
'&:hover, &:active': {
color: theme.palette.text.primary,
textDecoration: 'underline'
}
}
}),
skeletonRoot: ({ theme }) => ({
marginBottom: theme.spacing(2)
}),
collapsedForRoot: ({ theme }) => ({
width: '100%',
'& .SCNotification-flag-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-flag-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-wrap': {
padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
}),
commentRoot: ({ theme }) => ({
'& .SCNotification-username': {
fontWeight: theme.typography.fontWeightBold,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-vote-button': {
color: 'inherit',
padding: theme.spacing(1),
fontSize: '1.143rem',
minWidth: 0,
borderRadius: '50%'
},
'& .SCNotification-contribution-text': {
color: theme.palette.text.primary,
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden',
'&:hover': {
textDecoration: 'underline'
}
}
}),
contributionRoot: ({ theme }) => ({
'& .SCNotification-username': {
fontWeight: theme.typography.fontWeightBold,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-vote-button': {
color: 'inherit',
padding: theme.spacing(1),
fontSize: '1.143rem',
minWidth: 0,
borderRadius: '50%'
},
'& .SCNotification-contribution-text': {
color: theme.palette.text.primary,
textOverflow: 'ellipsis',
overflow: 'hidden',
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotificationItem-root .SCNotificationItem-header .SCNotificationItem-secondary': {
marginTop: theme.spacing(1),
'& .SCDateTimeAgo-root': {
marginTop: 0
}
}
}),
contributionFollowRoot: ({ theme }) => ({
'& .SCNotification-username': {
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-follow-text': {
color: theme.palette.text.primary,
fontWeight: theme.typography.fontWeightMedium
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
},
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .MuiIcon-root': {
fontSize: '18px',
marginBottom: '0.5px'
}
}),
deletedForRoot: ({ theme }) => ({
'& .SCNotification-flag-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-flag-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-wrap': {
marginBottom: theme.spacing(1),
padding: theme.spacing(2),
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
}),
incubatorApprovedRoot: ({ theme }) => ({
'& .SCNotification-category-icon': {
borderRadius: 3
},
'& .SCNotification-view-incubator-button': {
padding: theme.spacing(),
paddingBottom: 0,
textTransform: 'initial',
marginLeft: -8
}
}),
kindlyNoticeFlagRoot: ({ theme }) => ({
'& .SCNotification-flag-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-flag-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-wrap': {
padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
}),
kindlyNoticeForRoot: ({ theme }) => ({
width: '100%',
'& .SCNotification-flag-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-flag-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-wrap': {
padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
}),
mentionRoot: ({ theme }) => ({
'& .SCNotification-username': {
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-mention-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
},
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
}
}),
privateMessageRoot: ({ theme }) => ({
'& .SCNotification-username': {
display: 'inline',
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-message-label': {
color: theme.palette.text.primary
},
'& .SCNotification-message-wrap': {
textOverflow: 'ellipsis',
overflow: 'hidden',
WebkitLineClamp: '2',
lineClamp: 2,
WebkitBoxOrient: 'vertical',
'& p': {
margin: 0
}
},
'& .SCNotification-message': {
height: 20,
overflowY: 'hidden',
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden',
'&:hover': {
textDecoration: 'underline'
},
'& > p': {
overflowY: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: '2',
lineClamp: 2,
WebkitBoxOrient: 'vertical'
}
},
'& .SCNotification-actions': {
fontSize: '13px',
maxWidth: '40%'
}
}),
courseRoot: ({ theme }) => ({
'& .SCNotification-username, & a': {
fontWeight: theme.typography.fontWeightBold
},
'& .SCNotificationItem-primary': {
'& .SCCourse-root': {
width: '100%',
'& .SCCourse-snippet-root': {
paddingLeft: '0 !important'
}
}
},
'& .SCNotificationItem-secondary': {
textTransform: 'capitalize'
},
'& .SCNotification-snippet-time': {
paddingLeft: theme.spacing(5)
},
'& .SCCourse-snippet-root': {
backgroundColor: 'transparent !important'
}
}),
eventRoot: ({ theme }) => ({
'& .SCNotification-username, & a': {
fontWeight: theme.typography.fontWeightBold
},
'& .SCNotificationItem-primary': {
'& .MuiIcon-root': {
float: 'right',
fontSize: '20px',
marginLeft: theme.spacing(0.5)
},
'& .SCEvent-root': {
width: '100%',
'& .SCEvent-snippet-root': {
paddingLeft: '0 !important'
}
}
},
'& .SCNotificationItem-secondary': {
textTransform: 'capitalize'
},
'& .SCNotification-snippet-time': {
paddingLeft: theme.spacing(5)
},
'& .SCEvent-snippet-root': {
backgroundColor: 'transparent !important'
}
}),
liveStreamRoot: ({ theme }) => ({
'& .SCNotification-username, & a': {
fontWeight: theme.typography.fontWeightBold
},
'& .SCNotificationItem-primary': {
'& .MuiIcon-root': {
float: 'right',
fontSize: '20px',
marginLeft: theme.spacing(0.5)
},
'& .SCEvent-root': {
width: '100%',
'& .SCEvent-snippet-root': {
paddingLeft: '0 !important'
}
}
},
'& .SCNotificationItem-secondary': {
textTransform: 'capitalize'
},
'& .SCNotification-snippet-time': {
paddingLeft: theme.spacing(5)
},
'& .SCEvent-snippet-root': {
backgroundColor: 'transparent !important'
}
}),
groupRoot: ({ theme }) => ({}),
undeletedForRoot: ({ theme }) => ({
'& .SCNotification-undeleted-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-undeleted-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-wrap': {
marginBottom: theme.spacing(1),
padding: theme.spacing(2),
textOverflow: 'ellipsis',
display: 'inline',
overflow: 'hidden'
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
}),
userBlockedRoot: ({ theme }) => ({
'& .SCNotification-unblocked-icon': {
backgroundColor: colors_1.green[500],
color: '#FFF'
},
'& .SCNotification-blocked-icon': {
backgroundColor: colors_1.red[500],
color: '#FFF'
},
'& .SCNotification-blocked-text': {
color: theme.palette.text.primary
}
}),
userConnectionRoot: ({ theme }) => ({
'& .SCNotification-username': {
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-connection-text': {
color: theme.palette.text.primary
}
}),
userFollowRoot: ({ theme }) => ({
width: '100%',
'& .SCNotification-username': {
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-follow-text': {
color: theme.palette.text.primary
}
}),
voteUpRoot: ({ theme }) => ({
width: '100%',
'& .SCNotification-username': {
fontWeight: 700,
'&:hover': {
textDecoration: 'underline'
}
},
'& .SCNotification-vote-up-text': {
color: theme.palette.text.primary
},
'& .SCNotification-contribution-text': {
'&:hover': {
textDecoration: 'underline'
}
}
})
}
};
exports.default = Component;