← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-styles/demo/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-styles/demo/index.html
 
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>