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>
247