| Index: third_party/polymer/components/paper-button/paper-button.html
|
| diff --git a/third_party/polymer/components/paper-button/paper-button.html b/third_party/polymer/components/paper-button/paper-button.html
|
| deleted file mode 100644
|
| index 87dbef7f40d828cb8415f6f5b7f050eed0618244..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components/paper-button/paper-button.html
|
| +++ /dev/null
|
| @@ -1,211 +0,0 @@
|
| -<!--
|
| -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">
|
| -
|
| - <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>
|
| -
|
| - <script>
|
| - Polymer('paper-button', {
|
| -
|
| - publish: {
|
| -
|
| - /**
|
| - * The label of the button.
|
| - *
|
| - * @attribute label
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - label: '',
|
| -
|
| - /**
|
| - * If true, the button will be styled as a "raised" button.
|
| - *
|
| - * @attribute raisedButton
|
| - * @type boolean
|
| - * @default false
|
| - */
|
| - raisedButton: {value: false, reflect: true},
|
| -
|
| - /**
|
| - * (optional) The URL of an image for an icon to use in the button.
|
| - * Should not use `icon` property if you are using this property.
|
| - *
|
| - * @attribute iconSrc
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - iconSrc: '',
|
| -
|
| - /**
|
| - * (optional) Specifies the icon name or index in the set of icons
|
| - * available in the icon set. If using this property, load the icon
|
| - * set separately where the icon is used. Should not use `src`
|
| - * if you are using this property.
|
| - *
|
| - * @attribute icon
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - icon: ''
|
| -
|
| - },
|
| -
|
| - z: 1,
|
| -
|
| - attached: function() {
|
| - if (this.textContent && !this.textContent.match(/\s+/)) {
|
| - console.warn('Using textContent to label the button is deprecated. Use the "label" property instead');
|
| - this.label = this.textContent;
|
| - }
|
| - },
|
| -
|
| - activeChanged: function() {
|
| - this.super();
|
| -
|
| - if (this.active) {
|
| - // FIXME: remove when paper-ripple can have a default 'down' state.
|
| - if (!this.lastEvent) {
|
| - var rect = this.getBoundingClientRect();
|
| - this.lastEvent = {
|
| - x: rect.left + rect.width / 2,
|
| - y: rect.top + rect.height / 2
|
| - }
|
| - }
|
| - this.$.ripple.downAction(this.lastEvent);
|
| - } else {
|
| - this.$.ripple.upAction();
|
| - }
|
| - this.adjustZ();
|
| - },
|
| -
|
| - focusedChanged: function() {
|
| - this.super();
|
| - this.adjustZ();
|
| - },
|
| -
|
| - disabledChanged: function() {
|
| - this.super();
|
| - this.adjustZ();
|
| - },
|
| -
|
| - // waitForSpillCompleted: function(callback) {
|
| - // this.async(callback, null, (this.$.ink.spillCompleted ? 0 : this.duration));
|
| - // },
|
| -
|
| - // resetInk: function() {
|
| - // this.active = false;
|
| - // this.$.ink.reset();
|
| - // },
|
| -
|
| - insideButton: function(x, y) {
|
| - var rect = this.getBoundingClientRect();
|
| - return (rect.left <= x) && (x <= rect.right) && (rect.top <= y) && (y <= rect.bottom);
|
| - },
|
| -
|
| - adjustZ: function() {
|
| - if (this.focused) {
|
| - this.classList.add('paper-shadow-animate-z-1-z-2');
|
| - } else {
|
| - this.classList.remove('paper-shadow-animate-z-1-z-2');
|
| -
|
| - if (this.active) {
|
| - this.z = 2;
|
| - } else if (this.disabled) {
|
| - this.z = 0;
|
| - } else {
|
| - this.z = 1;
|
| - }
|
| -
|
| - }
|
| - },
|
| -
|
| - downAction: function(e) {
|
| - this.super(e);
|
| - this.lastEvent = e;
|
| - },
|
| -
|
| - labelChanged: function() {
|
| - this.setAttribute('aria-label', this.label);
|
| - }
|
| -
|
| - });
|
| - </script>
|
| -</polymer-element>
|
|
|