diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-ripple/README.md')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-ripple/README.md | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-ripple/README.md b/catapult/third_party/polymer/components/paper-ripple/README.md new file mode 100644 index 00000000..6d3fa5a4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-ripple/README.md @@ -0,0 +1,40 @@ +[](https://travis-ci.org/PolymerElements/paper-ripple) + +##<paper-ripple> + +Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction) + +`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. + +<!--- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="paper-ripple.html"> + <style is="custom-style"> + div { + height: 100px; + width: 100%; + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); + } + + paper-ripple { + color: #4285f4; + } + </style> + <next-code-block></next-code-block> + </template> +</custom-element-demo> +``` +--> +```html +<div style="position: relative"> + <paper-ripple></paper-ripple> +</div +``` + + + |