mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Factor sky-toolbar into a componet and use a proper material shadow
R=eseidel@chromium.org Review URL: https://codereview.chromium.org/953903004
This commit is contained in:
parent
3904a6c35b
commit
5f50e4b60f
|
@ -13,7 +13,7 @@
|
|||
// height: 48px;
|
||||
max-height: 48px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
padding-top: 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
<import src="/sky/framework/sky-element.sky" />
|
||||
<import src="/sky/framework/sky-icon.sky" />
|
||||
<import src="/sky/framework/sky-scrollable.sky" />
|
||||
<import src="/sky/framework/sky-toolbar.sky" />
|
||||
<import src="stock.sky" as='view'/>
|
||||
<import src='companylist.sky' as='model'/>
|
||||
|
||||
|
@ -22,25 +23,22 @@
|
|||
}
|
||||
sky-drawer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
sky-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
background-color: #3F51B5;
|
||||
color: white;
|
||||
height: 56px;
|
||||
box-shadow: 0px 4px 4px grey;
|
||||
}
|
||||
sky-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
padding: 8px;
|
||||
margin: 0 4px;
|
||||
color: black;
|
||||
}
|
||||
|
@ -55,7 +53,7 @@
|
|||
<sky-drawer id="drawer">
|
||||
I am drawer
|
||||
</sky-drawer>
|
||||
<sky-toolbar>
|
||||
<sky-toolbar level="2">
|
||||
<sky-icon id="menu" type="navigation/menu_white" size="24" />
|
||||
<div id="title">I am a stocks app</div>
|
||||
<sky-icon type="action/search_white" size="24" />
|
||||
|
|
Loading…
Reference in a new issue