third_party/polymer/components/core-animated-pages/demos/news.html

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