| 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 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| 10 | 10 |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 67 </head><body><dom-module id="paper-ripple"> | 67 </head><body><dom-module id="paper-ripple"> |
| 68 | 68 |
| 69 <!-- | 69 <!-- |
| 70 Fired when the animation finishes. This is useful if you want to wait until th
e ripple | 70 Fired when the animation finishes. This is useful if you want to wait until th
e ripple |
| 71 animation finishes to perform some action. | 71 animation finishes to perform some action. |
| 72 | 72 |
| 73 @event transitionend | 73 @event transitionend |
| 74 @param {Object} detail | 74 @param {Object} detail |
| 75 @param {Object} detail.node The animated node | 75 @param {Object} detail.node The animated node |
| 76 --> | 76 --> |
| 77 | 77 |
| 78 <style> | |
| 79 :host { | |
| 80 display: block; | |
| 81 position: absolute; | |
| 82 border-radius: inherit; | |
| 83 overflow: hidden; | |
| 84 top: 0; | |
| 85 left: 0; | |
| 86 right: 0; | |
| 87 bottom: 0; | |
| 88 } | |
| 89 | |
| 90 :host([animating]) { | |
| 91 /* This resolves a rendering issue in Chrome (as of 40) where the | |
| 92 ripple is not properly clipped by its parent (which may have | |
| 93 rounded corners). See: http://jsbin.com/temexa/4 | |
| 94 | |
| 95 Note: We only apply this style conditionally. Otherwise, the browser | |
| 96 will create a new compositing layer for every ripple element on the | |
| 97 page, and that would be bad. */ | |
| 98 -webkit-transform: translate(0, 0); | |
| 99 transform: translate3d(0, 0, 0); | |
| 100 } | |
| 101 | |
| 102 :host([noink]) { | |
| 103 pointer-events: none; | |
| 104 } | |
| 105 | |
| 106 #background, | |
| 107 #waves, | |
| 108 .wave-container, | |
| 109 .wave { | |
| 110 pointer-events: none; | |
| 111 position: absolute; | |
| 112 top: 0; | |
| 113 left: 0; | |
| 114 width: 100%; | |
| 115 height: 100%; | |
| 116 } | |
| 117 | |
| 118 #background, | |
| 119 .wave { | |
| 120 opacity: 0; | |
| 121 } | |
| 122 | |
| 123 #waves, | |
| 124 .wave { | |
| 125 overflow: hidden; | |
| 126 } | |
| 127 | |
| 128 .wave-container, | |
| 129 .wave { | |
| 130 border-radius: 50%; | |
| 131 } | |
| 132 | |
| 133 :host(.circle) #background, | |
| 134 :host(.circle) #waves { | |
| 135 border-radius: 50%; | |
| 136 } | |
| 137 | |
| 138 :host(.circle) .wave-container { | |
| 139 overflow: hidden; | |
| 140 } | |
| 141 | |
| 142 </style> | |
| 143 <template> | 78 <template> |
| 79 <style> |
| 80 :host { |
| 81 display: block; |
| 82 position: absolute; |
| 83 border-radius: inherit; |
| 84 overflow: hidden; |
| 85 top: 0; |
| 86 left: 0; |
| 87 right: 0; |
| 88 bottom: 0; |
| 89 } |
| 90 |
| 91 :host([animating]) { |
| 92 /* This resolves a rendering issue in Chrome (as of 40) where the |
| 93 ripple is not properly clipped by its parent (which may have |
| 94 rounded corners). See: http://jsbin.com/temexa/4 |
| 95 |
| 96 Note: We only apply this style conditionally. Otherwise, the browser |
| 97 will create a new compositing layer for every ripple element on the |
| 98 page, and that would be bad. */ |
| 99 -webkit-transform: translate(0, 0); |
| 100 transform: translate3d(0, 0, 0); |
| 101 } |
| 102 |
| 103 :host([noink]) { |
| 104 pointer-events: none; |
| 105 } |
| 106 |
| 107 #background, |
| 108 #waves, |
| 109 .wave-container, |
| 110 .wave { |
| 111 pointer-events: none; |
| 112 position: absolute; |
| 113 top: 0; |
| 114 left: 0; |
| 115 width: 100%; |
| 116 height: 100%; |
| 117 } |
| 118 |
| 119 #background, |
| 120 .wave { |
| 121 opacity: 0; |
| 122 } |
| 123 |
| 124 #waves, |
| 125 .wave { |
| 126 overflow: hidden; |
| 127 } |
| 128 |
| 129 .wave-container, |
| 130 .wave { |
| 131 border-radius: 50%; |
| 132 } |
| 133 |
| 134 :host(.circle) #background, |
| 135 :host(.circle) #waves { |
| 136 border-radius: 50%; |
| 137 } |
| 138 |
| 139 :host(.circle) .wave-container { |
| 140 overflow: hidden; |
| 141 } |
| 142 </style> |
| 143 |
| 144 <div id="background"></div> | 144 <div id="background"></div> |
| 145 <div id="waves"></div> | 145 <div id="waves"></div> |
| 146 </template> | 146 </template> |
| 147 </dom-module> | 147 </dom-module> |
| 148 <script src="paper-ripple-extracted.js"></script></body></html> | 148 <script src="paper-ripple-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1336623003:
[MD settings] updating polymer to 1.1.13 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master