@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
69 lines • 2.6 kB
JavaScript
import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material';
export const Card = styled(MuiCard, {
shouldForwardProp: (prop) => !['type', 'indented', 'selectionColor'].includes(prop),
})(({ theme }) => {
return {
padding: 0,
variants: [
{
props: ({ indented }) => indented,
style: {
padding: theme.spacing(2),
},
},
{
props: {
selectionColor: 'primary',
type: 'selected',
},
style: {
backgroundColor: darken(theme.palette.primary.main, 0.65),
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: darken(theme.palette.primary.main, 0.6),
...theme.applyStyles('light', {
backgroundColor: lighten(theme.palette.primary.main, 0.9),
}),
},
...theme.applyStyles('light', {
backgroundColor: lighten(theme.palette.primary.main, 0.95),
}),
},
},
{
props: {
selectionColor: 'secondary',
type: 'selected',
},
style: {
backgroundColor: darken(theme.palette.secondary.main, 0.76),
borderWidth: 1,
borderStyle: 'solid',
borderColor: alpha(theme.palette.secondary.main, 0.2),
'&:hover': {
backgroundColor: darken(theme.palette.secondary.main, 0.72),
...theme.applyStyles('light', {
backgroundColor: lighten(theme.palette.secondary.main, 0.8),
}),
},
...theme.applyStyles('light', {
backgroundColor: lighten(theme.palette.secondary.main, 0.85),
}),
},
},
{
props: {
type: 'error',
},
style: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.palette.error.main,
},
},
],
};
});
//# sourceMappingURL=Card.js.map