@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
71 lines • 2.61 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { Box, styled } from '@mui/material';
import { ToBottom, ToLeft, ToRight, ToTop } from '../../helpers/animation';
export var WrapperDrawer = styled(Box, {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'variant' && prop !== 'direction' && prop !== 'animation';
}
})(function (_ref) {
var variant = _ref.variant,
direction = _ref.direction,
animation = _ref.animation;
var animate;
if (direction === 'left') {
animate = "".concat(ToLeft, " 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards");
}
if (direction === 'right') {
animate = "".concat(ToRight, " 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards");
}
if (direction === 'top') {
animate = "".concat(ToTop, " 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards");
}
if (direction === 'bottom') {
animate = "".concat(ToBottom, " 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards");
}
return {
width: '100%',
height: '100%',
position: variant === 'temporary' ? 'fixed' : 'relative',
inset: variant === 'temporary' ? 0 : undefined,
display: 'flex',
zIndex: variant === 'temporary' ? 1200 : undefined,
animation: animation ? animate : undefined
};
});
export var Content = styled(Box, {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'variant' && prop !== 'width' && prop !== 'padding' && prop !== 'border' && prop !== 'backgroundColor' && prop !== 'boxShadow';
}
})(function (_ref2) {
var variant = _ref2.variant,
theme = _ref2.theme,
_ref2$width = _ref2.width,
width = _ref2$width === void 0 ? 'auto' : _ref2$width,
_ref2$backgroundColor = _ref2.backgroundColor,
backgroundColor = _ref2$backgroundColor === void 0 ? theme.palette.background["default"] : _ref2$backgroundColor,
padding = _ref2.padding,
boxShadow = _ref2.boxShadow,
border = _ref2.border;
return _extends({
padding: padding || '15px 20px',
width: width,
border: border || 'none',
position: 'relative',
height: '100%',
backgroundColor: backgroundColor,
borderRadius: '10px',
boxShadow: boxShadow || theme.shadows[1]
}, variant === 'divider' && {
borderLeft: "1px solid ".concat(theme.palette.background.paper),
borderRadius: 0
}, _defineProperty({}, theme.breakpoints.down('md'), {
width: variant === 'temporary' ? width : '100%',
borderRadius: 0
}));
});
export var BackDrop = styled('div')({
display: 'flex',
flexGrow: 1,
cursor: 'pointer'
});