Index: third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
diff --git a/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html b/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
deleted file mode 100644 |
index 18ec682b059bf8d7c5355573ab5a3593284eb08c..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
+++ /dev/null |
@@ -1,121 +0,0 @@ |
-<!-- |
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
-Code distributed by Google as part of the polymer project is also |
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
---><!-- |
-`paper-ripple` provides a visual effect that other paper elements can |
-use to simulate a rippling effect emanating from the point of contact. The |
-effect can be visualized as a concentric circle with motion. |
- |
-Example: |
- |
- <paper-ripple></paper-ripple> |
- |
-`paper-ripple` listens to "down" and "up" events so it would display ripple |
-effect when touches on it. You can also defeat the default behavior and |
-manually route the down and up actions to the ripple element. Note that it is |
-important if you call downAction() you will have to make sure to call upAction() |
-so that `paper-ripple` would end the animation loop. |
- |
-Example: |
- |
- <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
- ... |
- downAction: function(e) { |
- this.$.ripple.downAction({x: e.x, y: e.y}); |
- }, |
- upAction: function(e) { |
- this.$.ripple.upAction(); |
- } |
- |
-Styling ripple effect: |
- |
- Use CSS color property to style the ripple: |
- |
- paper-ripple { |
- color: #4285f4; |
- } |
- |
- Note that CSS color property is inherited so it is not required to set it on |
- the `paper-ripple` element directly. |
- |
-By default, the ripple is centered on the point of contact. Apply `recenteringTouch` |
-class to have the ripple grow toward the center of its container. |
- |
- <paper-ripple class="recenteringTouch"></paper-ripple> |
- |
-Apply `circle` class to make the rippling effect within a circle. |
- |
- <paper-ripple class="circle"></paper-ripple> |
- |
-@group Paper Elements |
-@element paper-ripple |
-@homepage github.io |
---><!-- |
-Fired when the animation finishes. This is useful if you want to wait until the ripple |
-animation finishes to perform some action. |
- |
-@event core-transitionend |
-@param {Object} detail |
-@param {Object} detail.node The animated node |
---><html><head><link rel="import" href="../polymer/polymer.html"> |
- |
-</head><body><polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelocity" assetpath=""> |
-<template> |
- |
- <style> |
- |
- :host { |
- display: block; |
- position: relative; |
- border-radius: inherit; |
- overflow: hidden; |
- } |
- |
- :host-context([noink]) { |
- pointer-events: none; |
- } |
- |
- #bg, #waves, .wave-container, .wave { |
- pointer-events: none; |
- position: absolute; |
- top: 0; |
- left: 0; |
- width: 100%; |
- height: 100%; |
- } |
- |
- #bg, .wave { |
- opacity: 0; |
- } |
- |
- #waves, .wave { |
- overflow: hidden; |
- } |
- |
- .wave-container, .wave { |
- border-radius: 50%; |
- } |
- |
- :host(.circle) #bg, |
- :host(.circle) #waves { |
- border-radius: 50%; |
- } |
- |
- :host(.circle) .wave-container { |
- overflow: hidden; |
- } |
- |
- </style> |
- |
- <div id="bg"></div> |
- <div id="waves"> |
- </div> |
- |
-</template> |
- |
-</polymer-element> |
-<script charset="utf-8" src="paper-ripple-extracted.js"></script></body></html> |