first draft of contacts address card

dfreedm · dfreedm · commit 98d433bf5846 · 2013-10-14T16:22:53.000-07:00
diff --git a/dfreedm/polymer-ui-address/index.html b/dfreedm/polymer-ui-address/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Polymer UI Address</title>
+  <script src="../../../polymer/polymer.js"></script>
+  <link rel="import" href="polymer-ui-address.html">
+</head>
+<body>
+  <polymer-ui-address first="Dan" last="Freedman">
+    <img src="photo.jpg" alt="">
+  </polymer-ui-address>
+</body>
+</html>
diff --git a/dfreedm/polymer-ui-address/photo.jpg b/dfreedm/polymer-ui-address/photo.jpg
diff --git a/dfreedm/polymer-ui-address/polymer-ui-address.html b/dfreedm/polymer-ui-address/polymer-ui-address.html
@@ -0,0 +1,49 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<polymer-element name="polymer-ui-address" attributes="first last">
+  <template>
+    <style>
+      /* Copied from polymer-ui-card */
+      @host {
+        * {
+          display: inline-block;
+          background-color: #fff;
+          border-radius: 2px;
+          box-shadow: rgba(0, 0, 0, 0.098) 0 2px 4px, rgba(0, 0, 0, 0.098) 0 0 3px;
+          height: 48px;
+          width: 152px;
+        }
+      }
+
+      /* @polyfill > img */
+      #pic::content img {
+        display: inline-block;
+        border-radius: 100%;
+        height: 40px;
+        margin: 4px;
+      }
+
+      #name {
+        font-family: 'Helvetica Neue', 'Roboto', 'Arial';
+        height: 48px;
+        line-height: 48px;
+        margin-left: 8px;
+        overflow: hidden;
+        position: absolute;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 88px;
+      }
+    </style>
+    <content id="pic" select="img"></content>
+    <span id="name">{{first}} {{last}}</span>
+  </template>
+  <script>
+    Polymer('polymer-ui-address', {
+    });
+  </script>
+</polymer-element>
