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

A React UI component Library for quiz interaction types.

const generateStyle = componentTheme => {
  return {
    item: {
      position: 'relative',
      display: 'flex',
      marginBottom: componentTheme.itemMargin,
      alignItems: 'flex-start',
      marginTop: '1.5rem',

      '&:before': {
        width: '100%',
        top: `calc(${componentTheme.itemBeforeMargin} + 1rem)`,
      },

      '> *': {
        flex: '0 1 100%',
        padding: componentTheme.itemPadding,
      },
    },

    question: {
      marginTop: componentTheme.questionMargin,
      backgroundColor: componentTheme.questionColor,
      border: `${componentTheme.questionBorder} solid ${componentTheme.questionBorderColor}`,
    },

    answer: {
      padding: 0,
      backgroundColor: 'white',
      marginRight: 0,
    },

    divider: {
      padding: 0,
      flexShrink: '1.3',
      marginTop: `calc(${componentTheme.dividerMargin} * 1.6)`,
      borderBottom: `${componentTheme.dividerBorder} solid ${componentTheme.dividerBorderColor}`,
    },
  }
}

export default generateStyle