@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.
76 lines • 2.6 kB
JavaScript
import { Box, ButtonBase, InputBase, inputBaseClasses, styled, } from '@mui/material';
export const SettingsFieldSet = styled(Box)(({ theme }) => ({
display: 'flex',
borderRadius: theme.vars.shape.borderRadius,
padding: theme.spacing(0.5),
gap: theme.spacing(0.5),
height: '3.5rem',
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
...theme.applyStyles('dark', {
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
}),
}));
const slippageControlSelected = (theme) => ({
backgroundColor: theme.vars.palette.background.paper,
boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
...theme.applyStyles('dark', {
backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,
}),
borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
});
export const SlippageDefaultButton = styled(ButtonBase)(({ theme, selected }) => {
const slippageControlSelectedStyles = slippageControlSelected(theme);
const selectedStyle = selected
? {
'&:not(:focus)': {
...slippageControlSelectedStyles,
},
}
: {};
return {
height: '100%',
width: '100%',
fontSize: '1rem',
fontWeight: 700,
'&:focus': {
...slippageControlSelectedStyles,
},
...selectedStyle,
};
});
export const SlippageCustomInput = styled(InputBase)(({ theme, selected }) => {
const slippageControlSelectedStyles = slippageControlSelected(theme);
const selectedStyle = selected
? {
'&:not(:focus)': {
...slippageControlSelectedStyles,
},
}
: {};
return {
height: '100%',
width: '100%',
[`.${inputBaseClasses.input}`]: {
height: '100%',
width: '100%',
padding: 0,
textAlign: 'center',
'&::placeholder': {
fontSize: '1rem',
fontWeight: 700,
opacity: 1,
},
'&:focus': {
...slippageControlSelectedStyles,
},
...selectedStyle,
},
};
});
export const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1.25),
marginTop: theme.spacing(1.5),
}));
//# sourceMappingURL=SlippageSettings.style.js.map