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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: bower_components/core-animated-pages/demos/quiz1.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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 | « bower_components/core-animated-pages/demos/news.html ('k') | bower_components/core-animated-pages/demos/quiz1-intro.png » ('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 <!--
2 @license
3 Copyright (c) 2014 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
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
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
9 -->
10 <!doctype html>
11 <html>
12 <head>
13 <title>core-animated-pages</title>
14
15 <script src="../../platform/platform.js"></script>
16 <link href="../../core-icons/av-icons.html" rel="import">
17 <link href="../../paper-fab/paper-fab.html" rel="import">
18
19 <link href="../core-animated-pages.html" rel="import">
20 <link href="../transitions/slide-up.html" rel="import">
21 <link href="../transitions/list-cascade.html" rel="import">
22
23 <style>
24 body {
25 font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
26 margin: 0;
27 background: #f1f1f1;
28 }
29
30 quiz-demo {
31 display: block;
32 position: absolute;
33 top: 0;
34 left: 0;
35 bottom: 0;
36 right: 0;
37 }
38 </style>
39 </head>
40 <body>
41
42 <polymer-element name="quiz-demo">
43 <template>
44
45 <style>
46 core-animated-pages {
47 height: 100%;
48 }
49
50 section {
51 overflow: hidden;
52 }
53
54 .fab {
55 position: absolute;
56 fill: #fff;
57 }
58
59 .fab-0 {
60 bottom: 50px;
61 right: 24px;
62 }
63
64 .fab-1 {
65 top: 210px;
66 right: 24px;
67 }
68
69 paper-fab {
70 background-color: #ff4081;
71 }
72
73 .top {
74 background-color: #ffff8d;
75 }
76
77 .top-image {
78 background: url(quiz1-intro.png);
79 height: 287px;
80 width: 202px;
81 }
82
83 .bottom {
84 box-sizing: border-box;
85 position: relative;
86 height: 80px;
87 background-color: #ffeb3b;
88 padding: 24px;
89 color: #fff;
90 font-size: 32px;
91 }
92
93 .tall-toolbar {
94 box-sizing: border-box;
95 height: 240px;
96 position: relative;
97 color: #fff;
98 padding: 48px;
99 font-size: 48px;
100 }
101
102 .tall-toolbar.categories {
103 background-color: #00bbd3;
104 margin-bottom: 2px;
105 }
106
107 .tall-toolbar.questions {
108 background-color: #ffeb3b;
109 }
110
111 .middle {
112 background-color: #fafafa;
113 color: #3f3f3f;
114 padding: 24px 48px;
115 font-size: 24px;
116 line-height: 1.5;
117 }
118
119 .footer {
120 height: 80px;
121 }
122
123 .avatar {
124 height: 80px;
125 width: 80px;
126 background-color: #ff80ab;
127 }
128
129 .footer-right, .score {
130 border-top: 1px solid #ccc;
131 background-color: #fff;
132 padding: 30px;
133 }
134
135 .tile {
136 box-sizing: border-box;
137 float: left;
138 height: 200px;
139 width: 49%;
140 margin: 3px;
141 }
142
143 .tile-bottom {
144 padding: 8px;
145 color: #fff;
146 }
147 </style>
148
149 <core-animated-pages selected="{{page}}" transitions="hero-transition slide- up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{ complete}}">
150
151 <section layout vertical>
152
153 <div class="tall-toolbar categories" slide-down>
154 <span>Your name here</span>
155 </div>
156
157 <div class="tiles-container">
158 <div class="tile" style="background-color:#ccc;" layout vertical>
159 <div class="tile-top" flex></div>
160 <div class="tile-bottom" style="background-color:#aaa;">
161 Leaderboard
162 </div>
163 </div>
164 <div class="tile" hero-id="category-image" hero style="background-colo r:#ffff8d;" layout vertical on-tap="{{transition}}">
165 <div class="tile-top" flex></div>
166 <div class="tile-bottom" hero-id="footer" hero style="background-col or:#ffeb3b;">
167 General Knowledge
168 </div>
169 </div>
170 <div class="tile" style="background-color:#b9f6ca;" layout vertical>
171 <div class="tile-top" flex></div>
172 <div class="tile-bottom" style="background-color:#0f9d58;">
173 Category 2
174 </div>
175 </div>
176 <div class="tile" style="background-color:#ff8a80;" layout vertical>
177 <div class="tile-top" flex></div>
178 <div class="tile-bottom" style="background-color:#db4437;">
179 Category 3
180 </div>
181 </div>
182 <div class="tile" style="background-color:#82b1ff;" layout vertical>
183 <div class="tile-top" flex></div>
184 <div class="tile-bottom" style="background-color:#4285f4;">
185 Category 4
186 </div>
187 </div>
188 <div class="tile" style="background-color:#b388ff;" layout vertical>
189 <div class="tile-top" flex></div>
190 <div class="tile-bottom" style="background-color:#7e57c2;">
191 Category 5
192 </div>
193 </div>
194 </div>
195
196 </section>
197
198 <section layout vertical>
199
200 <div class="top" hero-id="category-image" hero flex layout horizontal ce nter center-justified>
201 <div class="top-image" cross-fade></div>
202 </div>
203 <div class="bottom" hero-id="footer" hero cross-fade>
204 <span cross-fade>General Knowledge</span>
205 </div>
206 <div class="fab fab-0" hero-id="fab" hero>
207 <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-f ab>
208 </div>
209 </section>
210
211 <section layout vertical>
212
213 <div class="tall-toolbar questions" hero-id="footer" hero>
214 <span cross-fade>Question here</span>
215 </div>
216 <div class="fab fab-1" hero-id="fab" hero>
217 <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-f ab>
218 </div>
219
220 <div flex class="middle" slide-up list-cascade>
221 <p>Option 1</p>
222 <p>Option 2</p>
223 <p>Option 3</p>
224 <p>Option 4</p>
225 <p>Option 5</p>
226 </div>
227
228 <div class="footer" layout horizontal slide-up>
229 <div class="avatar"></div>
230 <div class="footer-right" flex>
231 some text here
232 </div>
233 <div class="score">
234 32 pts
235 </div>
236 </div>
237
238 </section>
239
240 </core-animated-pages>
241
242 </template>
243 <script>
244
245 Polymer('quiz-demo', {
246
247 page: 0,
248
249 transition: function(e) {
250 if (this.page === 2) {
251 this.page = 0;
252 } else {
253 this.page += 1;
254 }
255 }
256 });
257
258 </script>
259 </polymer-element>
260
261 <quiz-demo></quiz-demo>
262 </body>
263 </html>
OLDNEW
« no previous file with comments | « bower_components/core-animated-pages/demos/news.html ('k') | bower_components/core-animated-pages/demos/quiz1-intro.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698