googlearchive · dfreedm · Aug 8, 2013 · Aug 1, 2013 · Aug 1, 2013 · Aug 2, 2013
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /docs
 
 /node_modules
+build.bat
diff --git a/gruntfile.js b/gruntfile.js
@@ -5,20 +5,21 @@
  */
 module.exports = function(grunt) {
   grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
     yuidoc: {
       compile: {
         name: '<%= pkg.name %>',
         description: '<%= pkg.description %>',
         version: '<%= pkg.version %>',
         url: '<%= pkg.homepage %>',
         options: {
-          exclude: 'third_party',
+          exclude: 'docs',
           extension: '.js,.html',
           paths: '.',
           outdir: 'docs',
           linkNatives: 'true',
           tabtospace: 2,
-          themedir: 'tools/doc/themes/footstrap'
+          themedir: 'tools/doc/themes/polymerase'
         }
       }
     },

diff --git a/polymer-ui-arrow/index.html b/polymer-ui-arrow/index.html
@@ -0,0 +1,23 @@
+
+<!doctype html>
+<!--
+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.
+-->
+<html>
+  <head>
+    <title>Arrows</title>
+    <script src="../../polymer/polymer.js"></script>
+    <link rel="import" href="polymer-ui-arrow.html">
+  </head>
+  <body style="background: whitesmoke;">
+    <polymer-ui-arrow direction="up"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="down" size="20" color="whitesmoke" borderWidth="8"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="right" size="30" color="blue" borderColor="lightblue" borderWidth="6"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="left" color="#aaa" borderColor="#aaa"></polymer-ui-arrow>
+  </body>
+</html>
diff --git a/polymer-ui-arrow/polymer-ui-arrow.css b/polymer-ui-arrow/polymer-ui-arrow.css
@@ -0,0 +1,20 @@
+@host {
+	* {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  [hidden], .hidden {
+    display: none;
+  }
+}
+
+.arrow {
+  border-color: transparent;
+  border-style: solid;
+}
+
+.arrow-inner {
+	position: absolute;
+}
diff --git a/polymer-ui-arrow/polymer-ui-arrow.html b/polymer-ui-arrow/polymer-ui-arrow.html
@@ -0,0 +1,79 @@
+<!--
+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.
+-->
+<!--
+/**
+ * @module Polymer UI Elements
+ */
+/**
+ * @class polymer-ui-arrow
+ */
+-->
+<polymer-element name="polymer-ui-arrow" attributes="direction size color borderColor borderWidth">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-arrow.css">
+    <div id="outer" class="arrow arrow-outer" style="border-width: {{size}}px;"></div>
+    <div id="inner" class="arrow arrow-inner" style="border-width: {{size}}px;"></div>
+  </template>
+  <script>
+    Polymer('polymer-ui-arrow', {
+      borders: {
+        up: 'Bottom',
+        down: 'Top',
+        left: 'Right',
+        right: 'Left'
+      },
+      tops: {
+        up: 1,
+        down: -1,
+        left: 0,
+        right: 0
+      },
+      lefts: {
+        up: 0,
+        down: 0,
+        left: 1,
+        right: -1
+      },
+      direction: 'up',
+      size: 10,
+      color: '#fff',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      ready: function() {
+        this.asyncUpdate();
+      },
+      directionChanged: function() {
+        this.asyncUpdate();
+      },
+      sizeChanged: function() {
+        this.asyncUpdate();
+      },
+      colorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderColorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderWidthChanged: function() {
+        this.asyncUpdate();
+      },
+      asyncUpdate: function() {
+        this.updateJob = this.job(this.updateJob, this.update, 1);
+      },
+      update: function() {
+        var os = this.$.outer.style;
+        var is = this.$.inner.style;
+        os.borderColor = 'transparent';
+        is.borderColor = 'transparent';
+        var bc = 'border' + this.borders[this.direction] + 'Color';
+        os[bc] = this.borderColor;
+        is[bc] = this.color;
+        is.top = this.tops[this.direction] * this.borderWidth + 'px';
+        is.left = this.lefts[this.direction] * this.borderWidth + 'px';
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/polymer-ui-field/index.html b/polymer-ui-field/index.html
@@ -5,7 +5,9 @@
     <title>Polymer UI Field</title>
     <script src="../../polymer/polymer.js" debug></script>
     <link rel="import" href="polymer-ui-field.html" />
+    <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html" />
     <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html" />
+    <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html" />
     <style>
       html {
         font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
@@ -14,9 +16,17 @@
     </style>
   </head>
   <body>
-    <polymer-ui-field>
-      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
-      <input value="Field input">
+		<polymer-ui-field>
+			<polymer-ui-icon icon="contact"></polymer-ui-icon>
+			<input placeholder="hi!">
+    </polymer-ui-field>
+		<polymer-ui-field>
+		<polymer-ui-icon icon="plus"></polymer-ui-icon>
+			<label>I'm a label!</label>
+			<input placeholder="I have a label">
+    </polymer-ui-field>
+		<polymer-ui-field>
+			<input placeholder="I have no icon">
     </polymer-ui-field>
   </body>
 </html>
diff --git a/polymer-ui-field/polymer-ui-field.html b/polymer-ui-field/polymer-ui-field.html
@@ -1,31 +1,45 @@
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
+
 <polymer-element name="polymer-ui-field">
   <template>
     <style>
       @host {
         * {
           display: block;
-          padding: 18px;
           border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+					color: #333;
+          font-size: 14px;
         }
       }
+      /*@polyfill @host > polymer-ui-icon*/
+      ::-webkit-distributed(> polymer-ui-icon) {
+				margin: 18px;
+			}
+      /*@polyfill @host > polymer-ui-menu-button*/
+      ::-webkit-distributed(> polymer-ui-menu-button) {
+				margin: 8px;
+			}
+      /*@polyfill @host input*/
       ::-webkit-distributed(input) {
-          font-size: 14px;
-          height: 40px;
+					background: transparent;
           color: #333;
           border: 0;
+					padding: 0;
+          font-size: 14px;
           flex: 1 auto;
       }
+      /*@polyfill @host input:focus*/
+      ::-webkit-distributed(input:focus) {
+				outline: none;
+			}
+      /*@polyfill @host input::placeholder*/
       ::-webkit-distributed(input::placeholder) {
         color: #b3b3b3;
       }
-      div {
-        display: flex;
-        flex-direction: row;
-      }
     </style>
-    <div>
-      <content select="*"></content>
-    </div>
+		<polymer-flex-layout align="center"></polymer-flex-layout>
+		<content select="polymer-ui-icon,polymer-ui-icon-button,polymer-ui-menu-button"></content>
+		<content select="*"></content>
   </template>
   <script>
     Polymer('polymer-ui-field');

diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.css b/polymer-ui-icon-button/polymer-ui-icon-button.css
@@ -8,25 +8,52 @@ license that can be found in the LICENSE file.
     display: inline-block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    width: 44px;
-    height: 44px;
-    padding: 10px;
+    width: 38px;
+    height: 38px;
+    background-image: none;
+    border-radius: 2px;
+    padding: 7px;
+    margin: 2px;
     vertical-align: middle;
     cursor: pointer;
-    background: url(btn_light.png) top left no-repeat;
-    background-size: cover;
+  }
+
+  .outline {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   }
 
-  *:hover {
-    background-position: 0 -44px;
+  *:hover, .hover {
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
   }
 
-  *.selected {
-    background-position: 0 -88px;
+  .selected {
+    background-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
   }
 
   *:active, *.selected:active {
-    background-position: 0 -132px;
+    background-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  .polymer-ui-dark-theme.outline {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
+  }
+
+  .polymer-ui-dark-theme:hover, .polymer-ui-dark-theme.hover {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
+  }
+
+  .polymer-ui-dark-theme.selected {
+    background-color: rgba(220, 220, 220, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
+  }
+
+  .polymer-ui-dark-theme:active, .polymer-ui-dark-theme.selected:active {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
   }
 }
 

diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.html b/polymer-ui-icon-button/polymer-ui-icon-button.html
@@ -27,7 +27,7 @@
 
 <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
 
-<polymer-element name="polymer-ui-icon-button" attributes="src index icon active">
+<polymer-element name="polymer-ui-icon-button" extends="polymer-ui-theme-aware" attributes="src index icon active">
   <template>
     <link rel="stylesheet" href="polymer-ui-icon-button.css">
     <polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"><content></content></polymer-ui-icon>

diff --git a/polymer-ui-menu-button/index.html b/polymer-ui-menu-button/index.html
@@ -29,12 +29,12 @@
 			<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
 			<div flex>Toolbar: polymer-ui-light-theme</div>
 			<polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 			</polymer-ui-menu-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
@@ -46,6 +46,15 @@
 			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
 		<br><br><br><br><br><br><br><br><br><br>
 	</div>
 </body>

diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.css b/polymer-ui-menu-button/polymer-ui-menu-button.css
@@ -8,6 +8,7 @@
 }
 
 #menuOverlay {
+  position: absolute;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	background: white;
@@ -16,14 +17,18 @@
 	margin: 7px 0 0 7px;
 }
 
-#menuOverlay[valign=right] {
+#menuOverlay[align=right] {
   position: absolute !important;
 	right: 10px;
 }
 
+#menuOverlay[valign=top] {
+	bottom: 36px;
+}
+
 @media screen and (max-width: 800px) {
   #menuOverlay,
-	#menuOverlay[valign=right] {
+	#menuOverlay[align=right] {
     left: 0;
     width: 100%;
     -webkit-transform: none;
@@ -38,7 +43,7 @@
 
 #arrow {
 	position: absolute;
-	bottom: -8px;
+	bottom: -10px;
 }
 
 .arrow {
@@ -63,3 +68,17 @@
 	border-bottom-color: white;
 	margin-top: -16px;
 }
+
+#arrow[valign=top] {
+	top: -10px;
+}
+
+[valign=top] .arrow {
+	margin: 0px 4px 0;
+	border-color: #cfcfcf transparent transparent transparent;
+}
+
+[valign=top] .arrow-inner {
+	border-top-color: white;
+	margin-top: -18px;
+}