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

Toolbar: update style to match spec

Browse Source
This commit is contained in:
rektdeckard
2020-07-29 12:26:24 -04:00
parent b1a4a93e73
commit c269343014
2 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Toolbar/Toolbar.css
View File

@@ -1,14 +1,22 @@
.toolbar { menu.toolbar {
position: sticky; position: sticky;
top: 0px; top: 0px;
padding: 4px; padding: 0;
/* background-color: #f2f2f2; */ margin: 0;
background-color: #e2e2e2; background-color: #35313d;
border-top: 1px solid black;
border-bottom: 1px solid black;
display: flex;
z-index: 1; z-index: 1;
flex-flow: wrap; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.toolbar-contents {
width: 83.33%;
max-width: 1120px;
/* height: 48px; */
padding: 8px 0;
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: space-between;
}

14
src/components/Toolbar/Toolbar.tsx
View File

@@ -7,12 +7,14 @@ type ToolbarProps = {};
const Toolbar: React.FC<ToolbarProps> = () => { const Toolbar: React.FC<ToolbarProps> = () => {
return ( return (
<div className="toolbar"> <menu className="toolbar">
<StyleInput /> <div className="toolbar-contents">
<SearchInput /> <StyleInput />
<SizeInput /> <SearchInput />
<ColorInput /> <SizeInput />
</div> <ColorInput />
</div>
</menu>
); );
}; };