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

Wulper Studio Library Components CMS

import { styled, IconButton as MuiIconButton } from '@mui/material';
var variantSize = {
  small: 56,
  medium: 64,
  large: 75
};
export var WrapperBody = styled('div', {})(function () {
  return {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    alignItems: 'center',
    width: '100%'
  };
});
export var Wrapper = 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'
  };
});
export var WithoutImageLoad = 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]
  });
});
export var WrapperResults = styled('div')({
  display: 'flex',
  flexGrow: 1,
  columnGap: '1rem',
  flexWrap: 'nowrap',
  overflow: 'hidden',
  padding: '1rem',
  paddingLeft: 0
});
export var WrapperElement = 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]
  });
});
export var ImageInputFile = styled('img')({
  width: '100%',
  height: '100%',
  aspectRatio: '16/9',
  objectFit: 'cover',
  userSelect: 'none',
  pointerEvents: 'none'
});
export var DeleteWrapper = styled('div')({
  position: 'relative'
});
export var FixedElement = styled('div')({
  position: 'absolute',
  top: -10,
  right: -10,
  zIndex: 10
});
export var IconButton = styled(MuiIconButton)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    backgroundColor: theme.palette.background["default"],
    '&:hover': {
      backgroundColor: theme.palette.background["default"]
    }
  };
});
export var Root = styled('div')({});