@braineet/ui/dist/esm/components/upload/Dropzone/styles.js

Braineet design system

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable import/prefer-default-export */

import styled from 'styled-components';
import { layout, space, variant } from 'styled-system';
var uploadDropzoneActiveStyles = function uploadDropzoneActiveStyles(p) {
  return {
    border: "2px dashed " + p.theme.colors.brand,
    background: p.theme.colors.brand10,
    color: p.theme.colors.brand90
  };
};
var uploadDropzoneStyles = function uploadDropzoneStyles(p) {
  return {
    position: 'relative',
    width: '100%',
    height: '100%',
    display: 'flex',
    textAlign: 'center',
    background: '#fafafa',
    border: '2px dashed #d9d9d9',
    borderRadius: '4px',
    cursor: 'pointer',
    transition: 'border-color 0.3s, background 0.3s',
    flexDirection: 'column',
    alignItems: 'center',
    '&:hover': !p.disabled && _extends({}, uploadDropzoneActiveStyles(p))
  };
};
export var UploadContainer = styled.div.withConfig({
  displayName: "styles__UploadContainer",
  componentId: "sc-1w3dynh-0"
})(["position:relative;", " ", " .upload-dropzone{", " ", " ", " ", "}.upload-dropzone-texts{", "}", ""], layout, variant({
  prop: 'size',
  variants: {
    full: {
      height: '100%'
    }
  }
}), space, uploadDropzoneStyles, variant({
  prop: 'size',
  variants: {
    full: {
      justifyContent: 'center'
    },
    small: {
      flexDirection: 'row'
    }
  }
}), function (p) {
  return p.isDragActive && uploadDropzoneActiveStyles;
}, variant({
  prop: 'size',
  variants: {
    small: {
      display: 'flex',
      flexDirection: 'column',
      marginLeft: '1rem',
      alignItems: 'flex-start'
    }
  }
}), function (p) {
  return p.disabled && "\n        opacity: 0.4;\n        .upload-dropzone {\n            cursor: not-allowed;\n        }\n    ";
});