@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
67 lines • 2.07 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Fab } from '@mui/material';
export const StyledFab = styled(Fab, {
shouldForwardProp: (prop) => prop !== 'pulse' && prop !== 'position' && prop !== 'fixed',
})(({ theme, pulse, position, fixed }) => {
const getPositionStyles = () => {
if (!fixed)
return {};
switch (position) {
case 'bottom-right':
return {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
};
case 'bottom-left':
return {
position: 'fixed',
bottom: theme.spacing(2),
left: theme.spacing(2),
};
case 'top-right':
return {
position: 'fixed',
top: theme.spacing(2),
right: theme.spacing(2),
};
case 'top-left':
return {
position: 'fixed',
top: theme.spacing(2),
left: theme.spacing(2),
};
default:
return {};
}
};
return {
boxShadow: theme.shadows[6],
transition: theme.transitions.create([
'transform',
'box-shadow',
], {
duration: theme.transitions.duration.short,
}),
'&:hover': {
transform: 'scale(1.05)',
boxShadow: theme.shadows[8],
},
...(pulse && {
animation: 'fab-pulse 2s infinite',
'@keyframes fab-pulse': {
'0%': {
transform: 'scale(1)',
},
'50%': {
transform: 'scale(1.1)',
},
'100%': {
transform: 'scale(1)',
},
},
}),
...getPositionStyles(),
};
});
//# sourceMappingURL=Fab.style.js.map