← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-ripple/demo/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-ripple/demo/index.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 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 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>