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

A React UI component Library for quiz interaction types.

const generateStyle = componentTheme => {
  return {
    entryWrapper: {
      padding: `${componentTheme.entryWrapperPadding} 0`,
      width: '100%',
    },

    userResponse: {
      p: {
        margin: 0,
        paddingLeft: componentTheme.userResponsePaddingLeft,
        wordWrap: 'break-word',
      },

      'a[target=_blank]': {
        lineHeight: 0,
      },
    },

    previewContainer: {
      height: '8rem',
      width: '8rem',
      border: `solid ${componentTheme.previewBoxBorderWidth} ${componentTheme.previewBoxColor}`,
      color: componentTheme.fileIconColor,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    },

    previewImg: {
      maxWidth: '100%',
      maxHeight: '100%',
      flex: '0 0 auto',
    },

    fileLinkWrapper: {
      display: 'flex',
    },

    fileLink: {
      flex: 1,
      textDecoration: 'none',
      color: 'inherit',
      cursor: 'pointer',

      '&:focus': {
        border: `1px solid ${componentTheme.focusBorderColor}`,
        outline: `0.1875rem solid ${componentTheme.focusOutlineColor}`,
        outlineOffset: '-0.1875rem',
        boxShadow: 'initial',
      },
    },

    removeButton: {
      marginLeft: componentTheme.removeButtonMargin,
    },

    nameContainer: {
      minWidth: '10rem',
    },

    modalImage: {
      maxWidth: '100%',
    },

    spinner: {
      backgroundColor: componentTheme.spinnerColor,
    },
  }
}

export default generateStyle