@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
129 lines • 4.08 kB
JavaScript
var generateStyle = function generateStyle(componentTheme, _props, state) {
return {
mainContainer: {
display: 'flex',
flexDirection: 'column',
width: '100%',
marginTop: componentTheme.mainContainerMargin,
border: "".concat(componentTheme.mainContainerBorderWidth, " solid ").concat(componentTheme.mainContainerBorderColor)
},
/* HEADER / TYPE / ACTIONS */
mainContainerHeader: {
display: 'flex',
alignItems: 'center',
padding: componentTheme.mainContainerHeaderPadding
},
mainContainerType: {
display: 'flex',
paddingLeft: componentTheme.mainContainerTypePadding
},
mainContainerTypeUnselected: {
backgroundColor: componentTheme.mainContainerTypeUnselectedColor
},
mainContainerTypeSelected: {
backgroundColor: componentTheme.mainContainerTypeSelectedColor,
boxShadow: "2px 2px 3px ".concat(componentTheme.mainContainerTypeSelectedShadowColor)
},
popoverContent: {
padding: componentTheme.popoverContentPadding
},
mainContainerActions: {
flex: '1',
display: 'flex',
marginLeft: componentTheme.mainContainerActionsMargin,
borderLeft: "".concat(componentTheme.mainContainerActionsBorderWidth, " solid ").concat(componentTheme.mainContainerActionsBorderColor),
paddingLeft: componentTheme.mainContainerActionsPadding
},
mainContainerActionsRemove: {
flex: '1',
display: 'flex',
justifyContent: 'flex-end'
},
headerText: {
display: 'flex',
alignItems: 'baseline',
condensedButton: {
padding: componentTheme.polygonButtonPadding,
fontSize: state.isModal ? componentTheme.polygonButtonFontSize : null,
height: 0
}
},
/* IMAGE CONTENT */
mainContainerContentWrapper: {
display: 'flex',
alignItems: 'center',
backgroundColor: componentTheme.mainContainerContentWrapperBackgroundColor,
padding: componentTheme.mainContainerContentWrapperPadding,
position: 'relative',
justifyContent: 'center'
},
mainContainerContentImage: {
maxWidth: '100%',
maxHeight: '70vh'
},
imageHolder: {
/* to hold canvas w/ absolute position */
position: 'relative',
/* IE11 bugfix */
maxWidth: 'calc(100% - 0.01px)'
},
/* FILE DROP */
fileDropWrapper: {
marginTop: componentTheme.fileDropWrapperMargin
},
fileDropContent: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: "".concat(componentTheme.fileDropContentPadding, " 0"),
backgroundColor: componentTheme.fileDropContentBackgroundColor
},
fileDropContentIcon: {
display: 'flex',
fontSize: componentTheme.fileDropContentIconFontSize
},
fileDropContentLabel: {
paddingLeft: componentTheme.fileDropContentLabelPadding,
display: 'flex',
fontFamily: componentTheme.fileDropContentLabelFontFamily
},
fileDropContentLabelBrowse: {
paddingLeft: componentTheme.fileDropContentLabelBrowsePadding,
color: componentTheme.fileDropContentLabelBrowseColor,
textDecoration: 'underline'
},
/* MODAL */
modalContent: {
flex: '1',
display: 'flex',
flexDirection: 'column'
},
modalContentTypes: {
padding: componentTheme.modalContentTypesPadding,
backgroundColor: componentTheme.modalContentTypesBackgroundColor
},
modalContentImage: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: componentTheme.modalContentImageBackgroundColor,
position: 'relative'
},
spinnerWrapper: {
width: '100%',
height: '100%',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
background: 'rgba(0, 0, 0, 0.5)'
},
spinner: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
};
};
export default generateStyle;