@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.
71 lines • 2.94 kB
JavaScript
import { Card as MuiCard, 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: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.vars.palette.primary.main,
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
'&:hover': {
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
},
...theme.applyStyles('dark', {
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
'&:hover': {
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
},
borderColor: theme.vars.palette.primary.main,
}),
},
},
{
props: {
selectionColor: 'secondary',
type: 'selected',
},
style: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
'&:hover': {
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
},
...theme.applyStyles('dark', {
borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
'&:hover': {
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
},
}),
},
},
{
props: {
type: 'error',
},
style: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.vars.palette.error.main,
},
},
],
};
});
//# sourceMappingURL=Card.js.map