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