Update Sky widgets to have more material design

sky/framework/sky-input.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-element.sky" />
 
 <sky-element name="sky-input" attributes="value:string">
 <template>
   <style>
   :host {
     display: flex;
-    border: 1px solid blue;
-    margin: 5px;
-    padding: 4px;
   }
   #control {
+    margin: 8px;
+    padding: 8px;
+    border-bottom: 1px solid #E7E7E7;
     flex: 1;
     align-self: center;
     height: 1.2em;
     white-space: nowrap;
     overflow: hidden;
   }
+  #control.focused {
+    padding-bottom: 7px;
+    border-bottom: 2px solid #009cf3;
+  }
   </style>
   <div id="control" contenteditable />
 </template>
 <script>
 import "dart:sky";
 
 // TODO(abarth): Connect to the mojo:keyboard service.
 
 @Tagname('sky-input')
 class SkyInput extends SkyElement {
@@ skipping 16 matching lines @@
       _control.setChild(new Text(_textForValue(newValue)));
   }
 
   void _handleKeyDown(KeyboardEvent event) {
     // TODO(abarth): You can still get newlines if the user pastes them.
     if (event.key == 0xD)
       event.preventDefault();
   }
 
   void _handleFocus(_) {
+    if (_control)
+      _control.setAttribute('class', 'focused');
     // TODO(abarth): Show the keyboard.
   }
 
   void _handleBlur(_) {
+    if (_control)
+      _control.removeAttribute('class');
     // TODO(abarth): Hide the keyboard.
   }
 }
 
 _init(script) => register(script, SkyInput);
 </script>
 </sky-element>