andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SearchInput: update style to match spec

Browse Source
This commit is contained in:
rektdeckard
2020-07-29 12:22:43 -04:00
parent 105a1abc96
commit c538766794
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/SearchInput/SearchInput.css
View File

@@ -1,30 +1,39 @@
.search-bar {
position: relative;
display: flex;
align-items: center;
flex: 2;
margin: 4px;
padding: 8px 16px;
border: 1px solid black;
border-radius: 24px;
background-color: white;
align-items: center;
height: 48px;
margin: 0 4px;
padding: 0 24px;
border-radius: 8px;
color: white;
background-color: #494650;
}
.search-bar:focus-within {
outline: none;
border: 1px solid violet;
border-radius: 24px;
color: black !important;
background-color: white !important;
}
.search-bar input {
height: 100%;
flex: 1;
border: none;
margin-left: 8px;
padding: 2px 0px 0px;
margin-left: 12px;
padding: 0;
font-size: 16px;
color: white;
background-color: transparent !important;
}
::placeholder {
color: white !important;
}
.search-bar input:focus {
outline: none;
color: black;
}
.search-bar input::placeholder {