@selfcommunity/react-theme-default
Version:
Default theme to use with SelfCommunity TS library
190 lines (189 loc) • 8.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const material_1 = require("@mui/material");
const Component = {
styleOverrides: {
root: ({ theme }) => ({
'& .SCCourseForm-contrast-color': {
color: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
},
'& .SCCourseForm-cover': {
position: 'relative',
height: 103,
minHeight: 103,
borderRadius: '10px',
'& .SCCourseForm-upload-course-cover-root': {
position: 'absolute',
right: theme.spacing(2),
bottom: theme.spacing(1),
padding: theme.spacing(1),
minWidth: 'auto'
}
},
'& .SCCourseForm-header': {
marginTop: theme.spacing(4.5),
color: theme.palette.text.secondary
},
'& h5': {
padding: theme.spacing(1)
},
'& .SCCourseForm-form': {
'&.SCCourseForm-step-customization': {
backgroundColor: theme.palette.common.white,
border: `1px solid ${theme.palette.grey['300']}`,
borderBottom: 'unset',
borderRadius: '5px',
borderBottomLeftRadius: 'unset',
borderBottomRightRadius: 'unset',
padding: theme.spacing(1, 1, 0),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(2, 2, 0)
}
},
'& .SCCourseForm-name': {
marginTop: theme.spacing(3)
},
'& .SCCategoryAutocomplete-root ': {
marginTop: theme.spacing(1)
},
'& .SCCourseForm-edit-root': {
backgroundColor: theme.palette.common.white,
marginTop: theme.spacing(1),
'& .SCCourseForm-edit-card': {
display: 'flex',
alignItems: 'flex-start',
borderRadius: '10px',
padding: theme.spacing(2),
'& h5': {
paddingTop: 0,
paddingBottom: 0
},
'& .MuiTypography-body1': {
paddingLeft: theme.spacing(1)
},
'& .SCCourseForm-edit-access-info': {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
'& > p:first-of-type': {
marginBottom: theme.spacing(1)
},
'& .MuiIcon-root': {
marginRight: theme.spacing(0.5)
}
}
},
'& .SCCourseForm-edit-publish': {
marginTop: theme.spacing(3),
'& h5': {
paddingTop: 0,
paddingBottom: 0
},
'& .SCCourseForm-edit-publish-info': {
paddingLeft: theme.spacing(1),
marginBottom: theme.spacing(1)
},
'& .SCCourseForm-edit-privacy-item': {
paddingLeft: theme.spacing(1.5),
marginBottom: theme.spacing(2),
'& .MuiTypography-body1': {
display: 'flex',
alignItems: 'center',
'& .MuiIcon-root': {
marginRight: theme.spacing(0.5)
}
}
},
'& .SCCourseForm-edit-privacy-item-info': {
marginLeft: theme.spacing(2)
},
'& .SCCourseForm-disabled': {
opacity: 0.5
},
'& .SCCourseForm-edit-card': {
alignItems: 'center',
margin: theme.spacing(1)
}
}
}
},
'& .SCCourseForm-step-one': {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: theme.spacing(2.5),
marginTop: theme.spacing(1.5),
'& .SCCourseForm-selected': {
backgroundColor: (0, material_1.alpha)(theme.palette.success.main, theme.palette.action.selectedOpacity),
border: `1px solid ${theme.palette.success.main} !important`,
'&:hover': {
backgroundColor: (0, material_1.alpha)(theme.palette.success.main, theme.palette.action.selectedOpacity)
}
},
'& .SCCourseForm-disabled': {
pointerEvents: 'none',
opacity: 0.5
},
'& .MuiCard-root': {
boxShadow: 'none',
border: `1px solid ${theme.palette.grey[300]}`,
borderRadius: '10px',
'&:hover': {
backgroundColor: theme.palette.grey[200]
},
'& .MuiCardContent-root': {
'& .MuiTypography-h5': {
fontWeight: theme.typography.fontWeightBold
},
'& .MuiTypography-body2': {
whiteSpace: 'pre-line'
},
'& .SCCourseForm-card-title': {
display: 'flex',
justifyContent: 'space-between',
'& .MuiChip-root': {
borderRadius: 0
}
}
}
}
},
'& .SCCourseForm-error': {
color: theme.palette.error.main
},
'& .SCCourseForm-actions': {
display: 'flex',
justifyContent: 'flex-end',
gap: theme.spacing(2),
'&.SCCourseForm-step-customization': {
backgroundColor: theme.palette.common.white,
border: `1px solid ${theme.palette.grey['300']}`,
borderTop: 'unset',
borderRadius: '5px',
borderTopLeftRadius: 'unset',
borderTopRightRadius: 'unset',
padding: theme.spacing(0, 1, 1),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(0, 2, 2)
}
},
'& button': {
width: 'fit-content'
}
},
'& .MuiDivider-root': {
marginTop: theme.spacing(2),
border: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
},
'& .MuiDialogTitle-root': {
'& span': {
flexGrow: 1,
textAlign: 'center'
}
}
}),
skeletonRoot: ({ theme }) => ({
gap: theme.spacing(3)
})
}
};
exports.default = Component;