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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components/paper-ripple/demo.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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 | « third_party/polymer/components/paper-ripple/bower.json ('k') | third_party/polymer/components/paper-ripple/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
2 <html>
3 <head>
4 <title>paper-ripple</title>
5
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">
9
10 <script src="../platform/platform.js"></script>
11
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">
16
17 <style shim-shadowdom>
18
19 body {
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;
25 user-select: none;
26 -webkit-tap-highlight-color: rgba(0,0,0,0);
27 -webkit-touch-callout: none;
28 }
29
30 section {
31 padding: 30px 25px;
32 }
33
34 section > * {
35 margin: 10px
36 }
37
38 /* Button */
39 .button {
40 display: inline-block;
41 position: relative;
42 width: 120px;
43 height: 32px;
44 line-height: 32px;
45 border-radius: 2px;
46 font-size: 0.9em;
47 background-color: #fff;
48 color: #646464;
49 }
50
51 .button > paper-ripple {
52 border-radius: 2px;
53 overflow: hidden;
54 }
55
56 .button.narrow {
57 width: 60px;
58 }
59
60 .button.grey {
61 background-color: #eee;
62 }
63
64 .button.blue {
65 background-color: #4285f4;
66 color: #fff;
67 }
68
69 .button.green {
70 background-color: #0f9d58;
71 color: #fff;
72 }
73
74 .button.raised {
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);
78 }
79
80 .button.raised:active {
81 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
82 transition-delay: 0s;
83 }
84
85 /* Icon Button */
86 .icon-button {
87 position: relative;
88 display: inline-block;
89 width: 56px;
90 height: 56px;
91 }
92
93 .icon-button > core-icon {
94 margin: 16px;
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);
97 }
98
99 .icon-button:hover > core-icon {
100 -webkit-transform: scale(1.2);
101 transform: scale(1.2);
102 }
103
104 .icon-button > paper-ripple {
105 overflow: hidden;
106 color: #646464;
107 }
108
109 .icon-button.red > core-icon::shadow path {
110 fill: #db4437;
111 }
112
113 .icon-button.red > paper-ripple {
114 color: #db4437;
115 }
116
117 .icon-button.blue > core-icon::shadow path {
118 fill: #4285f4;
119 }
120
121 .icon-button.blue > paper-ripple {
122 color: #4285f4;
123 }
124
125 /* FAB */
126 .fab {
127 position: relative;
128 display: inline-block;
129 width: 56px;
130 height: 56px;
131 border-radius: 50%;
132 color: #fff;
133 overflow: hidden;
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);
137 }
138
139 .fab.red {
140 background-color: #d23f31;
141 }
142
143 .fab.blue {
144 background-color: #4285f4;
145 }
146
147 .fab.green {
148 background-color: #0f9d58;
149 }
150
151 .fab:active {
152 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
153 transition-delay: 0s;
154 }
155
156 .fab > core-icon {
157 margin: 16px;
158 }
159
160 .fab > core-icon::shadow path {
161 fill: #fff;
162 }
163
164 /* Menu */
165 .menu {
166 display: inline-block;
167 width: 180px;
168 background-color: #fff;
169 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
170 }
171
172 .item {
173 position: relative;
174 height: 48px;
175 line-height: 48px;
176 color: #646464;
177 font-size: 0.9em;
178 }
179
180 .menu.blue > .item {
181 color: #4285f4;
182 }
183
184 /* Card, Dialog */
185 .card, .dialog {
186 position: relative;
187 display: inline-block;
188 width: 300px;
189 height: 240px;
190 vertical-align: top;
191 background-color: #fff;
192 box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
193 }
194
195 .dialog {
196 box-sizing: border-box;
197 padding: 16px;
198 }
199
200 .dialog > .content {
201 height: 170px;
202 font-size: 0.9em;
203 }
204
205 .dialog > .content > .title {
206 font-size: 1.3em;
207 }
208
209 .dialog > .button {
210 width: 90px;
211 float: right;
212 }
213
214 .card.image {
215 background: url(http://lorempixel.com/300/240/nature/);
216 color: #fff;
217 }
218
219 /* Misc */
220 .center {
221 text-align: center;
222 }
223
224 .label {
225 padding: 0 16px;
226 }
227
228 .label-blue {
229 color: #4285f4;
230 }
231
232 .label-red {
233 color: #d23f31;
234 }
235
236 </style>
237
238 </head>
239 <body unresolved>
240
241 <section>
242
243 <div class="button raised">
244 <div class="center" fit>SUBMIT</div>
245 <paper-ripple fit></paper-ripple>
246 </div>
247
248 <div class="button raised grey">
249 <div class="center" fit>CANCEL</div>
250 <paper-ripple fit></paper-ripple>
251 </div>
252
253 <div class="button raised blue">
254 <div class="center" fit>COMPOSE</div>
255 <paper-ripple fit></paper-ripple>
256 </div>
257
258 <div class="button raised green">
259 <div class="center" fit>OK</div>
260 <paper-ripple fit></paper-ripple>
261 </div>
262
263 </section>
264
265 <section>
266
267 <div class="button raised grey narrow">
268 <div class="center" fit>+1</div>
269 <paper-ripple fit></paper-ripple>
270 </div>
271
272 <div class="button raised grey narrow label-blue">
273 <div class="center" fit>+1</div>
274 <paper-ripple fit></paper-ripple>
275 </div>
276
277 <div class="button raised grey narrow label-red">
278 <div class="center" fit>+1</div>
279 <paper-ripple fit></paper-ripple>
280 </div>
281
282 </section>
283
284 <section>
285
286 <div class="icon-button">
287 <core-icon icon="menu"></core-icon>
288 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
289 </div>
290
291 <div class="icon-button">
292 <core-icon icon="more-vert"></core-icon>
293 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
294 </div>
295
296 <div class="icon-button red">
297 <core-icon icon="delete"></core-icon>
298 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
299 </div>
300
301 <div class="icon-button blue">
302 <core-icon icon="account-box"></core-icon>
303 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
304 </div>
305
306 </section>
307
308 <section>
309
310 <div class="fab red">
311 <core-icon icon="add"></core-icon>
312 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
313 </div>
314
315 <div class="fab blue">
316 <core-icon icon="mail"></core-icon>
317 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
318 </div>
319
320 <div class="fab green">
321 <core-icon icon="create"></core-icon>
322 <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
323 </div>
324
325 </section>
326
327 <section>
328
329 <div class="menu">
330
331 <div class="item">
332 <div class="label" fit>Mark as unread</div>
333 <paper-ripple fit></paper-ripple>
334 </div>
335 <div class="item">
336 <div class="label" fit>Mark as important</div>
337 <paper-ripple fit></paper-ripple>
338 </div>
339 <div class="item">
340 <div class="label" fit>Add to Tasks</div>
341 <paper-ripple fit></paper-ripple>
342 </div>
343 <div class="item">
344 <div class="label" fit>Create event</div>
345 <paper-ripple fit></paper-ripple>
346 </div>
347
348 </div>
349
350 <div class="menu blue">
351
352 <div class="item">
353 <div class="label" fit>Import</div>
354 <paper-ripple fit></paper-ripple>
355 </div>
356 <div class="item">
357 <div class="label" fit>Export</div>
358 <paper-ripple fit></paper-ripple>
359 </div>
360 <div class="item">
361 <div class="label" fit>Print</div>
362 <paper-ripple fit></paper-ripple>
363 </div>
364 <div class="item">
365 <div class="label" fit>Restore contacts</div>
366 <paper-ripple fit></paper-ripple>
367 </div>
368
369 </div>
370
371 </section>
372
373 <section>
374
375 <div class="dialog">
376
377 <div class="content">
378 <div class="title">Permission</div><br>
379 <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>
380 </div>
381
382 <div class="button label-blue">
383 <div class="center" fit>ACCEPT</div>
384 <paper-ripple fit></paper-ripple>
385 </div>
386
387 <div class="button">
388 <div class="center" fit>DECLINE</div>
389 <paper-ripple fit></paper-ripple>
390 </div>
391
392 </div>
393
394 <div class="card">
395
396 <paper-ripple class="recenteringTouch" fit></paper-ripple>
397
398 </div>
399
400 <div class="card image">
401
402 <paper-ripple class="recenteringTouch" fit></paper-ripple>
403
404 </div>
405
406 </section>
407
408 </body>
409 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components/paper-ripple/bower.json ('k') | third_party/polymer/components/paper-ripple/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698