• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2    @license
3    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.github.io/LICENSE.txt
5    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/CONTRIBUTORS.txt
7    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/PATENTS.txt
9-->
10<!doctype html>
11<html>
12<head>
13  <title>paper-ripple</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.js"></script>
20
21  <link rel="import" href="../core-icons/core-icons.html">
22  <link rel="import" href="paper-ripple.html">
23  <link rel="import" href="../font-roboto/roboto.html">
24  <link rel="import" href="../core-icon/core-icon.html">
25
26  <style shim-shadowdom>
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 > core-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 > core-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 > core-icon::shadow path {
115      fill: #db4437;
116    }
117
118    .icon-button.red > paper-ripple {
119      color: #db4437;
120    }
121
122    .icon-button.blue > core-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 > core-icon {
162      margin: 16px;
163    }
164
165    .fab > core-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 unresolved>
245
246  <section>
247
248    <div class="button raised">
249      <div class="center" fit>SUBMIT</div>
250      <paper-ripple fit></paper-ripple>
251    </div>
252
253    <div class="button raised grey">
254      <div class="center" fit>CANCEL</div>
255      <paper-ripple fit></paper-ripple>
256    </div>
257
258    <div class="button raised blue">
259      <div class="center" fit>COMPOSE</div>
260      <paper-ripple fit></paper-ripple>
261    </div>
262
263    <div class="button raised green">
264      <div class="center" fit>OK</div>
265      <paper-ripple fit></paper-ripple>
266    </div>
267
268  </section>
269
270  <section>
271
272    <div class="button raised grey narrow">
273      <div class="center" fit>+1</div>
274      <paper-ripple fit></paper-ripple>
275    </div>
276
277    <div class="button raised grey narrow label-blue">
278      <div class="center" fit>+1</div>
279      <paper-ripple fit></paper-ripple>
280    </div>
281
282    <div class="button raised grey narrow label-red">
283      <div class="center" fit>+1</div>
284      <paper-ripple fit></paper-ripple>
285    </div>
286
287  </section>
288
289  <section>
290
291    <div class="icon-button">
292      <core-icon icon="menu"></core-icon>
293      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
294    </div>
295
296    <div class="icon-button">
297      <core-icon icon="more-vert"></core-icon>
298      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
299    </div>
300
301    <div class="icon-button red">
302      <core-icon icon="delete"></core-icon>
303      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
304    </div>
305
306    <div class="icon-button blue">
307      <core-icon icon="account-box"></core-icon>
308      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
309    </div>
310
311  </section>
312
313  <section>
314
315    <div class="fab red">
316      <core-icon icon="add"></core-icon>
317      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
318    </div>
319
320    <div class="fab blue">
321      <core-icon icon="mail"></core-icon>
322      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
323    </div>
324
325    <div class="fab green">
326      <core-icon icon="create"></core-icon>
327      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
328    </div>
329
330  </section>
331
332  <section>
333
334    <div class="menu">
335
336      <div class="item">
337        <div class="label" fit>Mark as unread</div>
338        <paper-ripple fit></paper-ripple>
339      </div>
340      <div class="item">
341        <div class="label" fit>Mark as important</div>
342        <paper-ripple fit></paper-ripple>
343      </div>
344      <div class="item">
345        <div class="label" fit>Add to Tasks</div>
346        <paper-ripple fit></paper-ripple>
347      </div>
348      <div class="item">
349        <div class="label" fit>Create event</div>
350        <paper-ripple fit></paper-ripple>
351      </div>
352
353    </div>
354
355    <div class="menu blue">
356
357      <div class="item">
358        <div class="label" fit>Import</div>
359        <paper-ripple fit></paper-ripple>
360      </div>
361      <div class="item">
362        <div class="label" fit>Export</div>
363        <paper-ripple fit></paper-ripple>
364      </div>
365      <div class="item">
366        <div class="label" fit>Print</div>
367        <paper-ripple fit></paper-ripple>
368      </div>
369      <div class="item">
370        <div class="label" fit>Restore contacts</div>
371        <paper-ripple fit></paper-ripple>
372      </div>
373
374    </div>
375
376  </section>
377
378  <section>
379
380    <div class="dialog">
381
382      <div class="content">
383        <div class="title">Permission</div><br>
384        <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>
385      </div>
386
387      <div class="button label-blue">
388        <div class="center" fit>ACCEPT</div>
389        <paper-ripple fit></paper-ripple>
390      </div>
391
392      <div class="button">
393        <div class="center" fit>DECLINE</div>
394        <paper-ripple fit></paper-ripple>
395      </div>
396
397    </div>
398
399    <div class="card">
400
401      <paper-ripple class="recenteringTouch" fit></paper-ripple>
402
403    </div>
404
405    <div class="card image">
406
407      <paper-ripple class="recenteringTouch" fit></paper-ripple>
408
409    </div>
410
411  </section>
412
413</body>
414</html>
415