@instructure/quiz-interactions/src/components/hotspot/Edit/DrawingContainer/styles.js

A React UI component Library for quiz interaction types.

const generateStyle = (componentTheme, _props, state) => {
  return {
    mainContainer: {
      display: 'flex',
      flexDirection: 'column',
      width: '100%',
      marginTop: componentTheme.mainContainerMargin,
      border: `${componentTheme.mainContainerBorderWidth} solid ${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 ${componentTheme.mainContainerTypeSelectedShadowColor}`,
    },
    popoverContent: {
      padding: componentTheme.popoverContentPadding,
    },
    mainContainerActions: {
      flex: '1',
      display: 'flex',
      marginLeft: componentTheme.mainContainerActionsMargin,
      borderLeft: `${componentTheme.mainContainerActionsBorderWidth} solid ${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: `${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