apphouse/dist/components/fileDropper/fileDropper.styles.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';
import { ApphouseTheme } from '../../styles/defaults/themes.interface';

export interface FileDropperStyles {
  container?: CSSProperties;
  wrapper?: CSSProperties;
  bodyWrapper?: CSSProperties;
  iconWrapper?: CSSProperties;
  previewWrapper?: CSSProperties;
  accepting?: CSSProperties;
  icon?: CSSProperties;
  upload?: CSSProperties;
  uploadBtn?: CSSProperties;
  uploadInput?: CSSProperties;
  over?: CSSProperties;
  invalidFileName?: CSSProperties;
  errorMessage?: CSSProperties;
  messageWrapper?: CSSProperties;
  acceptedMessage?: CSSProperties;
  label?: CSSProperties;
}

export const getFileDropperStyles = (
  theme: ApphouseTheme
): FileDropperStyles => {
  const { colors, tokens } = theme;
  return {
    container: {
      display: 'grid',
      border: `1px dashed ${colors.surface20}`,
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      boxSizing: 'border-box',
      color: colors.onPrimary
    },
    wrapper: {
      display: 'flex',
      flexDirection: 'column',
      width: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      boxSizing: 'border-box',
      color: colors.onPrimary
    },
    bodyWrapper: {
      display: 'grid',
      gridTemplateRows: '14px 14px 1fr',
      justifyContent: 'center',
      color: colors.onPrimary
    },
    iconWrapper: {
      alignSelf: 'center',
      justifySelf: 'center'
    },
    previewWrapper: {
      display: 'grid',
      width: '100%',
      height: '100%',
      border: `1px solid ${colors.surface10}`
    },
    accepting: {
      fontStyle: 'italic',
      color: colors.surface
    },
    icon: {
      fontSize: tokens.iconSize.l,
      marginBottom: tokens.spacings.r,
      color: 'inherit'
    },
    upload: {
      position: 'relative',
      overflow: 'hidden',
      display: 'inline-block'
    },
    uploadBtn: {
      color: colors.brand,
      border: 'none',
      background: 'none'
    },
    uploadInput: {
      fontSize: '100px',
      position: 'absolute',
      cursor: 'pointer',
      left: 0,
      top: 0,
      opacity: 0,
      zIndex: 1
    },
    over: {
      border: `1px dashed ${colors.brand}`
    },
    invalidFileName: {
      color: colors.error
    },
    errorMessage: {
      color: colors.error
    },
    messageWrapper: {
      marginBottom: tokens.spacings.l
    },
    acceptedMessage: {
      color: colors.success
    },
    label: {
      color: colors.onPrimary
    }
  };
};