Home | History | Annotate | Download | only in paper-icon-button 
      1 <!--
      2 @license
      3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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