• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
13
14<!--
15@group Paper Elements
16@element paper-icon-button-light
17@demo demo/paper-icon-button-light.html
18-->
19<dom-module id="paper-icon-button-light">
20  <template strip-whitespace>
21    <style>
22      :host {
23        vertical-align: middle;
24        color: inherit;
25        outline: none;
26        width: 24px;
27        height: 24px;
28        background: none;
29        margin: 0;
30        border: none;
31        padding: 0;
32
33        position: relative;
34        cursor: pointer;
35
36        /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
37        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
38        -webkit-tap-highlight-color: transparent;
39      }
40
41      :host([disabled]) {
42        color: #9b9b9b;
43        pointer-events: none;
44        cursor: auto;
45      }
46
47      paper-ripple {
48        opacity: 0.6;
49        color: currentColor;
50      }
51    </style>
52    <content></content>
53  </template>
54  <script>
55    Polymer({
56      is: 'paper-icon-button-light',
57      extends: 'button',
58
59      behaviors: [
60        Polymer.PaperRippleBehavior
61      ],
62
63      listeners: {
64        'down': '_rippleDown',
65        'up': '_rippleUp',
66        'focus': '_rippleDown',
67        'blur': '_rippleUp',
68      },
69
70      _rippleDown: function() {
71        this.getRipple().downAction();
72      },
73
74      _rippleUp: function() {
75        this.getRipple().upAction();
76      },
77
78      /**
79       * @param {...*} var_args
80       */
81      ensureRipple: function(var_args) {
82        var lastRipple = this._ripple;
83        Polymer.PaperRippleBehavior.ensureRipple.apply(this, arguments);
84        if (this._ripple && this._ripple !== lastRipple) {
85          this._ripple.center = true;
86          this._ripple.classList.add('circle');
87        }
88      }
89    });
90  </script>
91</dom-module>
92