firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Factor sky-toolbar into a componet and use a proper material shadow

Browse Source 
R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/953903004
This commit is contained in:
Adam Barth 2015-02-24 10:47:01 -08:00
parent 3904a6c35b
commit 5f50e4b60f
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/stocks/stock.sky
View File

@ -13,7 +13,7 @@
// height: 48px; // height: 48px;
max-height: 48px; max-height: 48px;
display: flex; display: flex;
border-bottom: 1px solid black; border-bottom: 1px solid #F4F4F4;
padding-top: 16px; padding-top: 16px;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;

12
examples/stocks/stocks.sky
View File

@ -7,6 +7,7 @@
<import src="/sky/framework/sky-element.sky" /> <import src="/sky/framework/sky-element.sky" />
<import src="/sky/framework/sky-icon.sky" /> <import src="/sky/framework/sky-icon.sky" />
<import src="/sky/framework/sky-scrollable.sky" /> <import src="/sky/framework/sky-scrollable.sky" />
<import src="/sky/framework/sky-toolbar.sky" />
<import src="stock.sky" as='view'/> <import src="stock.sky" as='view'/>
<import src='companylist.sky' as='model'/> <import src='companylist.sky' as='model'/>
@ -22,25 +23,22 @@
} }
sky-drawer { sky-drawer {
position: absolute; position: absolute;
z-index: 1; z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
sky-toolbar { sky-toolbar {
display: flex; z-index: 1;
align-items: center;
background-color: #3F51B5; background-color: #3F51B5;
color: white; color: white;
height: 56px;
box-shadow: 0px 4px 4px grey;
} }
sky-icon { sky-icon {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 7px; padding: 8px;
margin: 0 4px; margin: 0 4px;
color: black; color: black;
} }
@ -55,7 +53,7 @@
<sky-drawer id="drawer"> <sky-drawer id="drawer">
I am drawer I am drawer
</sky-drawer> </sky-drawer>
<sky-toolbar> <sky-toolbar level="2">
<sky-icon id="menu" type="navigation/menu_white" size="24" /> <sky-icon id="menu" type="navigation/menu_white" size="24" />
<div id="title">I am a stocks app</div> <div id="title">I am a stocks app</div>
<sky-icon type="action/search_white" size="24" /> <sky-icon type="action/search_white" size="24" />