UNPKG

@selfcommunity/react-theme-default

Version:

Default theme to use with SelfCommunity TS library

1,348 lines (1,347 loc) • 510 kB
/// <reference types="react" /> import './fonts/community-icons.css'; import './styles/reset.css'; /** * Style fragments - Imports - End */ /** * Style assets - Imports - Start */ import GoogleIconContained from './assets/social/contained/google'; import FacebookIconContained from './assets/social/contained/facebook'; import TwitterIconContained from './assets/social/contained/twitter'; import LinkedinIconContained from './assets/social/contained/linkedin'; import GoogleIconOutlined from './assets/social/outlined/google'; import FacebookIconOutlined from './assets/social/outlined/facebook'; import TwitterIconOutlined from './assets/social/outlined/twitter'; import LinkedinIconOutlined from './assets/social/outlined/linkedin'; /** * Style assets - Imports - End */ /** * Export default theme */ declare const theme: { typography: { htmlFontSize: number; fontSize: number; fontWeightLight: string; fontWeightRegular: string; fontWeightMedium: string; fontWeightBold: string; h1: { fontSize: string; }; h2: { fontSize: string; }; h3: { fontSize: string; }; h4: { fontSize: string; }; h5: { fontSize: string; }; h6: { fontSize: string; }; body1: { fontSize: string; }; }; shape: { borderRadius: number; borderRadiusSm: number; }; spacing: number; mixins: { toolbar: { minHeight: number; '@media (min-width:0px)': { minHeight: number; }; '@media (min-width:600px)': { minHeight: number; }; }; }; components: { MuiAppBar: { styleOverrides: { root: ({ theme }: any) => { color: any; backgroundColor: any; }; }; }; MuiAutocomplete: { defaultProps: { clearIcon: JSX.Element; popupIcon: JSX.Element; }; }; MuiAvatar: { styleOverrides: { root: ({ theme }: any) => { img: { borderRadius: string; }; }; }; }; MuiButton: { variants: ({ props: { variant: string; }; style: { borderWidth: number; '&:hover, &:active': { borderWidth: number; }; }; } | { props: { variant: string; }; style: { borderWidth?: undefined; '&:hover, &:active'?: undefined; }; } | { props: { variant: string; }; style: { borderWidth: number; '&:hover, &:active'?: undefined; }; })[]; styleOverrides: { root: ({ theme }: any) => { textTransform: string; fontWeight: any; padding: string; lineHeight: number; borderRadius: any; }; sizeSmall: { fontSize: string; padding: string; }; sizeMedium: { fontSize: string; padding: string; }; sizeLarge: { fontSize: string; padding: string; }; }; }; MuiContainer: { styleOverrides: { root: ({ theme }: any) => { [x: number]: { paddingLeft: number; paddingRight: number; }; maxWidth: any; }; }; }; MuiDialog: { styleOverrides: { root: { '& .MuiDialog-paperFullScreen': { display: string; flexDirection: string; }; '& .MuiDialog-paperScrollBody': { overflowY: string; }; }; }; }; MuiDrawer: { styleOverrides: { root: ({ theme }: any) => { '& .MuiDrawer-paperAnchorBottom': { borderTopLeftRadius: any; borderTopRightRadius: any; maxHeight: string; paddingTop: any; '&:before': { content: string; border: string; width: number; position: string; top: number; left: string; }; '& > *': { paddingTop: number; }; }; }; }; }; MuiIcon: { defaultProps: { baseClassName: string; fontSize: string; }; }; MuiIconButton: { styleOverrides: { sizeSmall: { fontSize: string; }; sizeMedium: { fontSize: string; }; sizeLarge: { fontSize: string; }; }; }; MuiOutlinedInput: { styleOverrides: { root: { borderRadius: number; }; }; }; MuiPopover: { styleOverrides: { paper: ({ theme }: any) => { borderRadius: number; }; }; }; MuiSelect: { defaultProps: { IconComponent: ({ className }: { className: any; }) => JSX.Element; }; }; MuiTooltip: { defaultProps: { enterDelay: number; }; }; SCAccordionLessons: { styleOverrides: { root: ({ theme }: { theme: any; }) => { backgroundColor: any; border: string; borderRadius: string; '& .SCAccordionLessons-empty': { padding: any; }; '& .SCAccordionLessons-accordion': { '& .SCAccordionLessons-summary': { flexDirection: string; gap: any; borderBottom: string; padding: any; backgroundColor: any; '& .MuiAccordionSummary-content': { justifyContent: string; margin: number; '& .SCAccordionLessons-name-wrapper': { flexDirection: string; alignItems: string; gap: string; }; }; }; '& .SCAccordionLessons-details': { display: string; alignItems: string; gap: any; padding: any; '&:not(:last-child)': { borderBottom: string; }; '& .SCAccordionLessons-circle': { flexShrink: number; width: any; height: any; borderRadius: string; backgroundColor: any; }; '& .SCAccordionLessons-link': { textDecoration: string; padding: number; justifyContent: string; '&:hover': { backgroundColor: string; textDecoration: string; }; }; }; }; }; skeletonRoot: ({ theme }: { theme: any; }) => { border: string; borderRadius: string; '& .SCAccordionLessons-accordion': { '& .SCAccordionLessons-summary': { display: string; justifyContent: string; borderBottom: string; padding: any; backgroundColor: any; }; }; }; }; }; SCAccountChangeMailValidation: { styleOverrides: { root: () => { '& .MuiAlert-message': { display: string; alignItems: string; }; }; }; }; SCAccountDataPortability: { styleOverrides: { root: ({ theme }: any) => { '& .MuiTypography-root': { marginBottom: any; }; '& .SCAccountDataPortability-create-button': { marginRight: any; marginBottom: any; }; '& .SCAccountDataPortability-download-button': { marginBottom: any; }; '& .SCAccountDataPortability-generation-info': { fontWeight: any; }; }; }; }; SCAccountDelete: { styleOverrides: { root: ({ theme }: any) => { '& .MuiTypography-root': { marginBottom: any; }; '& .SCAccountDelete-confirm > .MuiTextField-root': { display: string; }; }; }; }; SCAccountReset: { styleOverrides: { root: ({ theme }: any) => { '& .MuiAlert-message': { display: string; alignItems: string; }; }; }; }; SCAccountVerify: { styleOverrides: { root: () => { '& .MuiAlert-message': { display: string; alignItems: string; }; }; }; }; SCAddUsersButton: { styleOverrides: { root: ({ theme }: { theme: any; }) => { '&.SCAddUsersButton-contrast-color': { color: any; }; }; dialogRoot: () => { '& .MuiDialogActions-root': { marginTop: string; }; '& .SCAddUsersButton-dialog-autocomplete-wrapper': { gap: string; '& .SCAddUsersButton-dialog-chip-wrapper': { flexDirection: string; gap: string; flexWrap: string; }; }; }; }; }; SCBaseDialog: { styleOverrides: { root: ({ theme }: any) => { [x: number]: { minWidth: number; }; minWidth: number; '& .MuiDialogContent-root': { [x: number]: { padding: number; }; paddingLeft: number; paddingRight: number; marginLeft: any; marginRight: any; '& .infinite-scroll-component__outerdiv': { height: string; '& .infinite-scroll-component': { paddingRight: number; ' > .': { marginBottom: any; }; '& .MuiList-root': { paddingTop: number; paddingBottom: number; '& .MuiListItem-root': { paddingLeft: number; paddingRight: number; '& .SCBaseItemButton-root': { borderRadius: number; }; }; }; '& .SCFeedObject-snippet': { marginLeft: any; }; }; }; }; '& [class*="-end-message"]': { padding: any; fontWeight: any; textAlign: string; }; '& .MuiDialogActions-spacing': { padding: any; }; }; titleRoot: ({ theme }: any) => { [x: number]: { flexDirection: string; justifyContent: string; }; display: string; flexDirection: string; alignItems: string; justifyContent: string; fontSize: string; fontWeight: any; padding: any; '& .MuiIconButton-root': { [x: number]: { marginRight: number; }; fontSize: string; marginRight: any; }; }; }; }; SCBaseItem: { styleOverrides: { root: ({ theme }: any) => { width: string; display: string; flexDirection: string; alignItems: string; '&.MuiPaper-elevation': { paddingTop: any; paddingBottom: any; paddingLeft: any; paddingRight: any; '&.MuiPaper-elevation0': { paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; }; }; '& .SCBaseItem-content': { display: string; flexDirection: string; justifyContent: string; alignItems: string; width: string; }; '& .SCBaseItem-image': { flexShrink: number; marginRight: any; }; '& .SCBaseItem-text': { flex: string; marginTop: any; marginBottom: any; textAlign: string; width: string; }; '& .SCBaseItem-primary': { color: any; }; '& .SCBaseItem-secondary': { color: any; }; '& .SCBaseItem-primary, & .SCBaseItem-secondary': { whiteSpace: string; overflow: string; textOverflow: string; display: string; }; '&.SCBaseItem-with-actions': { '& .SCBaseItem-text < *': { maxWidth: string; }; '& .SCBaseItem-actions': { right: any; top: string; maxWidth: any; }; }; }; }; }; SCBaseItemButton: { styleOverrides: { root: ({ theme }: any) => { position: string; width: string; '&.MuiPaper-elevation': { paddingTop: any; paddingBottom: any; paddingLeft: any; paddingRight: any; '&.MuiPaper-elevation0': { paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; }; }; '& .SCBaseItemButton-content': { display: string; justifyContent: string; alignItems: string; gap: any; '& .SCBaseItemButton-image': { flexShrink: number; }; '& .SCBaseItemButton-text': { marginTop: any; marginBottom: any; '& .SCBaseItemButton-primary': { color: any; }; '& .SCBaseItemButton-secondary': { color: any; }; }; }; '&.SCBaseItemButton-with-actions': { display: string; alignItems: string; justifyContent: string; gap: string; '& .SCBaseItemButton-content': { overflow: string; '& .SCBaseItemButton-text': { whiteSpace: string; overflow: string; textOverflow: string; flexGrow: number; }; }; '& .SCBaseItemButton-actions': { flexShrink: number; maxWidth: any; }; }; }; }; }; SCBottomNavigation: { styleOverrides: { root: ({ theme }: any) => { backgroundColor: any; '& .SCBottomNavigation-action': { fontSize: string; color: any; borderTop: string; minWidth: number; '&.Mui-selected, &:hover': { color: any; borderTop: string; }; '&.SCBottomNavigation-composer': { '&.Mui-selected, &:hover': { color: any; borderTop: string; }; }; }; '&.SCBottomNavigation-ios': { paddingBottom: string; }; }; }; }; SCBroadcastMessages: { styleOverrides: { root: ({ theme }: any) => { '& .SCBroadcastMessages-box-load-more': { textAlign: string; '& > div': { paddingBottom: any; }; marginBottom: any; }; '& .SCBroadcastMessages-avatar-load-more': { width: any; height: any; marginRight: any; }; '& .SCBroadcastMessages-button-load-more': { textTransform: string; }; }; messageRoot: ({ theme }: any) => { width: string; marginBottom: any; '& .SCBroadcastMessages-header .MuiAvatar-img': { objectFit: string; }; '& .SCBroadcastMessages-title': { padding: string; paddingBottom: string; paddingTop: number; }; '& .SCBroadcastMessages-media': { paddingBottom: string; }; '& .SCBroadcastMessages-content': { padding: any; paddingTop: number; }; '& .SCBroadcastMessages-list-item-snippet': { padding: string; alignItems: string; }; '& .SCBroadcastMessages-list-item-snippet-new': { borderLeft: string; }; '& .SCBroadcastMessages-flag-icon-wrap': { minWidth: string; paddingRight: number; }; '& .SCBroadcastMessages-flag-icon-snippet': { backgroundColor: "#f44336"; color: string; width: number; height: number; }; }; skeletonRoot: ({ theme }: any) => {}; messageSkeletonRoot: ({ theme }: any) => { marginBottom: any; }; }; }; SCBullet: { styleOverrides: { root: () => { display: string; margin: string; transform: string; }; }; }; SCCategories: { styleOverrides: { root: ({ theme }: any) => { '& .SCCategories-filters': { marginTop: any; marginBottom: any; }; '& .SCCategories-categories': { marginTop: any; '& .SCCategories-category': { padding: any; width: string; '& > div': { cursor: string; }; '& .SCCategory-category-image': { minWidth: number; height: string; borderTopLeftRadius: any; borderBottomLeftRadius: any; borderRadius: number; }; }; }; }; skeletonRoot: ({ theme }: any) => { '& .SCCategories-categories': { marginTop: any; '& .SCCategory-skeleton-root': { padding: any; width: string; '& .SCBaseItem-image': { borderTopLeftRadius: any; borderBottomLeftRadius: any; '& .SCCategory-image': { borderRadius: number; width: string; height: string; }; }; }; }; }; }; }; SCCategoriesPopularWidget: { styleOverrides: { root: ({ theme }: any) => {}; skeletonRoot: ({ theme }: any) => { marginBottom: any; }; dialogRoot: ({ theme }: any) => {}; }; }; SCCategoriesSuggestionWidget: { styleOverrides: { root: ({ theme }: any) => {}; skeletonRoot: ({ theme }: any) => { marginBottom: any; }; dialogRoot: ({ theme }: any) => {}; }; }; SCCategory: { styleOverrides: { root: ({ theme }: any) => { [x: number]: { borderRadius: any; }; borderRadius: number; '& .SCCategory-category-image': { '& img': { borderRadius: any; }; }; '& .SCCategory-primary': { color: any; }; '& .SCCategory-secondary': { color: any; }; '& .SCBaseItemButton-primary, & .SCCategory-primary': { fontWeight: any; }; '& .SCBaseItemButton-secondary': { fontSize: string; whiteSpace: string; overflow: string; textOverflow: string; display: string; }; '& .SCCategory-primary, & .SCCategory-secondary': { whiteSpace: string; overflow: string; textOverflow: string; display: string; }; '&.MuiPaper-outlined': { paddingLeft: any; paddingRight: any; }; }; skeletonRoot: ({ theme }: any) => { '& .SCCategory-image': { borderRadius: any; }; '& .SCCategory-primary': { marginBottom: any; }; '& .SCCategory-secondary': { marginBottom: any; }; '& .SCCategory-action': { margin: any; }; '&.MuiPaper-outlined': { paddingLeft: any; paddingRight: any; }; }; }; }; SCCategoryAutocomplete: { styleOverrides: { root: ({ theme }: any) => {}; }; }; SCCategoryFeedTemplate: { styleOverrides: { root: ({ theme }: any) => { '& .SCFeed-root > MuiGrid-item': { paddingTop: number; }; }; skeletonRoot: ({ theme }: any) => { marginTop: any; }; }; }; SCCategoryFollowersButton: { styleOverrides: { root: ({ theme, followers }: any) => { padding: any; '& .MuiAvatarGroup-root': { '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': { '&.MuiAvatar-colorDefault': { marginLeft: number; backgroundColor: string; color: any; border: string; borderRadius: number; padding: number; }; }; '& .MuiAvatar-root': { height: any; border: string; fontSize: string; '&:first-of-type': { width: any; }; '&:not(:first-of-type)': { width: any; }; }; }; }; dialogRoot: () => {}; }; }; SCCategoryFollowButton: { styleOverrides: { root: ({ theme }: any) => { padding: any; }; }; }; SCCategoryHeader: { defaultProps: { CategoryFollowButtonProps: { size: string; }; }; styleOverrides: { root: ({ theme }: any) => { '& .SCCategoryHeader-cover': { [x: number]: { borderRadius: any; }; display: string; flexDirection: string; justifyContent: string; alignItems: string; minHeight: number; color: string; background: string; height: number; borderRadius: number; }; '& .SCCategoryHeader-info': { paddingLeft: any; paddingRight: any; marginTop: any; marginBottom: any; '& .SCCategoryHeader-name, & .SCCategoryHeader-slogan': { display: string; whiteSpace: string; overflow: string; textOverflow: string; textAlign: string; marginBottom: string; }; '& .SCCategoryHeader-name': { fontSize: string; fontWeight: any; marginBottom: any; }; '& .SCCategoryHeader-slogan': { fontSize: string; fontWeight: any; marginBottom: string; }; '& .SCCategoryHeader-tags': { display: string; justifyContent: string; }; '& .SCCategoryHeader-followed, & .SCCategoryHeader-action': { textAlign: string; marginBottom: any; '& button': { marginLeft: any; marginRight: any; }; }; '& .SCCategoryHeader-followed': { marginBottom: string; '& .SCCategoryHeader-followed-counter': { fontSize: string; fontWeight: any; display: string; }; }; }; }; skeletonRoot: ({ theme }: any) => { '& .SCCategoryHeader-skeleton-cover': { [x: number]: { borderRadius: any; }; }; }; }; }; SCCategoryTemplate: { styleOverrides: { root: ({ theme }: any) => { marginTop: number; '& .SCCategoryTemplate-feed': { marginTop: any; }; }; skeletonRoot: ({ theme }: any) => { [x: number]: { marginTop: number; }; marginTop: number; }; }; }; SCCategoryTrendingFeedWidget: { styleOverrides: { root: ({ theme }: any) => {}; skeletonRoot: ({ theme }: any) => { marginBottom: any; }; dialogRoot: ({ theme }: any) => {}; }; }; SCCategoryTrendingUsersWidget: { styleOverrides: { root: ({ theme }: any) => {}; skeletonRoot: ({ theme }: any) => { marginBottom: any; }; dialogRoot: ({ theme }: any) => {}; }; }; SCChangeCoverButton: { styleOverrides: { root: ({ theme }: any) => { display: string; alignItems: string; flexWrap: string; '& .MuiButtonBase-root': { padding: number; borderRadius: number; minWidth: string; }; '& .SCChangeCoverButton-help-popover': { marginLeft: any; }; }; }; }; SCChangeGroupCoverButton: { styleOverrides: { root: ({ theme }: any) => { padding: any; minWidth: string; }; }; }; SCChangeGroupPictureButton: { styleOverrides: { root: ({ theme }: any) => { padding: any; minWidth: string; }; }; }; SCChangePictureButton: { styleOverrides: { root: ({ theme }: any) => { padding: any; minWidth: string; }; dialogRoot: ({ theme }: any) => { '& .MuiDialogContent-root': { paddingLeft: any; }; '& .SCChangePictureButton-images-list': { maxHeight: number; }; '& .SCChangePictureButton-image-item': { '& .MuiImageListItemBar-actionIcon, .MuiIconButton-root': { color: any; }; '& .SCChangePictureButton-primary': { border: string; }; }; }; }; }; SCChoices: { styleOverrides: { root: ({ theme }: any) => { borderRadius: number; }; }; }; SCCommentObject: { styleOverrides: { root: ({ theme }: any) => { overflow: string; width: string; '& .SCCommentObject-comment': { paddingBottom: number; overflow: string; '& > div': { alignItems: string; }; '& .SCBaseItem-image .MuiBadge-badge': { top: any; }; '& .SCBaseItem-text': { marginBottom: number; marginTop: any; }; }; '& .SCCommentObject-nested-comments': { [x: number]: { paddingLeft: any; }; paddingTop: number; paddingBottom: number; paddingLeft: any; '& ul.MuiList-root': { paddingTop: number; paddingBottom: number; width: string; '& li.MuiListItem-root': { paddingTop: number; }; }; '& .SCCommentObjectReply-root .SCEditor-root': { padding: string; }; }; '& .SCCommentObject-content': { overflowWrap: string; position: string; display: string; padding: string; borderRadius: number; borderColor: string; '& .MuiCardContent-root': { flexGrow: number; padding: number; '& > p:first-of-type': { paddingTop: number; }; }; '& .SCCommentObject-text-content': { margin: number; '& a': { color: any; textDecoration: string; '&:hover': { textDecoration: string; }; }; '& p': { margin: number; marginBlockStart: string; marginBlockEnd: string; }; '& img': { maxWidth: string; }; }; '& .SCCommentObject-flag-chip': { borderRadius: number; display: string; width: string; }; }; '& .SCCommentObject-collapsed': { justifyContent: string; alignItems: string; '& .MuiCardContent-root': { marginLeft: any; }; }; '& .SCCommentObject-show-more-content': { color: any; textDecoration: string; '&:hover': { textDecoration: string; }; }; '& .SCCommentObject-avatar, & .SCCommentObjectReply-avatar': { top: any; width: any; height: any; }; '& .SCCommentObject-author': { textDecoration: string; color: any; '& span': { fontWeight: string; }; }; '& .SCCommentObject-comment-actions-menu': { alignItems: string; }; '& .SCCommentObject-deleted': { opacity: number; }; '& .SCCommentObject-content-sub-section': { display: string; justifyContent: string; alignItems: string; color: any; }; '& .SCCommentObject-comment-sub-section': { display: string; flexWrap: string; alignItems: string; color: any; marginTop: number; position: string; '& .SCCommentObject-reply': { paddingLeft: number; paddingRight: number; lineHeight: number; }; '& .SCCommentObject-activity-at': { color: string; textDecoration: string; '&:hover': { textDecoration: string; }; }; '& .SCCommentObjectReply': { color: string; textDecorationStyle: string; fontSize: string; padding: any; textTransform: string; }; '& .SCCommentObject-vote-audience': { position: string; right: number; }; }; }; skeletonRoot: ({ theme }: any) => { paddingBottom: any; overflow: string; '& > div': { alignItems: string; }; '& .SCCommentObject-avatar': { top: any; }; '& .SCCommentObject-primary-content': { marginBottom: any; }; '&.SCWidget-root': { '& .SCBaseItem-text': { marginBottom: number; '& > .SCWidget-root': { borderRadius: number; borderColor: string; }; '& .MuiCardContent-root': { padding: any; }; }; }; }; }; }; SCCommentObjectReply: { styleOverrides: { root: ({ theme }: any) => { border: string; marginBottom: any; overflow: string; '& .SCBaseItem-content': { alignItems: string; '& .SCBaseItem-text': { marginTop: number; marginBottom: number; '& .SCBaseItem-secondary': { overflow: string; }; }; '& .SCBaseItem-image': { marginTop: any; '& .MuiBadge-badge': { top: any; }; '& .SCCommentObjectReply-avatar': { width: any; height: any; }; }; }; '& .SCCommentObjectReply-comment': { overflow: string; borderRadius: number; '& .SCCommentObjectReply-media': { maxWidth: number; padding: any; '& .SCMediaFile-media': { height: string; }; }; }; '& .SCCommentObjectReply-actions': { marginLeft: any; paddingBottom: any; }; }; }; }; SCCommentsFeedObject: { styleOverrides: { root: ({ theme }: any) => { width: string; '& .SCCommentsFeedObject-no-comments': { padding: any; paddingLeft: number; }; '& .SCCommentsFeedObject-comment-not-found': { padding: any; }; '& .SCCommentObject-root': { '& > div': { background: string; }; }; '& .SCCommentObject-skeleton-root': { background: string; boxShadow: string; border: number; margin: any; '& .SCBaseItem-text': { '& .SCWidget-root': { '& .MuiCardContent-root': { padding: any; }; }; }; }; '& .SCCommentsObject-skeleton-root': { marginBottom: any; }; '& .SCCommentObjectReply-root': { background: string; '& .SCCommentObjectReply-comment': { marginBottom: any; }; }; }; skeletonRoot: ({ theme }: any) => {}; }; }; SCCommentsObject: { styleOverrides: { root: ({ theme }: any) => { boxShadow: string; position: string; display: string; flexWrap: string; width: string; paddingBottom: any; '& .SCCommentsObject-load-more-comments-button': { textTransform: string; padding: any; }; '& .SCCommentsObject-load-previous-comments-button': { textTransform: string; padding: any; }; '& .SCCommentsObject-comments-counter': { paddingRight: any; }; '& .SCCommentsObject-pagination-link': { display: string; }; '& .SCCommentsObject-pagination': { width: string; '& button': { fontWeight: any; textDecoration: string; textUnderlineOffset: number; textDecorationStyle: string; }; '& .SCCommentsObject-comments-counter': { fontSize: string; }; }; }; skeletonRoot: ({ theme }: any) => { width: string; }; }; }; SCComposer: { styleOverrides: { root: ({ theme }: any) => { [x: number]: { '& .MuiDialog-paper': { '& > form': { zIndex: number; }; '& .MuiDialogContent-root': { minHeight: number; height: string; }; '& .MuiDialogActions-root': { justifyContent: string; }; }; }; '& .MuiDialog-paper': {