44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { styled, alpha } from '@mui/material/styles';
|
|
import MuiInputBase from '@mui/material/InputBase';
|
|
|
|
export const Search = styled('div')(({ theme }) => ({
|
|
position: 'relative',
|
|
borderRadius: theme.shape.borderRadius,
|
|
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
|
'&:hover': {
|
|
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
|
},
|
|
marginLeft: 0,
|
|
width: '100%',
|
|
[theme.breakpoints.up('sm')]: {
|
|
marginLeft: theme.spacing(1),
|
|
width: 'auto',
|
|
},
|
|
}));
|
|
|
|
export const SearchIconWrapper = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(0, 2),
|
|
height: '100%',
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}));
|
|
|
|
export const InputBase = styled(MuiInputBase)(({ theme }) => ({
|
|
color: 'inherit',
|
|
'& .MuiInputBase-input': {
|
|
padding: theme.spacing(1, 1, 1, 0),
|
|
// vertical padding + font size from searchIcon
|
|
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
transition: theme.transitions.create('width'),
|
|
width: '100%',
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: '12ch',
|
|
'&:focus': {
|
|
width: '20ch',
|
|
},
|
|
},
|
|
},
|
|
})); |