• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<!doctype html>
11<html>
12<head>
13  <title>paper-ripple demo</title>
14
15  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
16  <meta name="mobile-web-app-capable" content="yes">
17  <meta name="apple-mobile-web-app-capable" content="yes">
18
19  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20
21  <link rel="import" href="../../iron-icons/iron-icons.html">
22  <link rel="import" href="../paper-ripple.html">
23  <link rel="import" href="../../paper-styles/typography.html">
24  <link rel="import" href="../../iron-icon/iron-icon.html">
25
26  <style>
27
28    body {
29      background-color: #f9f9f9;
30      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
31      -webkit-tap-highlight-color: rgba(0,0,0,0);
32      -webkit-touch-callout: none;
33    }
34
35    section {
36      padding: 30px 25px;
37    }
38
39    section > * {
40      margin: 10px
41    }
42
43    /* Button */
44    .button {
45      display: inline-block;
46      position: relative;
47      width: 120px;
48      height: 32px;
49      line-height: 32px;
50      border-radius: 2px;
51      font-size: 0.9em;
52      background-color: #fff;
53      color: #646464;
54    }
55
56    .button > paper-ripple {
57      border-radius: 2px;
58      overflow: hidden;
59    }
60
61    .button.narrow {
62      width: 60px;
63    }
64
65    .button.grey {
66      background-color: #eee;
67    }
68
69    .button.blue {
70      background-color: #4285f4;
71      color: #fff;
72    }
73
74    .button.green {
75      background-color: #0f9d58;
76      color: #fff;
77    }
78
79    .button.raised {
80      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
81      transition-delay: 0.2s;
82      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
83    }
84
85    .button.raised:active {
86      box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
87      transition-delay: 0s;
88    }
89
90    /* Icon Button */
91    .icon-button {
92      position: relative;
93      display: inline-block;
94      width: 56px;
95      height: 56px;
96    }
97
98    .icon-button > iron-icon {
99      margin: 16px;
100      transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
101      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
102    }
103
104    .icon-button:hover > iron-icon {
105      -webkit-transform: scale(1.2);
106      transform: scale(1.2);
107    }
108
109    .icon-button > paper-ripple {
110      overflow: hidden;
111      color: #646464;
112    }
113
114    .icon-button.red > iron-icon::shadow path {
115      fill: #db4437;
116    }
117
118    .icon-button.red > paper-ripple {
119      color: #db4437;
120    }
121
122    .icon-button.blue > iron-icon::shadow path {
123      fill: #4285f4;
124    }
125
126    .icon-button.blue > paper-ripple {
127      color: #4285f4;
128    }
129
130    /* FAB */
131    .fab {
132      position: relative;
133      display: inline-block;
134      width: 56px;
135      height: 56px;
136      border-radius: 50%;
137      color: #fff;
138      overflow: hidden;
139      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
140      transition-delay: 0.2s;
141      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
142    }
143
144    .fab.red {
145      background-color: #d23f31;
146    }
147
148    .fab.blue {
149      background-color: #4285f4;
150    }
151
152    .fab.green {
153      background-color: #0f9d58;
154    }
155
156    .fab:active {
157      box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
158      transition-delay: 0s;
159    }
160
161    .fab > iron-icon {
162      margin: 16px;
163    }
164
165    .fab > iron-icon::shadow path {
166      fill: #fff;
167    }
168
169    /* Menu */
170    .menu {
171      display: inline-block;
172      width: 180px;
173      background-color: #fff;
174      box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
175    }
176
177    .item {
178      position: relative;
179      height: 48px;
180      line-height: 48px;
181      color: #646464;
182      font-size: 0.9em;
183    }
184
185    .menu.blue > .item {
186      color: #4285f4;
187    }
188
189    /* Card, Dialog */
190    .card, .dialog {
191      position: relative;
192      display: inline-block;
193      width: 300px;
194      height: 240px;
195      vertical-align: top;
196      background-color: #fff;
197      box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
198    }
199
200    .dialog {
201      box-sizing: border-box;
202      padding: 16px;
203    }
204
205    .dialog > .content {
206      height: 170px;
207      font-size: 0.9em;
208    }
209
210    .dialog > .content > .title {
211      font-size: 1.3em;
212    }
213
214    .dialog > .button {
215      width: 90px;
216      float: right;
217    }
218
219    .card.image {
220      background: url(http://lorempixel.com/300/240/nature/);
221      color: #fff;
222    }
223
224    /* Misc */
225    .center {
226      text-align: center;
227    }
228
229    .label {
230      padding: 0 16px;
231    }
232
233    .label-blue {
234      color: #4285f4;
235    }
236
237    .label-red {
238      color: #d23f31;
239    }
240
241  </style>
242
243</head>
244<body>
245
246  <section>
247
248    <div class="button raised">
249      <div class="center" fit tabindex="1">SUBMIT</div>
250      <paper-ripple></paper-ripple>
251    </div>
252
253    <div class="button raised" noink>
254      <div class="center" fit tabindex="1">NO INK</div>
255      <paper-ripple noink></paper-ripple>
256    </div>
257
258    <div class="button raised grey">
259      <div class="center" fit tabindex="1">CANCEL</div>
260      <paper-ripple></paper-ripple>
261    </div>
262
263    <div class="button raised blue">
264      <div class="center" fit tabindex="1">COMPOSE</div>
265      <paper-ripple></paper-ripple>
266    </div>
267
268    <div class="button raised green">
269      <div class="center" fit tabindex="1">OK</div>
270      <paper-ripple></paper-ripple>
271    </div>
272
273  </section>
274
275  <section>
276
277    <div class="button raised grey narrow">
278      <div class="center" fit tabindex="1">+1</div>
279      <paper-ripple></paper-ripple>
280    </div>
281
282    <div class="button raised grey narrow label-blue">
283      <div class="center" fit tabindex="1">+1</div>
284      <paper-ripple></paper-ripple>
285    </div>
286
287    <div class="button raised grey narrow label-red">
288      <div class="center" fit tabindex="1">+1</div>
289      <paper-ripple></paper-ripple>
290    </div>
291
292  </section>
293
294  <section>
295
296    <div class="icon-button">
297      <iron-icon icon="menu" tabindex="1"></iron-icon>
298      <paper-ripple class="circle" recenters></paper-ripple>
299    </div>
300
301    <div class="icon-button">
302      <iron-icon icon="more-vert" tabindex="1"></iron-icon>
303      <paper-ripple class="circle" recenters></paper-ripple>
304    </div>
305
306    <div class="icon-button red">
307      <iron-icon icon="delete" tabindex="1"></iron-icon>
308      <paper-ripple class="circle" recenters></paper-ripple>
309    </div>
310
311    <div class="icon-button blue">
312      <iron-icon icon="account-box" tabindex="1"></iron-icon>
313      <paper-ripple class="circle" recenters></paper-ripple>
314    </div>
315
316  </section>
317
318  <section>
319
320    <div class="fab red">
321      <iron-icon icon="add" tabindex="1"></iron-icon>
322      <paper-ripple class="circle" recenters></paper-ripple>
323    </div>
324
325    <div class="fab blue">
326      <iron-icon icon="mail" tabindex="1"></iron-icon>
327      <paper-ripple class="circle" recenters></paper-ripple>
328    </div>
329
330    <div class="fab green">
331      <iron-icon icon="create" tabindex="1"></iron-icon>
332      <paper-ripple class="circle" recenters></paper-ripple>
333    </div>
334
335  </section>
336
337  <section>
338
339    <div class="menu">
340
341      <div class="item">
342        <div class="label" fit tabindex="1">Mark as unread</div>
343        <paper-ripple></paper-ripple>
344      </div>
345      <div class="item">
346        <div class="label" fit tabindex="1">Mark as important</div>
347        <paper-ripple></paper-ripple>
348      </div>
349      <div class="item">
350        <div class="label" fit tabindex="1">Add to Tasks</div>
351        <paper-ripple></paper-ripple>
352      </div>
353      <div class="item">
354        <div class="label" fit tabindex="1">Create event</div>
355        <paper-ripple></paper-ripple>
356      </div>
357
358    </div>
359
360    <div class="menu blue">
361
362      <div class="item">
363        <div class="label" fit tabindex="1">Import</div>
364        <paper-ripple></paper-ripple>
365      </div>
366      <div class="item">
367        <div class="label" fit tabindex="1">Export</div>
368        <paper-ripple></paper-ripple>
369      </div>
370      <div class="item">
371        <div class="label" fit tabindex="1">Print</div>
372        <paper-ripple></paper-ripple>
373      </div>
374      <div class="item">
375        <div class="label" fit tabindex="1">Restore contacts</div>
376        <paper-ripple></paper-ripple>
377      </div>
378
379    </div>
380
381  </section>
382
383  <section>
384
385    <div class="dialog">
386
387      <div class="content">
388        <div class="title">Permission</div><br>
389        <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>
390      </div>
391
392      <div class="button label-blue">
393        <div class="center" fit tabindex="1">ACCEPT</div>
394        <paper-ripple></paper-ripple>
395      </div>
396
397      <div class="button">
398        <div class="center" fit tabindex="1">DECLINE</div>
399        <paper-ripple></paper-ripple>
400      </div>
401
402    </div>
403
404    <div class="card" tabindex="1">
405      <paper-ripple recenters></paper-ripple>
406    </div>
407
408    <div class="card image" tabindex="1">
409      <paper-ripple recenters></paper-ripple>
410    </div>
411
412  </section>
413
414</body>
415</html>
416