| Index: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html b/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
|
| index c95e91793f2fc46792c2f8e1e0d15a2da1be9d56..2fcd4d1912ee3a2459da3459e2038bcc7aae9ea0 100644
|
| --- a/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
|
| +++ b/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
|
| @@ -22,7 +22,7 @@ Example:
|
| </div>
|
|
|
| Note, it's important that the parent container of the ripple be relative position, otherwise
|
| -the ripple will emanate outside of the desired container.
|
| +the ripple will emanate outside of the desired container.
|
|
|
| `paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
|
| effect when touches on it. You can also defeat the default behavior and
|
| @@ -81,7 +81,7 @@ Apply `circle` class to make the rippling effect within a circle.
|
| @param {Object} detail
|
| @param {Object} detail.node The animated node
|
| -->
|
| -
|
| +
|
| <template>
|
| <style>
|
| :host {
|
| @@ -93,24 +93,30 @@ Apply `circle` class to make the rippling effect within a circle.
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| +
|
| + /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
|
| + * creating a node (with a position:absolute) in the middle of an event
|
| + * handler "interrupts" that event handler (which happens when the
|
| + * ripple is created on demand) */
|
| + pointer-events: none;
|
| }
|
| -
|
| +
|
| :host([animating]) {
|
| /* This resolves a rendering issue in Chrome (as of 40) where the
|
| ripple is not properly clipped by its parent (which may have
|
| rounded corners). See: http://jsbin.com/temexa/4
|
| -
|
| +
|
| Note: We only apply this style conditionally. Otherwise, the browser
|
| will create a new compositing layer for every ripple element on the
|
| page, and that would be bad. */
|
| -webkit-transform: translate(0, 0);
|
| transform: translate3d(0, 0, 0);
|
| }
|
| -
|
| +
|
| :host([noink]) {
|
| pointer-events: none;
|
| }
|
| -
|
| +
|
| #background,
|
| #waves,
|
| .wave-container,
|
| @@ -122,32 +128,32 @@ Apply `circle` class to make the rippling effect within a circle.
|
| width: 100%;
|
| height: 100%;
|
| }
|
| -
|
| +
|
| #background,
|
| .wave {
|
| opacity: 0;
|
| }
|
| -
|
| +
|
| #waves,
|
| .wave {
|
| overflow: hidden;
|
| }
|
| -
|
| +
|
| .wave-container,
|
| .wave {
|
| border-radius: 50%;
|
| }
|
| -
|
| +
|
| :host(.circle) #background,
|
| :host(.circle) #waves {
|
| border-radius: 50%;
|
| }
|
| -
|
| +
|
| :host(.circle) .wave-container {
|
| overflow: hidden;
|
| }
|
| </style>
|
| -
|
| +
|
| <div id="background"></div>
|
| <div id="waves"></div>
|
| </template>
|
|
|