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<!--
15The following custom properties and mixins are also available for styling:
16
17Custom property | Description | Default
18----------------|-------------|----------
19`--paper-icon-button-light-ripple` | Mixin applied to the paper ripple | `{}`
20
21@group Paper Elements
22@element paper-icon-button-light
23@demo demo/paper-icon-button-light.html
24-->
25<dom-module id="paper-icon-button-light">
26  <template strip-whitespace>
27    <style>
28      :host {
29        vertical-align: middle;
30        color: inherit;
31        outline: none;
32        width: 24px;
33        height: 24px;
34        background: none;
35        margin: 0;
36        border: none;
37        padding: 0;
38
39        position: relative;
40        cursor: pointer;
41
42        /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
43        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44        -webkit-tap-highlight-color: transparent;
45      }
46
47      :host([disabled]) {
48        color: #9b9b9b;
49        pointer-events: none;
50        cursor: auto;
51      }
52
53      paper-ripple {
54        opacity: 0.6;
55        color: currentColor;
56        @apply(--paper-icon-button-light-ripple);
57      }
58    </style>
59    <content></content>
60  </template>
61  <script>
62    Polymer({
63      is: 'paper-icon-button-light',
64      extends: 'button',
65
66      behaviors: [
67        Polymer.PaperRippleBehavior
68      ],
69
70      listeners: {
71        'down': '_rippleDown',
72        'up': '_rippleUp',
73        'focus': '_rippleDown',
74        'blur': '_rippleUp',
75      },
76
77      _rippleDown: function() {
78        this.getRipple().uiDownAction();
79      },
80
81      _rippleUp: function() {
82        this.getRipple().uiUpAction();
83      },
84
85      /**
86       * @param {...*} var_args
87       */
88      ensureRipple: function(var_args) {
89        var lastRipple = this._ripple;
90        Polymer.PaperRippleBehavior.ensureRipple.apply(this, arguments);
91        if (this._ripple && this._ripple !== lastRipple) {
92          this._ripple.center = true;
93          this._ripple.classList.add('circle');
94        }
95      }
96    });
97  </script>
98</dom-module>
99