@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
70 lines • 1.89 kB
JavaScript
import { styled, keyframes, alpha } from '@mui/material';
var spin = keyframes({
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
});
export var WithoutFile = styled('div', {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'variant' && prop !== 'isLoadFiles';
}
})(function (_ref) {
var theme = _ref.theme,
isLoadFiles = _ref.isLoadFiles,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'rounded' : _ref$variant;
return {
width: '100%',
height: '100%',
backgroundColor: isLoadFiles ? alpha(theme.palette.primary.light, 0.09) : 'transparent',
margin: '0',
borderRadius: variant === 'rounded' ? '1rem' : '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: isLoadFiles ? "1px dashed ".concat(theme.palette.primary.main) : "1px dashed ".concat(theme.palette.divider)
};
});
export var WrapperInputFile = styled('div')({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
width: '100%',
borderRadius: '1rem',
overflow: 'hidden',
aspectRatio: '16/9'
});
export var InputFile = styled('input')({
width: 0,
height: 0,
display: 'none'
});
export var Spinner = styled('div', {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'state';
}
})(function (_ref2) {
var state = _ref2.state;
return Object.assign({
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}, state && {
'&::before': {
content: "''",
position: 'absolute',
border: '12.5px solid #F5F7FB',
width: '125px',
height: '125px',
borderRadius: '50%',
borderRightColor: '#46C082',
animation: "".concat(spin, " 1s ease infinite")
}
});
});