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

A React UI component Library for quiz interaction types.

const generateStyle = componentTheme => {
  const printMq = '@media print'

  return {
    itemsList: {
      paddingTop: componentTheme.itemsListPadding,
    },

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

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

    answer: {
      paddingLeft: 0,
      minWidth: 0 /* https://css-tricks.com/flexbox-truncated-text/ for why this is needed */,
    },

    divider: {
      padding: '0',
      flexShrink: '1.3',
      borderBottom: `${componentTheme.dividerBorder} solid ${componentTheme.dividerBorderColor}`,
    },

    choicesList: {
      display: 'none',
      [printMq]: {
        display: 'block',
      },
    },
  }
}

export default generateStyle