jobiqo-cl/lib/es/src/components/02-atoms/01-forms/07-file/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

const Wrapper = styled.div `
  position: relative;
  ${props => props.multiple
    ? `
      padding: 2rem;
      border-radius:${props.theme.radii.boxes};
      background: ${props.theme.colors.white};
      border-color: ${props.theme.colors.gray2};
      border-style: dashed;
      border-width: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
`
    : ``}
`;
const PreviewIcon = styled.span `
  svg {
    color: ${props => props.theme.colors.secondary};
    margin-right: 0.5rem;
  }
`;
const Preview = styled.img `
  object-fit: cover;
  width: 100%;
`;
const BoxFilePreviewWrapper = styled.div `
  position: relative;
  z-index: 11;
`;
const FilePreviewWrapper = styled.div `
  position: relative;
  margin-top: 1rem;
  max-width: 8rem;
  text-align: center;
  background: white;
  overflow: hidden;
  font-size: 0.7rem;
  box-shadow: ${props => props.theme.fileInput.wrapper.boxShadow};
  border-radius: ${props => props.theme.fileInput.wrapper.borderRadius};
  color: ${props => props.theme.fileInput.wrapper.color};
  border-width: ${props => props.theme.fileInput.wrapper.borderWidth};
  border-style: ${props => props.theme.fileInput.wrapper.borderStyle};
  border-color: ${props => props.theme.fileInput.wrapper.borderColor};
`;
const ImagePreviewInfoLabel = styled.span `
  color: ${props => props.theme.font.color};
`;
const PreviewInfo = styled.div `
  padding: ${props => props.theme.fileInput.info.padding};
`;
const ImagePreviewWrapper = styled.div `
  position: relative;
  height: 5rem;

  svg {
    height: 3rem;
    width: 3rem;
    margin-top: 1rem;
  }
`;
const RemoveFileButton = styled.div `
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 12;
  background: ${props => props.theme.colors.gray3};
  border-radius: 50%;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;

  button {
    color: ${props => props.theme.colors.white};
    cursor: pointer;
  }
`;
const FileWidgetInput = styled.input `
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
`;

export { BoxFilePreviewWrapper, FilePreviewWrapper, FileWidgetInput, ImagePreviewInfoLabel, ImagePreviewWrapper, Preview, PreviewIcon, PreviewInfo, RemoveFileButton, Wrapper };