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

sky/examples/stocks/stocks.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="/sky/framework/sky-drawer.sky" />
 <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'/>
 
 <sky-element>
 <template>
   <style>
     :host {
       display: flex;
       flex-direction: column;
       height: -webkit-fill-available;
       font-family: 'Roboto Regular', 'Helvetica';
       font-size: 16px;
     }
     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;

[eseidel, 2015/02/24 18:34:36]

Should the level= stuff do this?

[abarth-chromium, 2015/02/24 18:45:20]

That's an interesting question.  I'm not sure.

       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;
     }
     #title {
       flex: 1;
       margin: 0 4px;
     }
     sky-scrollable {
       flex: 1;
     }
   </style>
   <sky-drawer id="drawer">
     I am drawer
   </sky-drawer>
-  <sky-toolbar>
+  <sky-toolbar level="2">

[eseidel, 2015/02/24 18:34:36]

We might want to name the levels.

[abarth-chromium, 2015/02/24 18:45:20]

Yeah...  I think the spec uses numbers but names would make more sense.

     <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" />
     <sky-icon type="navigation/more_vert_white" size="24" />
   </sky-toolbar>
   <sky-scrollable id='stock_list'>
   </sky-scrollable>
 </template>
 <script>
 import "dart:sky";
@@ skipping 30 matching lines @@
   }
 
   void _handleMenuClick(_) {
     _drawer.toggle();
   }
 }
 
 _init(script) => register(script, Stocks);
 </script>
 </sky-element>