Index: polymer_1.2.3/bower_components/paper-card/paper-card.html |
diff --git a/polymer_1.2.3/bower_components/paper-card/paper-card.html b/polymer_1.2.3/bower_components/paper-card/paper-card.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e4cb0ae25df92aa68ec7d2f929c8dd25901cda41 |
--- /dev/null |
+++ b/polymer_1.2.3/bower_components/paper-card/paper-card.html |
@@ -0,0 +1,220 @@ |
+<!-- |
+@license |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../paper-material/paper-material.html"> |
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
+<link rel="import" href="../iron-image/iron-image.html"> |
+ |
+<!-- |
+Material design: [Cards](https://www.google.com/design/spec/components/cards.html) |
+ |
+`paper-card` is a container with a drop shadow. |
+ |
+Example: |
+ |
+ <paper-card heading="Card Title"> |
+ <div class="card-content">Some content</div> |
+ <div class="card-actions"> |
+ <paper-button>Some action</paper-button> |
+ </div> |
+ </paper-card> |
+ |
+Example - top card image: |
+ |
+ <paper-card heading="Card Title" image="/path/to/image.png"> |
+ ... |
+ </paper-card> |
+ |
+### Accessibility |
+ |
+By default, the `aria-label` will be set to the value of the `heading` attribute. |
+ |
+### Styling |
+ |
+The following custom properties and mixins are available for styling: |
+ |
+Custom property | Description | Default |
+----------------|-------------|---------- |
+`--paper-card-header-color` | The color of the header text | `#000` |
+`--paper-card-header` | Mixin applied to the card header section | `{}` |
+`--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` |
+`--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` |
+`--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` |
+`--paper-card-content` | Mixin applied to the card content section| `{}` |
+`--paper-card-actions` | Mixin applied to the card action section | `{}` |
+`--paper-card` | Mixin applied to the card | `{}` |
+ |
+@group Paper Elements |
+@element paper-card |
+@demo demo/index.html |
+--> |
+ |
+<dom-module id="paper-card"> |
+ <template> |
+ <style include="paper-material"> |
+ :host { |
+ display: inline-block; |
+ position: relative; |
+ box-sizing: border-box; |
+ |
+ background: #fff; |
+ border-radius: 2px; |
+ @apply(--paper-card); |
+ } |
+ |
+ /* IE 10 support for HTML5 hidden attr */ |
+ [hidden] { |
+ display: none !important; |
+ } |
+ |
+ .header { |
+ position: relative; |
+ border-top-left-radius: inherit; |
+ border-top-right-radius: inherit; |
+ overflow: hidden; |
+ @apply(--paper-card-header); |
+ } |
+ |
+ .header iron-image { |
+ width: 100%; |
+ --iron-image-width: 100%; |
+ pointer-events: none; |
+ @apply(--paper-card-header-image); |
+ } |
+ |
+ .header .title-text { |
+ padding: 16px; |
+ font-size: 24px; |
+ font-weight: 400; |
+ color: var(--paper-card-header-color, #000); |
+ @apply(--paper-card-header-text); |
+ } |
+ |
+ .header .title-text.over-image { |
+ position: absolute; |
+ bottom: 0px; |
+ @apply(--paper-card-header-image-text); |
+ } |
+ |
+ :host ::content .card-content { |
+ padding: 16px; |
+ position:relative; |
+ @apply(--paper-card-content); |
+ } |
+ |
+ :host ::content .card-actions { |
+ border-top: 1px solid #e8e8e8; |
+ padding: 5px 16px; |
+ position:relative; |
+ @apply(--paper-card-actions); |
+ } |
+ </style> |
+ |
+ <div class="header"> |
+ <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image> |
+ <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div> |
+ </div> |
+ |
+ <content></content> |
+ </template> |
+ |
+</dom-module> |
+ |
+<script> |
+ |
+ Polymer({ |
+ |
+ is: 'paper-card', |
+ |
+ properties: { |
+ |
+ /** |
+ * The title of the card. |
+ */ |
+ heading: { |
+ type: String, |
+ value: '', |
+ observer: '_headingChanged' |
+ }, |
+ |
+ /** |
+ * The url of the title image of the card. |
+ */ |
+ image: { |
+ type: String, |
+ value: '' |
+ }, |
+ |
+ /** |
+ * When `true`, any change to the image url property will cause the |
+ * `placeholder` image to be shown until the image is fully rendered. |
+ */ |
+ preloadImage: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * When `preloadImage` is true, setting `fadeImage` to true will cause the |
+ * image to fade into place. |
+ */ |
+ fadeImage: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * The z-depth of the card, from 0-5. |
+ */ |
+ elevation: { |
+ type: Number, |
+ value: 1, |
+ reflectToAttribute: true |
+ }, |
+ |
+ /** |
+ * Set this to true to animate the card shadow when setting a new |
+ * `z` value. |
+ */ |
+ animatedShadow: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Read-only property used to pass down the `animatedShadow` value to |
+ * the underlying paper-material style (since they have different names). |
+ */ |
+ animated: { |
+ type: Boolean, |
+ reflectToAttribute: true, |
+ readOnly: true, |
+ computed: '_computeAnimated(animatedShadow)' |
+ } |
+ }, |
+ |
+ _headingChanged: function(heading) { |
+ var label = this.getAttribute('aria-label'); |
+ this.setAttribute('aria-label', heading); |
+ }, |
+ |
+ _computeHeadingClass: function(image) { |
+ var cls = 'title-text'; |
+ if (image) |
+ cls += ' over-image'; |
+ return cls; |
+ }, |
+ |
+ _computeAnimated: function(animatedShadow) { |
+ return animatedShadow; |
+ } |
+ }); |
+</script> |