49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import { alpha, InputBase, styled } from "@mui/material";
|
|
|
|
export const Search = styled("div")(({ theme }) => ({
|
|
borderRadius: theme.shape.borderRadius,
|
|
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
|
"&:hover": {
|
|
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
|
},
|
|
width: "100%",
|
|
[theme.breakpoints.up("sm")]: {
|
|
width: "auto",
|
|
},
|
|
display: "flex",
|
|
alignItems: "center",
|
|
// boxShadow: theme.shadows[3],
|
|
minHeight: 70,
|
|
border: `1px solid`,
|
|
borderColor: theme.palette.primary.main,
|
|
boxShadow: `0 2px 5px ${alpha(theme.palette.primary.main, 0.5)}`,
|
|
}));
|
|
|
|
export const SearchIconWrapper = styled("div")(() => ({
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginLeft: 16,
|
|
}));
|
|
|
|
export const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
color: "inherit",
|
|
height: "100%",
|
|
width: "100%",
|
|
"& .MuiInputBase-input": {
|
|
fontSize: 30,
|
|
// minHeight: 70,
|
|
// fontWeight: "bolder",
|
|
// vertical padding + font size from searchIcon
|
|
paddingLeft: 32 + 24,
|
|
transition: theme.transitions.create("width"),
|
|
width: "100%",
|
|
[theme.breakpoints.up("md")]: {
|
|
// width: "20ch",
|
|
},
|
|
},
|
|
flexGrow: 1,
|
|
}));
|