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