← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/neon-animation/demo/card/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/neon-animation/demo/card/index.html
 
1
<!doctype html>
 
2
<!--
 
3
@license
 
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
  <head>
 
13
    <title>neon-animated-pages demo: card</title>
 
14
 
 
15
    <meta charset="utf-8">
 
16
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
17
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
18
 
 
19
    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
20
 
 
21
    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 
22
    <link rel="import" href="../../neon-animated-pages.html">
 
23
    <link rel="import" href="../../neon-animations.html">
 
24
    <link rel="import" href="../../../paper-styles/typography.html">
 
25
    <link rel="import" href="x-card.html">
 
26
    <link rel="import" href="x-cards-list.html">
 
27
 
 
28
    <style is="custom-style">
 
29
 
 
30
      body {
 
31
        padding: 15px;
 
32
        @apply(--layout-fullbleed);
 
33
        @apply(--paper-font-common-base);
 
34
      }
 
35
 
 
36
      neon-animated-pages {
 
37
        height: 100%;
 
38
      }
 
39
 
 
40
      .large {
 
41
        width: 100%
 
42
      }
 
43
 
 
44
      .button {
 
45
        text-align: center;
 
46
        width: 120px;
 
47
        height: 32px;
 
48
        line-height: 32px;
 
49
        border-radius: 2px;
 
50
        font-size: 0.9em;
 
51
        background-color: #fff;
 
52
        color: #646464;
 
53
      }
 
54
 
 
55
      .button.blue {
 
56
        background-color: #4285f4;
 
57
        color: #fff;
 
58
      }
 
59
 
 
60
      .button.raised {
 
61
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 
62
      }
 
63
 
 
64
      .button.back {
 
65
        position: fixed;
 
66
        top: 30px;
 
67
        left: 30px;
 
68
      }
 
69
 
 
70
      .card-contents {
 
71
        @apply(--layout-vertical);
 
72
        @apply(--layout-center-center);
 
73
        @apply(--layout-fit);
 
74
      }
 
75
 
 
76
      .button-container {
 
77
        @apply(--layout-flex);
 
78
        @apply(--layout-horizontal);
 
79
        @apply(--layout-around-justified);
 
80
      }
 
81
    </style>
 
82
 
 
83
  </head>
 
84
  <body>
 
85
 
 
86
    <template is="dom-bind">
 
87
      <neon-animated-pages id="pages" selected="0">
 
88
          <x-cards-list id="list">
 
89
            <div class="card-contents">
 
90
              <h2>Choose a subject</h2>
 
91
              <div class="button-container large">
 
92
                <div class="blue raised button" on-click="_onPolymerClick">
 
93
                  POLYMER
 
94
                </div>
 
95
                <div class="blue raised button" on-click="_onAngularClick">
 
96
                  ANGULAR
 
97
                </div>
 
98
              </div>
 
99
            </div>
 
100
          </x-cards-list>
 
101
 
 
102
          <x-card>
 
103
            <div class="card-contents">
 
104
              <div class="raised back button" on-click="_onBackClick">
 
105
                BACK
 
106
              </div>
 
107
              <h2>Polymer</h2>
 
108
              <p>
 
109
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
110
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 
111
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 
112
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 
113
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 
114
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
115
              </p>
 
116
            </div>
 
117
          </x-card>
 
118
 
 
119
          <x-card>
 
120
            <div class="card-contents">
 
121
              <div class="raised back button" on-click="_onBackClick">
 
122
                BACK
 
123
              </div>
 
124
              <h2>Angular</h2>
 
125
              <p>
 
126
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
127
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 
128
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 
129
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 
130
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 
131
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
132
              </p>
 
133
            </div>
 
134
          </x-card>
 
135
 
 
136
        </neon-animated-pages>
 
137
    </template>
 
138
 
 
139
    <script>
 
140
 
 
141
      var scope = document.querySelector('template[is="dom-bind"]');
 
142
 
 
143
      scope._onPolymerClick = function(event) {
 
144
        this.$.list.sharedElements = {
 
145
          'ripple': event.target,
 
146
          'reverse-ripple': event.target
 
147
        };
 
148
        this.$.pages.selected = 1;
 
149
      };
 
150
 
 
151
      scope._onAngularClick = function(event) {
 
152
        this.$.list.sharedElements = {
 
153
          'ripple': event.target,
 
154
          'reverse-ripple': event.target
 
155
        };
 
156
        this.$.pages.selected = 2;
 
157
      };
 
158
 
 
159
      scope._onBackClick = function(event) {
 
160
        this.$.pages.selected = 0;
 
161
      };
 
162
 
 
163
    </script>
 
164
 
 
165
  </body>
 
166
</html>