@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.
45 lines • 1.74 kB
JavaScript
import { ListItem as ListItemBase, listItemButtonClasses, listItemTextClasses, Avatar as MuiAvatar, List as MuiList, ListItemAvatar as MuiListItemAvatar, ListItemText as MuiListItemText, styled, } from '@mui/material';
import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js';
export const Avatar = styled(MuiAvatar)(({ size = 'medium' }) => ({
width: size === 'small' ? 32 : 40,
height: size === 'small' ? 32 : 40,
}));
export const ListItemAvatar = styled(MuiListItemAvatar)(({ size = 'medium' }) => ({
minWidth: size === 'small' ? 44 : 56,
}));
export const ListItemText = styled(MuiListItemText)(({ size = 'medium' }) => ({
[`.${listItemTextClasses.primary}`]: {
fontWeight: 500,
fontSize: size === 'small' ? '1rem' : '1.125rem',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
}));
export const ListItemButton = styled(ListItemButtonBase)(({ size = 'medium', theme }) => {
return {
borderRadius: theme.vars.shape.borderRadius,
paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),
height: size === 'small' ? 44 : 56,
width: '100%',
};
});
export const List = styled(MuiList)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(0.5),
padding: 0,
marginLeft: theme.spacing(1.5),
marginRight: theme.spacing(1.5),
marginBottom: theme.spacing(1.5),
cursor: 'pointer',
}));
export const ListItem = styled(ListItemBase)(({ theme }) => ({
position: 'absolute',
top: 0,
left: 0,
[`& .${listItemButtonClasses.root}`]: {
paddingRight: theme.spacing(1),
},
}));
//# sourceMappingURL=ChainList.style.js.map