Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(422)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.0.4/bower_components/paper-ripple/demo/index.html

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

Powered by Google App Engine
This is Rietveld 408576698