Index: third_party/polymer/components/paper-icon-button/paper-icon-button.html |
diff --git a/third_party/polymer/components/paper-icon-button/paper-icon-button.html b/third_party/polymer/components/paper-icon-button/paper-icon-button.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9e53016c28134c4e2c4432490bd6d03571bfa8fa |
--- /dev/null |
+++ b/third_party/polymer/components/paper-icon-button/paper-icon-button.html |
@@ -0,0 +1,87 @@ |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS |
+--> |
+ |
+<!-- |
+@group Paper Elements |
+`paper-icon-button` is a button with an image placed at the center. |
+ |
+Example: |
+ |
+ <paper-icon-button iconSrc="star.png"></paper-icon-button> |
+ |
+`paper-icon-button` includes a default icon set. Use `icon` to specify |
+which icon from the icon set to use. |
+ |
+Example: |
+ |
+ <paper-icon-button icon="menu"></paper-icon-button> |
+ |
+The icons provided by `core-icons` are SVG, and you can style them with CSS. |
+ |
+Example: |
+ |
+ <paper-icon-button icon="favorite" style="fill:red;"></paper-icon-button> |
+ |
+See `core-iconset` for more information about how to use a custom icon set. |
+ |
+@element paper-icon-button |
+@extends paper-button |
+@homepage github.io |
+--> |
+ |
+<link href="../core-icon/core-icon.html" rel="import"> |
+<link href="../paper-button/paper-button.html" rel="import"> |
+ |
+<polymer-element name="paper-icon-button" extends="paper-button" attributes="fill"> |
+ |
+ <template> |
+ |
+ <link href="paper-icon-button.css" rel="stylesheet"> |
+ |
+ <shadow></shadow> |
+ |
+ </template> |
+ |
+ <script> |
+ |
+ Polymer('paper-icon-button', { |
+ |
+ publish: { |
+ |
+ /** |
+ * If true, the ripple expands to a square to fill the containing box. |
+ * |
+ * @attribute fill |
+ * @type boolean |
+ * @default false |
+ */ |
+ fill: {value: false, reflect: true} |
+ |
+ }, |
+ |
+ ready: function() { |
+ this.$.ripple.classList.add('recenteringTouch'); |
+ this.fillChanged(); |
+ }, |
+ |
+ fillChanged: function() { |
+ this.$.ripple.classList.toggle('circle', !this.fill); |
+ }, |
+ |
+ iconChanged: function(oldIcon) { |
+ if (!this.label) { |
+ this.setAttribute('aria-label', this.icon); |
+ } |
+ } |
+ |
+ }); |
+ |
+ </script> |
+ |
+</polymer-element> |