third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html - Issue 2092213003: [MD settings] update polymer

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

Issue 2092213003: [MD settings] 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

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

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

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

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

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

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

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

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

10	11

11 <!--	12 <!--

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

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

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

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

32	33

33 Example:	34 Example:

34	35

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

36 ...	37 ...

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

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

39 },	40 },

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

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

42 }	43 }

43	44

44 Styling ripple effect:	45 Styling ripple effect:

45	46

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

47	48

48 paper-ripple {	49 paper-ripple {

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

67	68

68 @group Paper Elements	69 @group Paper Elements

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

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

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

72 -->	73 -->

73	74

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

75	76

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

85 <template>	77 <template>

86 <style>	78 <style>

87 :host {	79 :host {

88 display: block;	80 display: block;

89 position: absolute;	81 position: absolute;

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

91 overflow: hidden;	83 overflow: hidden;

92 top: 0;	84 top: 0;

93 left: 0;	85 left: 0;

94 right: 0;	86 right: 0;

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

149 overflow: hidden;	141 overflow: hidden;

150 }	142 }

151 </style>	143 </style>

152	144

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

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

155 </template>	147 </template>

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

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

OLD	NEW