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

Powered by Google App Engine
This is Rietveld 408576698