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

Side by Side Diff: third_party/polymer/components-chromium/paper-fab/demo2.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 Copyright 2013 The Polymer Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style
5 license that can be found in the LICENSE file.
6 -->
7 <html>
8 <head>
9 <title>paper-fab</title>
10 <meta charset="utf-8">
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala ble=no">
13 <script src="../platform/platform.js"></script>
14 <link href="../font-roboto/roboto.html" rel="import">
15 <link href="../core-icons/core-icons.html" rel="import">
16 <link href="../core-icons/image-icons.html" rel="import">
17 <link href="../core-layout/core-layout.html" rel="import">
18 <link href="paper-fab.html" rel="import">
19 <style shim-shadowdom>
20 body {
21 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
22 font-size: 14px;
23 padding: 10em;
24 background: #f7f7f7;
25 transform: translateZ(0);
26 -webkit-transform: translateZ(0);
27 transform: translateZ(0);
28 }
29
30 core-layout {
31 display: inline-block;
32 position: relative;
33 background: #f7f7f7;
34 border-radius: 3px;
35 width: 320px;
36 height: 480px;
37 border-radius: 3px;
38 overflow: hidden;
39 }
40
41 core-layout > .inner {
42 border-radius: 3px;
43 }
44
45 .inner {
46 position: absolute;
47 top: 0;
48 left: 0;
49 bottom: 0;
50 right: 0;
51 z-index: -1;
52 }
53
54 .toolbar {
55 background: #4555a5;
56 position: relative;
57 padding: 1em;
58 }
59
60 .photo {
61 background: #eee;
62 height: 30%;
63 }
64
65 [core-flex] {
66 background: #fff;
67 padding: 0 1em;
68 overflow: auto;
69 }
70
71 paper-fab {
72 position: absolute !important;
73 top: 167px;
74 right: 1em;
75 }
76
77 core-icon::shadow path {
78 fill: #fff;
79 }
80
81 </style>
82 </head>
83 <body unresolved>
84
85 <p>In this demo, the FAB is in the "focused" state on load.</p>
86
87 <core-layout class="card paper-shadow-top-z-1" vertical>
88 <div class="inner paper-shadow-bottom-z-1"></div>
89 <div class="toolbar paper-shadow-top-z-1">
90 <div class="inner paper-shadow-bottom-z-1"></div>
91 <core-icon icon="arrow-back"></core-icon>
92 </div>
93 <div class="photo">
94 </div>
95 <paper-fab focused icon="image:camera-alt"></paper-fab>
96 <div core-flex>
97 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo d tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore e u fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
98 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo d tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore e u fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
99 </div>
100 </core-layout>
101
102 </body>
103 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698