third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html - Issue 2096903002: Revert of [Polymer] update polymer

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

Issue 2096903002: Revert of [Polymer] update polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 5 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 unified diff | Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-ripple/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.	2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also	6 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 --><html><head><link rel="import" href="../polymer/polymer.html">	8 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">	9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">

11	10

12 <!--	11 <!--

(...skipping 16 matching lines...) Expand all Loading...
29 effect when touches on it. You can also defeat the default behavior and	28 effect when touches on it. You can also defeat the default behavior and

30 manually route the down and up actions to the ripple element. Note that it is	29 manually route the down and up actions to the ripple element. Note that it is

31 important if you call `downAction()` you will have to make sure to call	30 important if you call `downAction()` you will have to make sure to call

32 `upAction()` so that `paper-ripple` would end the animation loop.	31 `upAction()` so that `paper-ripple` would end the animation loop.

33	32

34 Example:	33 Example:

35	34

36 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>	35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>

37 ...	36 ...

38 downAction: function(e) {	37 downAction: function(e) {

39 this.$.ripple.downAction({detail: {x: e.x, y: e.y}});	38 this.$.ripple.downAction({x: e.x, y: e.y});

40 },	39 },

41 upAction: function(e) {	40 upAction: function(e) {

42 this.$.ripple.upAction();	41 this.$.ripple.upAction();

43 }	42 }

44	43

45 Styling ripple effect:	44 Styling ripple effect:

46	45

47 Use CSS color property to style the ripple:	46 Use CSS color property to style the ripple:

48	47

49 paper-ripple {	48 paper-ripple {

(...skipping 17 matching lines...) Expand all Loading...
67 <paper-ripple class="circle"></paper-ripple>	66 <paper-ripple class="circle"></paper-ripple>

68	67

69 @group Paper Elements	68 @group Paper Elements

70 @element paper-ripple	69 @element paper-ripple

71 @hero hero.svg	70 @hero hero.svg

72 @demo demo/index.html	71 @demo demo/index.html

73 -->	72 -->

74	73

75 </head><body><dom-module id="paper-ripple">	74 </head><body><dom-module id="paper-ripple">

76	75

	76 <!--

	77 Fired when the animation finishes. This is useful if you want to wait until th e ripple

	78 animation finishes to perform some action.

	79

	80 @event transitionend

	81 @param {Object} detail

	82 @param {Object} detail.node The animated node

	83 -->

	84

77 <template>	85 <template>

78 <style>	86 <style>

79 :host {	87 :host {

80 display: block;	88 display: block;

81 position: absolute;	89 position: absolute;

82 border-radius: inherit;	90 border-radius: inherit;

83 overflow: hidden;	91 overflow: hidden;

84 top: 0;	92 top: 0;

85 left: 0;	93 left: 0;

86 right: 0;	94 right: 0;

(...skipping 53 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
140 :host(.circle) .wave-container {	148 :host(.circle) .wave-container {

141 overflow: hidden;	149 overflow: hidden;

142 }	150 }

143 </style>	151 </style>

144	152

145 <div id="background"></div>	153 <div id="background"></div>

146 <div id="waves"></div>	154 <div id="waves"></div>

147 </template>	155 </template>

148 </dom-module>	156 </dom-module>

149 <script src="paper-ripple-extracted.js"></script></body></html>	157 <script src="paper-ripple-extracted.js"></script></body></html>

OLD	NEW