@instructure/quiz-interactions/src/components/categorization/Result/styles.js

A React UI component Library for quiz interaction types.

const generateStyle = componentTheme => {
  const msMaxWidth = 'max-width: 48rem'
  const mq = `@media only screen and (${msMaxWidth})`
  const mp = '@media print'

  return {
    mainContainer: {
      display: 'flex',
      flexDirection: 'column',
      margin: `0 ${componentTheme.mainContainerMargin} ${componentTheme.mainContainerMargin} 0`,
      padding: componentTheme.mainContainerPadding,
      backgroundColor: componentTheme.mainContainerBackground,
    },
    categoryBody: {
      width: '100%',
      display: 'flex',
      flexWrap: 'wrap',
      backgroundColor: componentTheme.bodyBackground,
      padding: `${componentTheme.bodyPadding} 0`,
      marginTop: componentTheme.bodyMargin,
      borderRadius: componentTheme.bodyBorderRadius,
      [mp]: {
        border: `${componentTheme.categoryBodyBorderWidth} solid ${componentTheme.categoryBodyBorderColor}`,
      },
    },
    answersContainer: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    feedbackWrapper: {
      marginTop: componentTheme.feedbackWrapperMargin,
      padding: `0 ${componentTheme.feedbackWrapperPadding}`,
      [mq]: {
        flexBasis: '100%',
      },
    },
    unanswered: {
      marginRight: componentTheme.unansweredMargin,
      [mq]: {
        flexBasis: '100%',
      },
    },
    userResponse: {
      backgroundColor: componentTheme.userResponseBackground,
      paddingRight: componentTheme.userResponsePadding,
      minWidth: '5rem',
    },
    noChoicesText: {
      width: '100%',
      margin: componentTheme.noChoicesMargin,
      textAlign: 'center',
    },
  }
}

export default generateStyle