Home | History | Annotate | Download | only in demo 
      1 <!doctype html>
      2 
      3 <!--
      4   @license
      5   Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      6   This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      7   The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      8   The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      9   Code distributed by Google as part of the polymer project is also
     10   subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
     11 -->
     12 
     13 <html>
     14   <head>
     15 
     16     <meta charset="utf-8">
     17     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     18 
     19     <title>paper-styles demo</title>
     20 
     21     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     22 
     23     <link rel="import" href="../color.html">
     24     <link rel="import" href="../typography.html">
     25     <link rel="import" href="../default-theme.html">
     26     <link rel="import" href="../demo-pages.html">
     27   </head>
     28 
     29   <style>
     30     .redlines {
     31       background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px);
     32       background-size: 100% 4px;
     33     }
     34 
     35     .paragraph {
     36       margin-bottom: 20px;
     37     }
     38   </style>
     39   <style is="custom-style">
     40     .paper-font-display4 {
     41       @apply(--paper-font-display4);
     42     }
     43 
     44     .paper-font-display3 {
     45       @apply(--paper-font-display3);
     46     }
     47 
     48     .paper-font-display2 {
     49       @apply(--paper-font-display2);
     50     }
     51 
     52     .paper-font-display1 {
     53       @apply(--paper-font-display1);
     54     }
     55 
     56     .paper-font-headline {
     57       @apply(--paper-font-headline);
     58     }
     59 
     60     .paper-font-title {
     61       @apply(--paper-font-title);
     62     }
     63 
     64     .paper-font-subhead {
     65       @apply(--paper-font-subhead);
     66     }
     67 
     68     .paper-font-body2 {
     69       @apply(--paper-font-body2);
     70     }
     71 
     72     .paper-font-body1 {
     73       @apply(--paper-font-body1);
     74     }
     75 
     76     .paper-font-caption {
     77       @apply(--paper-font-caption);
     78     }
     79 
     80     .paper-font-menu {
     81       @apply(--paper-font-menu);
     82     }
     83 
     84     .paper-font-button {
     85       @apply(--paper-font-button);
     86     }
     87 
     88     .mobile-app {
     89       max-width: 320px;
     90     }
     91 
     92     .toolbar {
     93       height: 144px;
     94       padding: 16px;
     95 
     96       background: var(--default-primary-color);
     97       color: var(--text-primary-color);
     98       @apply(--paper-font-display1);
     99     }
    100 
    101     .item, .disabled-item {
    102       position: relative;
    103       padding: 8px;
    104       border: 1px solid;
    105       border-color: var(--divider-color);
    106       border-top: 0;
    107     }
    108 
    109     .item .primary {
    110       color: var(--primary-text-color);
    111 
    112       @apply(--paper-font-body2);
    113     }
    114 
    115     .item .secondary {
    116       color: var(--secondary-text-color);
    117 
    118       @apply(--paper-font-body1);
    119     }
    120 
    121     .disabled-item {
    122       color: var(--disabled-text-color);
    123 
    124       @apply(--paper-font-body2);
    125     }
    126 
    127     .fab {
    128       position: absolute;
    129       box-sizing: border-box;
    130       padding: 8px;
    131       width: 56px;
    132       height: 56px;
    133       right: 16px;
    134       top: -28px;
    135       border-radius: 50%;
    136       text-align: center;
    137 
    138       background: var(--accent-color);
    139       color: var(--text-primary-color);
    140       @apply(--paper-font-display1);
    141     }
    142 
    143     .shadow {
    144       display: inline-block;
    145       padding: 8px;
    146       margin: 16px;
    147       height: 50px;
    148       width: 50px;
    149     }
    150 
    151     .shadow-2dp {
    152       @apply(--shadow-elevation-2dp);
    153     }
    154 
    155     .shadow-3dp {
    156       @apply(--shadow-elevation-3dp);
    157     }
    158 
    159     .shadow-4dp {
    160       @apply(--shadow-elevation-4dp);
    161     }
    162 
    163     .shadow-6dp {
    164       @apply(--shadow-elevation-6dp);
    165     }
    166 
    167     .shadow-8dp {
    168       @apply(--shadow-elevation-8dp);
    169     }
    170 
    171     .shadow-12dp {
    172       @apply(--shadow-elevation-12dp);
    173     }
    174 
    175     .shadow-16dp {
    176       @apply(--shadow-elevation-16dp);
    177     }
    178   </style>
    179 
    180   <body unresolved>
    181     <h1>paper-styles</h1>
    182 
    183     <section id="default-theme">
    184       <h2>default-theme.html</h2>
    185 
    186       <section class="mobile-app">
    187         <div class="toolbar">
    188           Title
    189         </div>
    190         <div class="item">
    191           <div class="fab">+</div>
    192           <div class="primary">Primary text</div>
    193           <div class="secondary">Secondary text</div>
    194         </div>
    195         <div class="disabled-item">
    196           Disabled
    197         </div>
    198       </section>
    199     </section>
    200 
    201     <section id="typography">
    202       <h2>typography.html</h2>
    203       <p>
    204         Grumpy wizards make toxic brew for the evil Queen and Jack.
    205       </p>
    206       <section class="redlines paragraph">
    207         <div class="paper-font-display4">Display 4</div>
    208         <div class="paper-font-display3">Display 3</div>
    209         <div class="paper-font-display2">Display 2</div>
    210         <div class="paper-font-display1">Display 1</div>
    211         <div class="paper-font-headline">Headline</div>
    212         <div class="paper-font-title">Title</div>
    213         <div class="paper-font-subhead">Subhead</div>
    214         <div class="paper-font-body2">Body 2</div>
    215         <div class="paper-font-body1">Body 1</div>
    216         <div class="paper-font-caption">Caption</div>
    217         <div class="paper-font-menu">Menu</div>
    218         <div class="paper-font-button">Button</div>
    219       </section>
    220 
    221       <h3>Paragraphs</h3>
    222 
    223       <h4>body2</h4>
    224       <section class="paper-font-body2 redlines">
    225         <p>
    226           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
    227           tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
    228           purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
    229           dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
    230           egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
    231           faucibus in leo.
    232         </p>
    233         <p>
    234           Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
    235           interdum neque magna, eget dapibus est auctor et. Donec accumsan
    236           libero nec augue scelerisque, ac egestas ante tincidunt. Proin
    237           sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
    238           sollicitudin tellus quam non sapien.
    239         </p>
    240       </section>
    241 
    242       <h4>body1</h4>
    243       <section class="paper-font-body1 redlines">
    244         <p>
    245           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
    246           tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
    247           purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
    248           dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
    249           egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
    250           faucibus in leo.
    251         </p>
    252         <p>
    253           Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
    254           interdum neque magna, eget dapibus est auctor et. Donec accumsan
    255           libero nec augue scelerisque, ac egestas ante tincidunt. Proin
    256           sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
    257           sollicitudin tellus quam non sapien.
    258         </p>
    259       </section>
    260     </section>
    261 
    262     <section id="shadow">
    263       <h2>shadow.html</h2>
    264       <div class="shadow shadow-2dp">2dp</div>
    265       <div class="shadow shadow-3dp">3dp</div>
    266       <div class="shadow shadow-4dp">4dp</div>
    267       <div class="shadow shadow-6dp">6dp</div>
    268       <div class="shadow shadow-8dp">8dp</div>
    269       <div class="shadow shadow-12dp">12dp</div>
    270       <div class="shadow shadow-16dp">16dp</div>
    271     </section>
    272 
    273     <section id="demo-page">
    274       <h2>demo-pages.html</h2>
    275 
    276       <h3>Horizontal sections</h3>
    277       <div class="horizontal-section-container">
    278         <div>
    279           <h4>Column 1</h4>
    280           <div class="horizontal-section">
    281             <div>Oxygen</div>
    282             <div>Carbon</div>
    283             <div>Hydrogen</div>
    284             <div>Nitrogen</div>
    285             <div>Calcium</div>
    286           </div>
    287         </div>
    288 
    289         <div>
    290           <h4>Column 2</h4>
    291           <div class="horizontal-section">
    292             <div>Oxygen</div>
    293             <div>Carbon</div>
    294             <div>Hydrogen</div>
    295             <div>Nitrogen</div>
    296             <div>Calcium</div>
    297           </div>
    298         </div>
    299 
    300         <div>
    301           <h4>Column 3</h4>
    302           <div class="horizontal-section">
    303             <div>Oxygen</div>
    304             <div>Carbon</div>
    305             <div>Hydrogen</div>
    306             <div>Nitrogen</div>
    307             <div>Calcium</div>
    308           </div>
    309         </div>
    310       </div>
    311 
    312       <h3>Vertical sections</h3>
    313       <div class="vertical-section-container">
    314         <div>
    315           <h4>Section 1</h4>
    316           <div class="vertical-section">
    317             <div>Oxygen</div>
    318             <div>Carbon</div>
    319             <div>Hydrogen</div>
    320             <div>Nitrogen</div>
    321             <div>Calcium</div>
    322           </div>
    323         </div>
    324       </div>
    325 
    326       <div class="vertical-section-container centered">
    327         <h4>Section 2 (centered)</h4>
    328         <div class="vertical-section">
    329           <div>Oxygen</div>
    330           <div>Carbon</div>
    331           <div>Hydrogen</div>
    332           <div>Nitrogen</div>
    333           <div>Calcium</div>
    334         </div>
    335       </div>
    336     </section>
    337 
    338   </body>
    339 </html>
    340