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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/news.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
« no previous file with comments | « third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.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
5 <script src="../../platform/platform.js"></script>
6
7 <link href="../../core-icons/core-icons.html" rel="import">
8 <link href="../../core-icons/social-icons.html" rel="import">
9 <link href="../../core-toolbar/core-toolbar.html" rel="import">
10
11 <link href="../../paper-shadow/paper-shadow.html" rel="import">
12
13 <link href="../core-animated-pages.html" rel="import">
14
15 <style shim-shadowdom>
16 body {
17 font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
18 margin: 0;
19 }
20
21 .fit {
22 position: absolute;
23 top: 0;
24 right: 0;
25 bottom: 0;
26 left: 0;
27 width: 420px;
28 }
29
30 .toolbar {
31 background: #8d3efc;
32 /* FIXME */
33 color: #fff !important;
34 fill: #fff;
35 }
36
37 .toolbar-2 {
38 position: absolute;
39 top: 0;
40 left: 0;
41 background: #000;
42 color: #fff;
43 text-align: center;
44 font-size: 48px;
45 }
46
47 body /deep/ .toolbar-2 {
48 position: absolute;
49 top: 0;
50 left: 0;
51 margin: 0;
52 width: 420px;
53 background: #000;
54 color: #fff;
55 text-align: center;
56 font-size: 48px;
57 }
58
59 .container {
60 background-color: #e7e7e7;
61 padding: 16px;
62 }
63
64 .card {
65 position: relative;
66 background-color: #fff;
67 border-radius: 2px;
68 }
69
70 .card-top {
71 background: #f2da2f;
72 height: 240px;
73 }
74
75 .card-top-2 {
76 background: #99f8b7;
77 height: 240px;
78 }
79
80 .card-bottom {
81 padding: 24px;
82 }
83
84 .headline {
85 font-size: 24px;
86 overflow: hidden;
87 text-overflow: ellipsis;
88 white-space: nowrap;
89 }
90
91 .icon {
92 position: relative;
93 background: #000;
94 color: #fff;
95 width: 40px;
96 height: 40px;
97 border-radius: 50%;
98 }
99
100 .icon::after {
101 content: 'T';
102 font-size: 24px;
103 position: absolute;
104 top: 7px;
105 left: 13px;
106 }
107
108 .source-container {
109 margin-top: 16px;
110 }
111
112 .two-lines {
113 margin-left: 16px;
114 }
115
116 .source {
117 font-size: 14px;
118 }
119
120 .time {
121 color: rgba(0, 0, 0, 0.54);
122 font-size: 12px;
123 }
124
125 .tiles-container {
126 margin-top: 16px;
127 }
128
129 .tile {
130 position: relative;
131 display: inline-block;
132 width: 85px;
133 height: 85px;
134 background: #fff;
135 border-radius: 2px;
136 }
137
138 </style>
139
140 </head>
141 <body unresolved>
142
143 <polymer-element name="shadow-div" noscript>
144 <template>
145 <style>
146 :host {
147 display: block;
148 }
149 </style>
150 <paper-shadow target="{{}}" z="1"></paper-shadow>
151 <content></content>
152 </template>
153 </polymer-element>
154
155 <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero -transition">
156
157 <section id="first">
158
159 <core-toolbar class="tall toolbar">
160 <core-icon icon="menu"></core-icon>
161 <div flex>Highlights</div>
162 <core-icon icon="social:share"></core-icon>
163 <core-icon icon="bookmark"></core-icon>
164 <core-icon icon="more-vert"></core-icon>
165 </core-toolbar>
166
167 <div class="container" hero-p>
168
169 <shadow-div class="card" hero-p onclick="stuff()">
170 <div class="card-top"></div>
171 <div class="card-bottom" hero-p>
172 <div class="headline">Google's Craziest Offices</div>
173 <div class="source-container" hero-p layout horizontal center>
174 <div class="icon" hero-id="icon-header" hero></div>
175 <div class="two-lines">
176 <div class="source">The New York Times</div>
177 <div class="time">36 minutes ago</div>
178 </div>
179 </div>
180 </div>
181 </shadow-div>
182
183 <div class="tiles-container" layout horizontal justified>
184
185 <shadow-div class="tile"></shadow-div>
186 <shadow-div class="tile"></shadow-div>
187 <shadow-div class="tile"></shadow-div>
188 <shadow-div class="tile"></shadow-div>
189
190 </div>
191
192 </div>
193
194 </section>
195
196 <section id="second">
197
198 <core-toolbar class="tall" hero-p>
199
200 <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
201 <div flex class="middle">T</div>
202 </core-toolbar>
203 </core-toolbar>
204
205 <div class="container">
206
207 <shadow-div class="card" onclick="stuff()">
208 <div class="card-top-2"></div>
209 <div class="card-bottom">
210 <div class="headline">Some long overflowing headline</div>
211 <div class="source-container" layout horizontal center>
212 <div class="icon" style="background:red;"></div>
213 <div class="two-lines">
214 <div class="source">The New York Times</div>
215 <div class="time">36 minutes ago</div>
216 </div>
217 </div>
218 </div>
219 </shadow-div>
220
221 <div class="tiles-container" layout horizontal justified>
222
223 <shadow-div class="tile"></shadow-div>
224 <shadow-div class="tile"></shadow-div>
225 <shadow-div class="tile"></shadow-div>
226 <shadow-div class="tile"></shadow-div>
227
228 </div>
229
230 </div>
231
232 </section>
233
234 </core-animated-pages>
235
236 <script>
237
238 function stuff(e) {
239 var p = document.querySelector('core-animated-pages');
240 p.selected = p.selected ? 0 : 1;
241 }
242
243 </script>
244
245 </body>
246 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698