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