← 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-card/paper-card.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-card/paper-card.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="../iron-flex-layout/iron-flex-layout.html">
 
13
<link rel="import" href="../iron-image/iron-image.html">
 
14
<link rel="import" href="../paper-material/paper-material.html">
 
15
<link rel="import" href="../paper-styles/default-theme.html">
 
16
 
 
17
<!--
 
18
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
 
19
 
 
20
`paper-card` is a container with a drop shadow.
 
21
 
 
22
Example:
 
23
 
 
24
    <paper-card heading="Card Title">
 
25
      <div class="card-content">Some content</div>
 
26
      <div class="card-actions">
 
27
        <paper-button>Some action</paper-button>
 
28
      </div>
 
29
    </paper-card>
 
30
 
 
31
Example - top card image:
 
32
 
 
33
    <paper-card heading="Card Title" image="/path/to/image.png">
 
34
      ...
 
35
    </paper-card>
 
36
 
 
37
### Accessibility
 
38
 
 
39
By default, the `aria-label` will be set to the value of the `heading` attribute.
 
40
 
 
41
### Styling
 
42
 
 
43
The following custom properties and mixins are available for styling:
 
44
 
 
45
Custom property | Description | Default
 
46
----------------|-------------|----------
 
47
`--paper-card-background-color` | The background color of the card | `--primary-background-color`
 
48
`--paper-card-header-color` | The color of the header text | `#000`
 
49
`--paper-card-header` | Mixin applied to the card header section | `{}`
 
50
`--paper-card-header-text` | Mixin applied to the title in the card header section | `{}`
 
51
`--paper-card-header-image` | Mixin applied to the image in the card header section | `{}`
 
52
`--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}`
 
53
`--paper-card-content` | Mixin applied to the card content section| `{}`
 
54
`--paper-card-actions` | Mixin applied to the card action section | `{}`
 
55
`--paper-card` | Mixin applied to the card | `{}`
 
56
 
 
57
@group Paper Elements
 
58
@element paper-card
 
59
@demo demo/index.html
 
60
-->
 
61
 
 
62
<dom-module id="paper-card">
 
63
  <template>
 
64
    <style include="paper-material">
 
65
      :host {
 
66
        display: inline-block;
 
67
        position: relative;
 
68
        box-sizing: border-box;
 
69
        background-color: var(--paper-card-background-color, --primary-background-color);
 
70
        border-radius: 2px;
 
71
 
 
72
        @apply(--paper-font-common-base);
 
73
        @apply(--paper-card);
 
74
      }
 
75
 
 
76
      /* IE 10 support for HTML5 hidden attr */
 
77
      [hidden] {
 
78
        display: none !important;
 
79
      }
 
80
 
 
81
      .header {
 
82
        position: relative;
 
83
        border-top-left-radius: inherit;
 
84
        border-top-right-radius: inherit;
 
85
        overflow: hidden;
 
86
 
 
87
        @apply(--paper-card-header);
 
88
      }
 
89
 
 
90
      .header iron-image {
 
91
        width: 100%;
 
92
        --iron-image-width: 100%;
 
93
        pointer-events: none;
 
94
 
 
95
        @apply(--paper-card-header-image);
 
96
      }
 
97
 
 
98
      .header .title-text {
 
99
        padding: 16px;
 
100
        font-size: 24px;
 
101
        font-weight: 400;
 
102
        color: var(--paper-card-header-color, #000);
 
103
 
 
104
        @apply(--paper-card-header-text);
 
105
      }
 
106
 
 
107
      .header .title-text.over-image {
 
108
        position: absolute;
 
109
        bottom: 0px;
 
110
 
 
111
        @apply(--paper-card-header-image-text);
 
112
      }
 
113
 
 
114
      :host ::content .card-content {
 
115
        padding: 16px;
 
116
        position:relative;
 
117
 
 
118
        @apply(--paper-card-content);
 
119
      }
 
120
 
 
121
      :host ::content .card-actions {
 
122
        border-top: 1px solid #e8e8e8;
 
123
        padding: 5px 16px;
 
124
        position:relative;
 
125
 
 
126
        @apply(--paper-card-actions);
 
127
      }
 
128
    </style>
 
129
 
 
130
    <div class="header">
 
131
      <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image>
 
132
      <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div>
 
133
    </div>
 
134
 
 
135
    <content></content>
 
136
  </template>
 
137
 
 
138
  <script>
 
139
    Polymer({
 
140
      is: 'paper-card',
 
141
 
 
142
      properties: {
 
143
        /**
 
144
         * The title of the card.
 
145
         */
 
146
        heading: {
 
147
          type: String,
 
148
          value: '',
 
149
          observer: '_headingChanged'
 
150
        },
 
151
 
 
152
        /**
 
153
         * The url of the title image of the card.
 
154
         */
 
155
        image: {
 
156
          type: String,
 
157
          value: ''
 
158
        },
 
159
 
 
160
        /**
 
161
         * When `true`, any change to the image url property will cause the
 
162
         * `placeholder` image to be shown until the image is fully rendered.
 
163
         */
 
164
        preloadImage: {
 
165
          type: Boolean,
 
166
          value: false
 
167
        },
 
168
 
 
169
        /**
 
170
         * When `preloadImage` is true, setting `fadeImage` to true will cause the
 
171
         * image to fade into place.
 
172
         */
 
173
        fadeImage: {
 
174
          type: Boolean,
 
175
          value: false
 
176
        },
 
177
 
 
178
        /**
 
179
         * The z-depth of the card, from 0-5.
 
180
         */
 
181
        elevation: {
 
182
          type: Number,
 
183
          value: 1,
 
184
          reflectToAttribute: true
 
185
        },
 
186
 
 
187
        /**
 
188
         * Set this to true to animate the card shadow when setting a new
 
189
         * `z` value.
 
190
         */
 
191
        animatedShadow: {
 
192
          type: Boolean,
 
193
          value: false
 
194
        },
 
195
 
 
196
        /**
 
197
         * Read-only property used to pass down the `animatedShadow` value to
 
198
         * the underlying paper-material style (since they have different names).
 
199
         */
 
200
        animated: {
 
201
          type: Boolean,
 
202
          reflectToAttribute: true,
 
203
          readOnly: true,
 
204
          computed: '_computeAnimated(animatedShadow)'
 
205
        }
 
206
      },
 
207
 
 
208
      _headingChanged: function(heading) {
 
209
        var label = this.getAttribute('aria-label');
 
210
        this.setAttribute('aria-label', heading);
 
211
      },
 
212
 
 
213
      _computeHeadingClass: function(image) {
 
214
        var cls = 'title-text';
 
215
        if (image)
 
216
          cls += ' over-image';
 
217
        return cls;
 
218
      },
 
219
 
 
220
      _computeAnimated: function(animatedShadow) {
 
221
        return animatedShadow;
 
222
      }
 
223
    });
 
224
  </script>
 
225
</dom-module>