You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
import InputBase from "@mui/material/InputBase";
|
|
import { alpha, styled } from "@mui/material/styles";
|
|
|
|
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)
|
|
},
|
|
marginRight: theme.spacing(2),
|
|
marginLeft: 0,
|
|
width: "100%",
|
|
[theme.breakpoints.up("sm")]: {
|
|
marginLeft: theme.spacing(3),
|
|
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 StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
color: "inherit",
|
|
"& .MuiInputBase-input": {
|
|
padding: theme.spacing(1, 1, 1, 0),
|
|
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
transition: theme.transitions.create("width"),
|
|
width: "100%",
|
|
[theme.breakpoints.up("md")]: {
|
|
width: "20ch"
|
|
}
|
|
}
|
|
}));
|
|
|
|
export default Search;
|