| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 11 <link rel="import" href="../iron-icon/iron-icon.html"> | 11 <link rel="import" href="../iron-icon/iron-icon.html"> |
| 12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> | 12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> |
| 13 <link rel="import" href="../paper-material/paper-material.html"> | 13 <link rel="import" href="../paper-material/paper-material-shared-styles.html"> |
| 14 <link rel="import" href="../paper-ripple/paper-ripple.html"> | 14 <link rel="import" href="../paper-ripple/paper-ripple.html"> |
| 15 <link rel="import" href="../paper-styles/color.html"> | 15 <link rel="import" href="../paper-styles/color.html"> |
| 16 <link rel="import" href="../paper-styles/default-theme.html"> | 16 <link rel="import" href="../paper-styles/default-theme.html"> |
| 17 | 17 |
| 18 <!-- | 18 <!-- |
| 19 Material design: [Floating Action Button](https://www.google.com/design/spec/com
ponents/buttons-floating-action-button.html) | 19 Material design: [Floating Action Button](https://www.google.com/design/spec/com
ponents/buttons-floating-action-button.html) |
| 20 | 20 |
| 21 `paper-fab` is a floating action button. It contains an image placed in the cent
er and | 21 `paper-fab` is a floating action button. It contains an image placed in the cent
er and |
| 22 comes in two sizes: regular size and a smaller size by applying the attribute `m
ini`. When | 22 comes in two sizes: regular size and a smaller size by applying the attribute `m
ini`. When |
| 23 the user touches the button, a ripple effect emanates from the center of the but
ton. | 23 the user touches the button, a ripple effect emanates from the center of the but
ton. |
| (...skipping 25 matching lines...) Expand all Loading... |
| 49 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` | 49 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` |
| 50 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}
` | 50 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}
` |
| 51 | 51 |
| 52 @group Paper Elements | 52 @group Paper Elements |
| 53 @demo demo/index.html | 53 @demo demo/index.html |
| 54 | 54 |
| 55 --> | 55 --> |
| 56 | 56 |
| 57 </head><body><dom-module id="paper-fab"> | 57 </head><body><dom-module id="paper-fab"> |
| 58 <template strip-whitespace=""> | 58 <template strip-whitespace=""> |
| 59 <style include="paper-material"> | 59 <style include="paper-material-shared-styles"> |
| 60 :host { | 60 :host { |
| 61 display: inline-block; | 61 display: inline-block; |
| 62 position: relative; | 62 position: relative; |
| 63 outline: none; | 63 outline: none; |
| 64 -moz-user-select: none; | 64 -moz-user-select: none; |
| 65 -ms-user-select: none; | 65 -ms-user-select: none; |
| 66 -webkit-user-select: none; | 66 -webkit-user-select: none; |
| 67 -webkit-tap-highlight-color: rgba(0,0,0,0); | 67 -webkit-tap-highlight-color: rgba(0,0,0,0); |
| 68 user-select: none; | 68 user-select: none; |
| 69 cursor: pointer; | 69 cursor: pointer; |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 105 :host(.keyboard-focus) { | 105 :host(.keyboard-focus) { |
| 106 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900)
; | 106 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900)
; |
| 107 } | 107 } |
| 108 </style> | 108 </style> |
| 109 | 109 |
| 110 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon> | 110 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon> |
| 111 </template> | 111 </template> |
| 112 </dom-module> | 112 </dom-module> |
| 113 | 113 |
| 114 <script src="paper-fab-extracted.js"></script></body></html> | 114 <script src="paper-fab-extracted.js"></script></body></html> |
| OLD | NEW |