| 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>
|
|
|