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