@wulperstudio/cms/node/components/AttachFileDrop/styled.js

Wulper Studio Library Components CMS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WrapperResults = exports.WrapperElement = exports.WrapperBody = exports.Wrapper = exports.WithoutImageLoad = exports.Root = exports.ImageInputFile = exports.IconButton = exports.FixedElement = exports.DeleteWrapper = void 0;
var _material = require("@mui/material");
var variantSize = {
  small: 56,
  medium: 64,
  large: 75
};
var WrapperBody = exports.WrapperBody = (0, _material.styled)('div', {})(function () {
  return {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    alignItems: 'center',
    width: '100%'
  };
});
var Wrapper = exports.Wrapper = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'size';
  }
})(function (_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size;
  return {
    minWidth: variantSize[size],
    minHeight: variantSize[size],
    position: 'relative',
    padding: '1rem'
  };
});
var WithoutImageLoad = exports.WithoutImageLoad = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variant' && prop !== 'size' && prop !== 'variantShape';
  }
})(function (_ref2) {
  var theme = _ref2.theme,
    _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'rounded' : _ref2$variant,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 'medium' : _ref2$size;
  return Object.assign({
    width: variantSize[size],
    height: variantSize[size],
    backgroundColor: 'transparent',
    margin: '0',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    color: theme.palette.primary.main,
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: theme.palette.primary.main
  }, variant === 'rounded' && {
    borderRadius: '15px'
  }, variant === 'circular' && {
    borderRadius: '50%',
    borderStyle: 'dashed'
  }, variant === 'float' && {
    borderRadius: '0.5rem',
    boxShadow: theme.shadows[1]
  });
});
var WrapperResults = exports.WrapperResults = (0, _material.styled)('div')({
  display: 'flex',
  flexGrow: 1,
  columnGap: '1rem',
  flexWrap: 'nowrap',
  overflow: 'hidden',
  padding: '1rem',
  paddingLeft: 0
});
var WrapperElement = exports.WrapperElement = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variant' && prop !== 'border' && prop !== 'size';
  }
})(function (_ref3) {
  var theme = _ref3.theme,
    _ref3$variant = _ref3.variant,
    variant = _ref3$variant === void 0 ? 'rounded' : _ref3$variant,
    border = _ref3.border,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'medium' : _ref3$size;
  return Object.assign({
    width: variantSize[size],
    height: variantSize[size],
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    userSelect: 'none',
    pointerEvents: 'none'
  }, border && {
    border: '1px solid',
    borderColor: theme.palette.primary.main
  }, variant === 'rounded' && {
    borderRadius: '15px'
  }, variant === 'circular' && {
    borderRadius: '50%'
  }, variant === 'float' && {
    borderRadius: '0.5rem',
    boxShadow: theme.shadows[1]
  });
});
var ImageInputFile = exports.ImageInputFile = (0, _material.styled)('img')({
  width: '100%',
  height: '100%',
  aspectRatio: '16/9',
  objectFit: 'cover',
  userSelect: 'none',
  pointerEvents: 'none'
});
var DeleteWrapper = exports.DeleteWrapper = (0, _material.styled)('div')({
  position: 'relative'
});
var FixedElement = exports.FixedElement = (0, _material.styled)('div')({
  position: 'absolute',
  top: -10,
  right: -10,
  zIndex: 10
});
var IconButton = exports.IconButton = (0, _material.styled)(_material.IconButton)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    backgroundColor: theme.palette.background["default"],
    '&:hover': {
      backgroundColor: theme.palette.background["default"]
    }
  };
});
var Root = exports.Root = (0, _material.styled)('div')({});