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

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/953903004

examples/stocks/stock.sky

@@ -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;

examples/stocks/stocks.sky

@@ -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" />

framework/sky-toolbar.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="shadow.sky" as="shadow" />
+<import src="sky-element.sky" />
+
+<sky-element attributes="level:number">
+<template>
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      height: 56px;
+    }
+  </style>
+  <content />
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('sky-toolbar')
+class SkyToolbar extends SkyElement {
+  void shadowRootReady() {
+    shadow.applyTo(shadowRoot);
+  }
+}
+
+_init(script) => register(script, SkyToolbar);
+</script>
+</sky-element>