Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(122)

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

Issue 1410143002: Update Polymer to fix closure compile (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@iron-list5
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698