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> |