← 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-header-panel/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-header-panel/demo/index.html
 
1
<!DOCTYPE html>
 
2
 
 
3
<!--
 
4
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
5
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
6
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
7
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
8
Code distributed by Google as part of the polymer project is also
 
9
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
10
-->
 
11
<html>
 
12
 
 
13
  <head>
 
14
    <title>paper-header-panel demo</title>
 
15
 
 
16
    <script src="../../webcomponentsjs/webcomponents.js"></script>
 
17
    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 
18
    <link rel="import" href="../../paper-styles/demo-pages.html">
 
19
    <link rel="import" href="../paper-header-panel.html">
 
20
 
 
21
    <style is="custom-style">
 
22
      body {
 
23
        @apply(--layout-inline);
 
24
        @apply(--layout-center-center);
 
25
        @apply(--layout-wrap);
 
26
        padding: 40px;
 
27
      }
 
28
 
 
29
      paper-header-panel {
 
30
        float: left;
 
31
        width: 240px;
 
32
        height: 240px;
 
33
        margin: 12px;
 
34
        @apply(--shadow-elevation-2dp);
 
35
      }
 
36
 
 
37
      .paper-header {
 
38
        height: 60px;
 
39
        font-size: 16px;
 
40
        line-height: 60px;
 
41
        padding: 0 10px;
 
42
        color: white;
 
43
        transition: height 0.2s;
 
44
      }
 
45
 
 
46
      .paper-header.tall {
 
47
        height: 120px;
 
48
      }
 
49
 
 
50
      .paper-header.medium-tall {
 
51
        height: 100px;
 
52
        line-height: 50px;
 
53
      }
 
54
 
 
55
      .content {
 
56
        height: 2000px;
 
57
      }
 
58
 
 
59
      .cover {
 
60
        margin: 60px;
 
61
      }
 
62
 
 
63
      .blue .paper-header {
 
64
        background-color: var(--paper-light-blue-500);
 
65
      }
 
66
      .red .paper-header {
 
67
        background-color: var(--paper-red-500);
 
68
      }
 
69
      .orange .paper-header {
 
70
        background-color: var(--paper-amber-500);
 
71
      }
 
72
      .green .paper-header {
 
73
        background-color: var(--paper-green-500);
 
74
      }
 
75
      .cyan .paper-header {
 
76
        background-color: var(--paper-cyan-500);
 
77
      }
 
78
      .lime .paper-header {
 
79
        background-color: var(--paper-lime-500);
 
80
      }
 
81
      .pink .paper-header {
 
82
        background-color: var(--paper-pink-a200);
 
83
      }
 
84
 
 
85
      /* TODO: replace these with background: linear-gradient(white, var(...))
 
86
       when custom properties allow it */
 
87
 
 
88
      .blue .content {
 
89
        background: linear-gradient(white, #b3e5fc);
 
90
      }
 
91
      .red .content {
 
92
        background: linear-gradient(white, #ffcdd2);
 
93
      }
 
94
      .orange .content {
 
95
        background: linear-gradient(white, #ffecb3);
 
96
      }
 
97
      .green .content {
 
98
        background: linear-gradient(white, #c8e6c9);
 
99
      }
 
100
      .cyan .content {
 
101
        background: linear-gradient(white, #b2ebf2);
 
102
      }
 
103
      .lime .content {
 
104
        background: linear-gradient(white, #f0f4c3);
 
105
      }
 
106
      .pink .content {
 
107
        background: linear-gradient(white, #f8bbd0);
 
108
      }
 
109
    </style>
 
110
  </head>
 
111
 
 
112
  <body>
 
113
    <paper-header-panel class="blue">
 
114
      <div class="paper-header">standard</div>
 
115
      <div class="content"></div>
 
116
    </paper-header-panel>
 
117
 
 
118
    <paper-header-panel mode="seamed" class="red">
 
119
      <div class="paper-header">seamed</div>
 
120
      <div class="content"></div>
 
121
    </paper-header-panel>
 
122
 
 
123
    <paper-header-panel mode="scroll" class="orange">
 
124
      <div class="paper-header">scroll</div>
 
125
      <div class="content"></div>
 
126
    </paper-header-panel>
 
127
 
 
128
    <paper-header-panel mode="waterfall" class="green">
 
129
      <div class="paper-header">waterfall</div>
 
130
      <div class="content"></div>
 
131
    </paper-header-panel>
 
132
 
 
133
    <paper-header-panel mode="waterfall-tall" class="pink">
 
134
      <div class="paper-header">waterfall-tall</div>
 
135
      <div class="content"></div>
 
136
    </paper-header-panel>
 
137
 
 
138
    <paper-header-panel mode="waterfall-tall" tall-class="medium-tall" class="cyan">
 
139
      <div class="paper-header">waterfall-tall<br>tall-class: medium-tall</div>
 
140
      <div class="content"></div>
 
141
    </paper-header-panel>
 
142
 
 
143
    <paper-header-panel mode="cover" class="lime">
 
144
      <div class="paper-header tall">cover</div>
 
145
      <div class="content cover"></div>
 
146
    </paper-header-panel>
 
147
  </body>
 
148
 
 
149
</html>