chore(navbar): some style adjust

This commit is contained in:
haitao(lj) 2022-10-11 10:24:31 +08:00
parent 8878c28fe1
commit 75bea2e579
5 changed files with 16 additions and 11 deletions

2
ui/.gitignore vendored
View File

@ -9,7 +9,7 @@
/coverage
# production
/build
/build/
# misc
.DS_Store

View File

@ -1 +0,0 @@
<!doctype html><html><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/></head><body>answer<div id="root"></div></body></html>

View File

@ -1,4 +1,8 @@
@import '~bootstrap/scss/bootstrap-utilities';
#header {
background: linear-gradient(180deg, #0033FF 0%, rgba(0, 51, 255, 0.95) 100%);
--bs-navbar-padding-y: 0.75rem;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), $box-shadow-sm;
.logo {
height: 28px;
width: auto;
@ -15,7 +19,14 @@
height: 38px;
}
}
.placeholder-search::placeholder {
color: rgba(255, 255, 255, 0.75);
.placeholder-search {
background-color: rgba(255, 255, 255, .2);
border: 0;
&:focus {
border: $border-width $border-style $border-color;
}
&::placeholder {
color: rgba(255, 255, 255, 0.75);
}
}
}

View File

@ -46,12 +46,7 @@ const Header: FC = () => {
}
}, [q]);
return (
<Navbar
bg="primary"
variant="dark"
expand="lg"
className="shadow-sm sticky-top"
id="header">
<Navbar variant="dark" expand="lg" className="sticky-top" id="header">
<Container className="d-flex align-items-center">
<Navbar.Brand href="/">
{interfaceInfo.logo ? (
@ -84,7 +79,7 @@ const Header: FC = () => {
<Form action="/search" className="w-75 px-2">
<FormControl
placeholder={t('header.search.placeholder')}
className="bg-transparent text-white placeholder-search"
className="text-white placeholder-search"
value={searchStr}
name="q"
onChange={(e) => handleInput(e.target.value)}