4 <title>paper-ripple</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
7 <meta name="mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-capable" content="yes">
10 <script src="../platform/platform.js"></script>
12 <link rel="import" href="../core-icons/core-icons.html">
13 <link rel="import" href="paper-ripple.html">
14 <link rel="import" href="../font-roboto/roboto.html">
15 <link rel="import" href="../core-icon/core-icon.html">
17 <style shim-shadowdom>
20 background-color: #f9f9f9;
21 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
22 -webkit-user-select: none;
23 -moz-user-select: none;
24 -ms-user-select: none;
26 -webkit-tap-highlight-color: rgba(0,0,0,0);
27 -webkit-touch-callout: none;
40 display: inline-block;
47 background-color: #fff;
51 .button > paper-ripple {
61 background-color: #eee;
65 background-color: #4285f4;
70 background-color: #0f9d58;
75 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
76 transition-delay: 0.2s;
77 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
80 .button.raised:active {
81 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
88 display: inline-block;
93 .icon-button > core-icon {
95 transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
96 transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
99 .icon-button:hover > core-icon {
100 -webkit-transform: scale(1.2);
101 transform: scale(1.2);
104 .icon-button > paper-ripple {
109 .icon-button.red > core-icon::shadow path {
113 .icon-button.red > paper-ripple {
117 .icon-button.blue > core-icon::shadow path {
121 .icon-button.blue > paper-ripple {
128 display: inline-block;
134 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
135 transition-delay: 0.2s;
136 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
140 background-color: #d23f31;
144 background-color: #4285f4;
148 background-color: #0f9d58;
152 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
153 transition-delay: 0s;
160 .fab > core-icon::shadow path {
166 display: inline-block;
168 background-color: #fff;
169 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
187 display: inline-block;
191 background-color: #fff;
192 box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
196 box-sizing: border-box;
205 .dialog > .content > .title {
215 background: url(http://lorempixel.com/300/240/nature/);
243 <div class="button raised">
244 <div class="center" fit>SUBMIT</div>
245 <paper-ripple fit></paper-ripple>
248 <div class="button raised grey">
249 <div class="center" fit>CANCEL</div>
250 <paper-ripple fit></paper-ripple>
253 <div class="button raised blue">
254 <div class="center" fit>COMPOSE</div>
255 <paper-ripple fit></paper-ripple>
258 <div class="button raised green">
259 <div class="center" fit>OK</div>
260 <paper-ripple fit></paper-ripple>
267 <div class="button raised grey narrow">
268 <div class="center" fit>+1</div>
269 <paper-ripple fit></paper-ripple>
272 <div class="button raised grey narrow label-blue">
273 <div class="center" fit>+1</div>
274 <paper-ripple fit></paper-ripple>
277 <div class="button raised grey narrow label-red">
278 <div class="center" fit>+1</div>
279 <paper-ripple fit></paper-ripple>
286 <div class="icon-button">
287 <core-icon icon="menu"></core-icon>
288 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
291 <div class="icon-button">
292 <core-icon icon="more-vert"></core-icon>
293 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
296 <div class="icon-button red">
297 <core-icon icon="delete"></core-icon>
298 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
301 <div class="icon-button blue">
302 <core-icon icon="account-box"></core-icon>
303 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
310 <div class="fab red">
311 <core-icon icon="add"></core-icon>
312 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
315 <div class="fab blue">
316 <core-icon icon="mail"></core-icon>
317 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
320 <div class="fab green">
321 <core-icon icon="create"></core-icon>
322 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
332 <div class="label" fit>Mark as unread</div>
333 <paper-ripple fit></paper-ripple>
336 <div class="label" fit>Mark as important</div>
337 <paper-ripple fit></paper-ripple>
340 <div class="label" fit>Add to Tasks</div>
341 <paper-ripple fit></paper-ripple>
344 <div class="label" fit>Create event</div>
345 <paper-ripple fit></paper-ripple>
350 <div class="menu blue">
353 <div class="label" fit>Import</div>
354 <paper-ripple fit></paper-ripple>
357 <div class="label" fit>Export</div>
358 <paper-ripple fit></paper-ripple>
361 <div class="label" fit>Print</div>
362 <paper-ripple fit></paper-ripple>
365 <div class="label" fit>Restore contacts</div>
366 <paper-ripple fit></paper-ripple>
377 <div class="content">
378 <div class="title">Permission</div><br>
379 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
382 <div class="button label-blue">
383 <div class="center" fit>ACCEPT</div>
384 <paper-ripple fit></paper-ripple>
388 <div class="center" fit>DECLINE</div>
389 <paper-ripple fit></paper-ripple>
396 <paper-ripple class="recenteringTouch" fit></paper-ripple>
400 <div class="card image">
402 <paper-ripple class="recenteringTouch" fit></paper-ripple>