@procore/core-react/dist/Dropzone/Dropzone.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { ErrorBanner as ErrorBannerBase } from '../Banner/Banner';
import { Box } from '../Box';
import { Button } from '../Button';
import { Flex } from '../Flex';
import { getTypographyIntent } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var StyledErrorBanner = /*#__PURE__*/styled(ErrorBannerBase).withConfig({
  displayName: "StyledErrorBanner",
  componentId: "core-12_44_0__sc-by95hy-0"
})(["margin-top:", "px;flex-shrink:0;"], spacing.lg);
export var StyledErrorBannerDetails = /*#__PURE__*/styled.ul.withConfig({
  displayName: "StyledErrorBannerDetails",
  componentId: "core-12_44_0__sc-by95hy-1"
})(["margin:", "px;padding:0;list-style-position:inside;list-style-type:disc;"], spacing.xs);
export var StyledDropzoneIcon = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDropzoneIcon",
  componentId: "core-12_44_0__sc-by95hy-2"
})(["display:flex;justify-content:center;align-items:center;height:64px;color:", ";margin-bottom:", "px;transition:all 250ms ease-out;", " svg{width:auto;height:100%;}"], colors.gray45, spacing.lg, function (_ref) {
  var $disabled = _ref.$disabled;
  return $disabled && css(["height:72px;margin-bottom:", "px;"], spacing.sm);
});
var activeDropzone = /*#__PURE__*/css(["outline:none;border:2px dashed ", ";background-color:", ";& ", "{color:", ";transform:scale(0.95);}"], colors.blue50, colors.blue96, StyledDropzoneIcon, colors.blue50);
var disabledDropzone = /*#__PURE__*/css(["color:", ";border:2px dashed ", ";background-color:", ";cursor:not-allowed;& ", "{color:", ";transform:none;}"], colors.gray70, colors.gray85, colors.gray98, StyledDropzoneIcon, colors.gray85);
export var StyledDropzoneContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDropzoneContainer",
  componentId: "core-12_44_0__sc-by95hy-3"
})(["", " display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:100%;min-height:92px;padding:", "px;color:", ";border:2px dashed ", ";background-color:", ";border-radius:", "px;text-align:center;letter-spacing:0.25px;transition:all 250ms ease-out;cursor:grab;", " ", " ", " ", ""], getTypographyIntent('body'), spacing.lg, colors.gray40, colors.gray70, colors.gray96, borderRadius.md, function (_ref2) {
  var $disabled = _ref2.$disabled;
  return !$disabled && css(["&:hover{", "}"], activeDropzone);
}, function (_ref3) {
  var $disabled = _ref3.$disabled;
  return $disabled && disabledDropzone;
}, function (_ref4) {
  var $disabled = _ref4.$disabled;
  return $disabled && css(["&:hover,&:focus{", "}"], disabledDropzone);
}, function (_ref5) {
  var $active = _ref5.$active,
    $disabled = _ref5.$disabled;
  return $active && !$disabled && activeDropzone;
});
export var StyledDropzoneMessage = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDropzoneMessage",
  componentId: "core-12_44_0__sc-by95hy-4"
})(["user-select:none;"]);
export var StyledUploadButton = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledUploadButton",
  componentId: "core-12_44_0__sc-by95hy-5"
})(["&&{display:block;margin-left:auto;margin-right:auto;margin-bottom:", "px;}"], spacing.sm);
export var StyledDropzoneCaption = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledDropzoneCaption",
  componentId: "core-12_44_0__sc-by95hy-6"
})(["color:", ";"], function (_ref6) {
  var $error = _ref6.$error;
  return $error && colors.gray15;
});
export var StyledDropzoneWrapper = /*#__PURE__*/styled(Flex).withConfig({
  displayName: "StyledDropzoneWrapper",
  componentId: "core-12_44_0__sc-by95hy-7"
})(["height:100%;"]);
export var StyledDropzoneFocusDetector = /*#__PURE__*/styled(Box).withConfig({
  displayName: "StyledDropzoneFocusDetector",
  componentId: "core-12_44_0__sc-by95hy-8"
})(["height:100%;"]);
//# sourceMappingURL=Dropzone.styles.js.map