Skip to content

Commit

Permalink
💄 Style: hover transition on search bar
Browse files Browse the repository at this point in the history
  • Loading branch information
ilp-sys committed May 18, 2024
1 parent ba269f7 commit 937832c
Showing 1 changed file with 13 additions and 6 deletions.
19 changes: 13 additions & 6 deletions aeye/app/(nav)/home/styleSearch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,21 @@ import { styled, alpha } from "@mui/material/styles";
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: "info.main",
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
backgroundColor: theme.palette.info.main, // Use theme.palette.info.main
marginLeft: 0,
width: "100%",
marginBottom: theme.spacing(2),
transition: theme.transitions.create([
"background-color",
"box-shadow",
"border",
]),
border: `1px solid transparent`, // Default border
"&:hover, &:focus-within": {
backgroundColor: theme.palette.info.light,
boxShadow: `0 0 0 1px ${alpha(theme.palette.info.contrastText, 0.5)}`,
border: `1px solid ${theme.palette.info.main}`,
},
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
Expand All @@ -28,11 +36,10 @@ const SearchIconWrapper = styled("div")(({ theme }) => ({
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "inherit",
color: theme.palette.info.contrastText, // Use theme.palette.info.contrastText for text color
width: "100%",
"& .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"),
[theme.breakpoints.up("sm")]: {
Expand Down

0 comments on commit 937832c

Please sign in to comment.