| OLD | NEW | 
|    1 <!-- |    1 <!-- | 
|    2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |    2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 
|    3 This code may only be used under the BSD style license found at http://polymer.g
     ithub.io/LICENSE.txt |    3 This code may only be used under the BSD style license found at http://polymer.g
     ithub.io/LICENSE.txt | 
|    4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |    4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 
|    5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
     BUTORS.txt |    5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
     BUTORS.txt | 
|    6 Code distributed by Google as part of the polymer project is also |    6 Code distributed by Google as part of the polymer project is also | 
|    7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     TS.txt |    7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     TS.txt | 
|    8 --> |    8 --> | 
|    9  |    9  | 
|   10 <!-- |   10 <!-- | 
|   11 @group Paper Elements |   11 @group Paper Elements | 
|   12  |   12  | 
|   13 Material Design: <a href="https://spec.googleplex.com/quantum/components/buttons
     .html">Button</a> |   13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h
     tml">Button</a> | 
|   14  |   14  | 
|   15 `paper-fab` is a floating action button. It contains an image placed in the cent
     er and |   15 `paper-fab` is a floating action button. It contains an image placed in the cent
     er and | 
|   16 comes in two sizes: regular size and a smaller size by applying the class `mini`
     . When |   16 comes in two sizes: regular size and a smaller size by applying the attribute `m
     ini`. When | 
|   17 the user touches the button, a ripple effect emanates from the center of the but
     ton. |   17 the user touches the button, a ripple effect emanates from the center of the but
     ton. | 
|   18  |   18  | 
|   19 You may import `core-icons` to use with this element, or provide an URL to a cus
     tom icon. |   19 You may import `core-icons` to use with this element, or provide an URL to a cus
     tom icon. | 
|   20 See `core-iconset` for more information about how to use a custom icon set. |   20 See `core-iconset` for more information about how to use a custom icon set. | 
|   21  |   21  | 
|   22 Example: |   22 Example: | 
|   23  |   23  | 
|   24     <link href="path/to/core-icons/core-icons.html" rel="import"> |   24     <link href="path/to/core-icons/core-icons.html" rel="import"> | 
|   25  |   25  | 
|   26     <paper-fab icon="add"></paper-fab> |   26     <paper-fab icon="add"></paper-fab> | 
| (...skipping 27 matching lines...) Expand all  Loading... | 
|   54 you should ensure that the `aria-label` attribute is set. |   54 you should ensure that the `aria-label` attribute is set. | 
|   55  |   55  | 
|   56     <paper-fab src="star.png" aria-label="star"></paper-fab> |   56     <paper-fab src="star.png" aria-label="star"></paper-fab> | 
|   57  |   57  | 
|   58 @element paper-fab |   58 @element paper-fab | 
|   59 @extends paper-button-base |   59 @extends paper-button-base | 
|   60 @status unstable |   60 @status unstable | 
|   61 --> |   61 --> | 
|   62  |   62  | 
|   63 <link href="../polymer/polymer.html" rel="import"> |   63 <link href="../polymer/polymer.html" rel="import"> | 
 |   64 <link href="../core-icon/core-icon.html" rel="import"> | 
|   64 <link href="../paper-button/paper-button-base.html" rel="import"> |   65 <link href="../paper-button/paper-button-base.html" rel="import"> | 
|   65 <link href="../paper-ripple/paper-ripple.html" rel="import"> |   66 <link href="../paper-ripple/paper-ripple.html" rel="import"> | 
|   66 <link href="../paper-shadow/paper-shadow.html" rel="import"> |   67 <link href="../paper-shadow/paper-shadow.html" rel="import"> | 
|   67  |   68  | 
|   68 <polymer-element name="paper-fab" extends="paper-button-base" attributes="src ic
     on mini" role="button"> |   69 <polymer-element name="paper-fab" extends="paper-button-base" attributes="src ic
     on mini" role="button"> | 
|   69  |   70  | 
|   70   <template> |   71   <template> | 
|   71  |   72  | 
|   72     <style> |   73     <style> | 
|   73       :host { |   74       :host { | 
| (...skipping 23 matching lines...) Expand all  Loading... | 
|   97       :host([disabled]) { |   98       :host([disabled]) { | 
|   98         color: #c9c9c9; |   99         color: #c9c9c9; | 
|   99         pointer-events: none; |  100         pointer-events: none; | 
|  100         cursor: auto; |  101         cursor: auto; | 
|  101       } |  102       } | 
|  102  |  103  | 
|  103       #ripple { |  104       #ripple { | 
|  104         pointer-events: none; |  105         pointer-events: none; | 
|  105         z-index: -1; |  106         z-index: -1; | 
|  106       } |  107       } | 
 |  108  | 
 |  109       #shadow { | 
 |  110         border-radius: inherit; | 
 |  111         pointer-events: none; | 
 |  112       } | 
 |  113  | 
 |  114       #icon { | 
 |  115         display: block; | 
 |  116         pointer-events: none; | 
 |  117       } | 
|  107     </style> |  118     </style> | 
|  108  |  119  | 
|  109     <template if="{{raised}}"> |  120     <template if="{{raised}}"> | 
|  110       <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow> |  121       <paper-shadow id="shadow" fit animated></paper-shadow> | 
|  111     </template> |  122     </template> | 
|  112  |  123  | 
|  113     <!-- to position to ripple behind the icon --> |  124     <!-- to position to ripple behind the icon --> | 
|  114     <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon> |  125     <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon> | 
|  115  |  126  | 
|  116   </template> |  127   </template> | 
|  117  |  128  | 
|  118   <script> |  129   <script> | 
|  119     Polymer({ |  130     Polymer({ | 
|  120  |  131  | 
| (...skipping 23 matching lines...) Expand all  Loading... | 
|  144         /** |  155         /** | 
|  145          * Set this to true to style this is a "mini" FAB. |  156          * Set this to true to style this is a "mini" FAB. | 
|  146          * |  157          * | 
|  147          * @attribute mini |  158          * @attribute mini | 
|  148          * @type boolean |  159          * @type boolean | 
|  149          * @default false |  160          * @default false | 
|  150          */ |  161          */ | 
|  151         mini: false, |  162         mini: false, | 
|  152  |  163  | 
|  153         raised: true, |  164         raised: true, | 
|  154         recenteringTouch: false, |  165         recenteringTouch: true, | 
|  155         fill: true |  166         fill: false | 
|  156  |  167  | 
|  157       }, |  168       }, | 
|  158  |  169  | 
|  159       iconChanged: function(oldIcon) { |  170       iconChanged: function(oldIcon) { | 
|  160         this.setAttribute('aria-label', this.icon); |  171         var label = this.getAttribute('aria-label'); | 
 |  172         if (!label || label === oldIcon) { | 
 |  173           this.setAttribute('aria-label', this.icon); | 
 |  174         } | 
|  161       } |  175       } | 
|  162  |  176  | 
|  163     }); |  177     }); | 
|  164  |  178  | 
|  165   </script> |  179   </script> | 
|  166 </polymer-element> |  180 </polymer-element> | 
| OLD | NEW |