@instructure/quiz-interactions/src/components/ordering/common/OrderGroup/styles.js

A React UI component Library for quiz interaction types.

const generateStyle = (componentTheme, props) => {
  const printMq = '@media print'

  const paragraphContainer = {
    display: 'flex',
    flexWrap: 'wrap',
    marginTop: componentTheme.paragraphContainerMargin,
    paddingBottom: componentTheme.paragraphContainerPadding,
    paddingLeft: componentTheme.paragraphContainerPadding,
    backgroundColor: componentTheme.paragraphContainerColor,
    [printMq]: {
      display: 'block',
    },
  }

  const fullWidthStyles = {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
  }
  return {
    /* LABELS */

    topLabel: {
      paddingTop: componentTheme.bottomLabelPadding,
    },

    bottomLabel: {
      paddingTop: componentTheme.bottomLabelPadding,
    },

    /* CHOICES */

    container: props.displayAnswersParagraph ? paragraphContainer : {},

    /* CHOICE */

    choiceContainer: {
      display: 'flex',
      alignItems: 'center',
      marginTop: componentTheme.choiceContainerMargin,
    },

    choiceContainerContent: {
      padding: componentTheme.choiceContainerContentPadding,
      backgroundColor: componentTheme.choiceContainerContentColor,
      width: '100%',
      ...(!props.displayAnswersParagraph && fullWidthStyles),
      [printMq]: fullWidthStyles,
    },

    choicePosition: {
      width: componentTheme.choicePositionWidth,
      textAlign: 'center',
      [printMq]: {
        display: 'none',
      },
    },

    choice: {
      flex: 1,
      display: 'flex',
      alignItems: 'center',
      padding: componentTheme.choicePadding,
      border: `${componentTheme.choiceBorder} solid ${componentTheme.choiceBorderColor}`,
      borderRadius: componentTheme.choiceBorderRadius,
      backgroundColor: componentTheme.choiceColor,
    },

    choiceBody: {
      paddingLeft: componentTheme.choiceBodyPadding,
      paddingRight: componentTheme.choiceBodyPadding,
    },

    printedPositionInput: {
      display: 'none',
      [printMq]: {
        display: 'flex',
        marginRight: componentTheme.printedPositionInputMargin,
      },
    },
  }
}

export default generateStyle