@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.
63 lines • 2.79 kB
JavaScript
import { Box, inputAdornmentClasses, inputBaseClasses, List, styled, svgIconClasses, } from '@mui/material';
import { Input as InputBase } from '../../components/Input.js';
export const Input = styled(InputBase, {
shouldForwardProp: (prop) => prop !== 'size',
})(({ theme, size = 'medium' }) => ({
paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),
paddingLeft: theme.spacing(1.25),
fontSize: size === 'small' ? '0.875rem' : '1rem',
borderRadius: theme.vars.shape.borderRadius,
[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
paddingRight: theme.spacing(1.25),
},
[`& .${inputBaseClasses.input}`]: {
padding: theme.spacing(1),
},
[`& .${inputAdornmentClasses.root}`]: {
marginLeft: 0,
marginRight: 0,
[`& .${svgIconClasses.root}`]: {
width: size === 'small' ? '1.25rem' : '1.5rem',
},
},
[`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {
marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),
[`& .${svgIconClasses.root}`]: {
width: size === 'small' ? '1rem' : '1.25rem',
height: size === 'small' ? '1rem' : '1.25rem',
},
},
}));
export const searchContainerHeight = 64;
// When the widget is in Full Height layout mode in order to appear "sticky the StickySearchInputContainer needs to use
// position fixed in the same way as the header (see Header.tsx). The headerHeight value here is used as the top value
// to ensure that this container positioned correctly beneath the header
export const StickySearchInputContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== 'headerHeight',
})(({ theme, headerHeight }) => ({
position: 'sticky',
top: headerHeight,
zIndex: 1,
height: searchContainerHeight,
paddingBottom: theme.spacing(2),
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
backgroundColor: theme.vars.palette.background.default,
...(theme.header?.position === 'fixed'
? {
position: 'fixed',
minWidth: theme.breakpoints.values.xs,
maxWidth: theme.breakpoints.values.sm,
width: '100%',
}
: {}),
}));
// When in Full Height layout mode, as the StickySearchInputContainer (see above) uses fixed position, the list element needs to provide
// additional paddingTop in order to be positioned correctly.
export const SearchList = styled(List)(({ theme }) => ({
paddingTop: theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
paddingLeft: theme.spacing(1.5),
paddingRight: theme.spacing(1.5),
paddingBottom: theme.spacing(1.5),
}));
//# sourceMappingURL=SearchInput.style.js.map