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

2
src/components/SearchInput/SearchInput.tsx
View File

@@ -15,7 +15,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
}; };
return ( return (
<div className="search-bar"> <div className="search-bar">
<Search /> <Search size={24} />
<input <input
id="search-input" id="search-input"
aria-label="Search for an icon" aria-label="Search for an icon"

2
src/components/index.ts
View File

@@ -4,8 +4,6 @@ export { default as Panorama } from "./Panorama/Panorama";
export { default as Info } from "./Info/Info"; export { default as Info } from "./Info/Info";
export { default as Toolbar } from "./Toolbar/Toolbar"; export { default as Toolbar } from "./Toolbar/Toolbar";
export { default as IconGrid } from "./IconGrid/IconGrid"; export { default as IconGrid } from "./IconGrid/IconGrid";
export { default as IconGridStatic } from "./IconGrid/IconGridStatic";
export { default as IconGridUV } from "./IconGrid/IconGridUV";
export { default as ColorInput } from "./ColorInput/ColorInput"; export { default as ColorInput } from "./ColorInput/ColorInput";
export { default as SearchInput } from "./SearchInput/SearchInput"; export { default as SearchInput } from "./SearchInput/SearchInput";
export { default as SizeInput } from "./SizeInput/SizeInput"; export { default as SizeInput } from "./SizeInput/SizeInput";