← 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-material/paper-material.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-material/paper-material.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
 
 
11
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../paper-styles/shadow.html">
 
13
<link rel="import" href="paper-material-shared-styles.html">
 
14
 
 
15
<!--
 
16
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
 
17
 
 
18
`paper-material` is a container that renders two shadows on top of each other to
 
19
create the effect of a lifted piece of paper.
 
20
 
 
21
Example:
 
22
 
 
23
    <paper-material elevation="1">
 
24
      ... content ...
 
25
    </paper-material>
 
26
 
 
27
@group Paper Elements
 
28
@demo demo/index.html
 
29
-->
 
30
 
 
31
<dom-module id="paper-material">
 
32
  <template>
 
33
    <style include="paper-material-shared-styles"></style>
 
34
    <style>
 
35
      :host([animated]) {
 
36
        @apply(--shadow-transition);
 
37
      }
 
38
    </style>
 
39
 
 
40
    <content></content>
 
41
  </template>
 
42
</dom-module>
 
43
<script>
 
44
  Polymer({
 
45
    is: 'paper-material',
 
46
 
 
47
    properties: {
 
48
      /**
 
49
       * The z-depth of this element, from 0-5. Setting to 0 will remove the
 
50
       * shadow, and each increasing number greater than 0 will be "deeper"
 
51
       * than the last.
 
52
       *
 
53
       * @attribute elevation
 
54
       * @type number
 
55
       * @default 1
 
56
       */
 
57
      elevation: {
 
58
        type: Number,
 
59
        reflectToAttribute: true,
 
60
        value: 1
 
61
      },
 
62
 
 
63
      /**
 
64
       * Set this to true to animate the shadow when setting a new
 
65
       * `elevation` value.
 
66
       *
 
67
       * @attribute animated
 
68
       * @type boolean
 
69
       * @default false
 
70
       */
 
71
      animated: {
 
72
        type: Boolean,
 
73
        reflectToAttribute: true,
 
74
        value: false
 
75
      }
 
76
    }
 
77
  });
 
78
</script>