| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2014 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-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 70 @element paper-ripple | 70 @element paper-ripple |
| 71 @hero hero.svg | 71 @hero hero.svg |
| 72 @demo demo/index.html | 72 @demo demo/index.html |
| 73 --> | 73 --> |
| 74 | 74 |
| 75 </head><body><dom-module id="paper-ripple"> | 75 </head><body><dom-module id="paper-ripple"> |
| 76 | 76 |
| 77 <template> | 77 <template> |
| 78 <style> | 78 <style> |
| 79 :host { | 79 :host { |
| 80 border-radius: inherit; |
| 81 bottom: 0; |
| 80 display: block; | 82 display: block; |
| 83 left: 0; |
| 84 overflow: hidden; |
| 85 pointer-events: none; |
| 81 position: absolute; | 86 position: absolute; |
| 82 border-radius: inherit; | 87 right: 0; |
| 83 overflow: hidden; | |
| 84 top: 0; | 88 top: 0; |
| 85 left: 0; | 89 /* For rounded corners: http://jsbin.com/temexa/4. */ |
| 86 right: 0; | |
| 87 bottom: 0; | |
| 88 | |
| 89 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers
, | |
| 90 * creating a node (with a position:absolute) in the middle of an event | |
| 91 * handler "interrupts" that event handler (which happens when the | |
| 92 * ripple is created on demand) */ | |
| 93 pointer-events: none; | |
| 94 } | |
| 95 | |
| 96 :host([animating]) { | |
| 97 /* This resolves a rendering issue in Chrome (as of 40) where the | |
| 98 ripple is not properly clipped by its parent (which may have | |
| 99 rounded corners). See: http://jsbin.com/temexa/4 | |
| 100 | |
| 101 Note: We only apply this style conditionally. Otherwise, the browser | |
| 102 will create a new compositing layer for every ripple element on the | |
| 103 page, and that would be bad. */ | |
| 104 -webkit-transform: translate(0, 0); | |
| 105 transform: translate3d(0, 0, 0); | 90 transform: translate3d(0, 0, 0); |
| 106 } | 91 } |
| 107 | 92 |
| 108 #background, | 93 .ripple { |
| 109 #waves, | 94 background-color: currentcolor; |
| 110 .wave-container, | 95 opacity: .25; |
| 111 .wave { | |
| 112 pointer-events: none; | 96 pointer-events: none; |
| 113 position: absolute; | 97 position: absolute; |
| 114 top: 0; | 98 will-change: height, transform, width; |
| 115 left: 0; | |
| 116 width: 100%; | |
| 117 height: 100%; | |
| 118 } | 99 } |
| 119 | 100 |
| 120 #background, | 101 .ripple, |
| 121 .wave { | 102 :host(.circle) { |
| 122 opacity: 0; | |
| 123 } | |
| 124 | |
| 125 #waves, | |
| 126 .wave { | |
| 127 overflow: hidden; | |
| 128 } | |
| 129 | |
| 130 .wave-container, | |
| 131 .wave { | |
| 132 border-radius: 50%; | 103 border-radius: 50%; |
| 133 } | 104 } |
| 134 | |
| 135 :host(.circle) #background, | |
| 136 :host(.circle) #waves { | |
| 137 border-radius: 50%; | |
| 138 } | |
| 139 | |
| 140 :host(.circle) .wave-container { | |
| 141 overflow: hidden; | |
| 142 } | |
| 143 </style> | 105 </style> |
| 144 | |
| 145 <div id="background"></div> | |
| 146 <div id="waves"></div> | |
| 147 </template> | 106 </template> |
| 148 </dom-module> | 107 </dom-module> |
| 149 <script src="paper-ripple-extracted.js"></script></body></html> | 108 <script src="paper-ripple-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2691393005:
MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) (Closed)
