Index: third_party/polymer/components-chromium/paper-button/paper-button.html |
diff --git a/third_party/polymer/components-chromium/paper-button/paper-button.html b/third_party/polymer/components-chromium/paper-button/paper-button.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b02f7bba486ba359b9e9bb86e13a476126098bc9 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/paper-button/paper-button.html |
@@ -0,0 +1,85 @@ |
+<!-- |
+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.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+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.txt |
+--> |
+ |
+<!-- |
+@group Paper Elements |
+ |
+`paper-button` is a button containing text or an image. When the user touches |
+the button, a ripple effect emanates from the point of contact. |
+ |
+A `paper-button` may be flat or raised. A raised button behaves like a piece |
+of paper resting on another sheet, and lifts up upon press. Flat buttons do |
+not raise up. Add the `raisedButton` attribute to make a raised button. |
+ |
+Example: |
+ |
+ <paper-button label="flat button"></paper-button> |
+ <paper-button label="raised button" raisedButton></paper-button> |
+ |
+A button should be styled with a background color, text color, ripple color |
+and hover color. |
+ |
+To style the background, text and hover color, apply the `background` and |
+`color` CSS properties to the button. To style the ripple color, apply the |
+`color` CSS property to the `#ripple` element in the button's shadow root: |
+ |
+ /* Style #my-button blue with white text and darker blue ink. */ |
+ #my-button { |
+ background: #4285f4; |
+ color: #fff; |
+ } |
+ |
+ #my-button:hover { |
+ background: #2a56c6; |
+ } |
+ |
+ #my-button::shadow #ripple { |
+ color: #2a56c6; |
+ } |
+ |
+@element paper-button |
+@extends paper-focusable |
+--> |
+ |
+<link href="../polymer/polymer.html" rel="import"> |
+<link href="../core-icon/core-icon.html" rel="import"> |
+<link href="../paper-focusable/paper-focusable.html" rel="import"> |
+<link href="../paper-ripple/paper-ripple.html" rel="import"> |
+<link href="../paper-shadow/paper-shadow.html" rel="import"> |
+ |
+<polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon" role="button" assetpath=""> |
+ |
+ <template> |
+ |
+ <link href="paper-button.css" rel="stylesheet"> |
+ |
+ <template if="{{raisedButton}}"> |
+ <div fit="" id="shadow-container"> |
+ <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow> |
+ </div> |
+ </template> |
+ |
+ <div id="clip"> |
+ <!-- <div id="focusBg"></div> --> |
+ <paper-ripple id="ripple"></paper-ripple> |
+ <div id="content"> |
+ <template if="{{iconSrc || icon}}"> |
+ <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon> |
+ </template> |
+ <template if="{{label}}"> |
+ <span>{{label}}</span> |
+ </template> |
+ </div> |
+ </div> |
+ |
+ </template> |
+ |
+ |
+</polymer-element> |
+<script src="paper-button-extracted.js"></script> |