Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(74)

Side by Side Diff: lib/src/paper-material/paper-material.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/shadow.html"> 12 <link rel="import" href="../paper-styles/shadow.html">
13 13
14 <!-- 14 <!--
15 Material design: [Cards](https://www.google.com/design/spec/components/cards.htm l)
15 16
16 `paper-material` is a container that renders two shadows on top of each other to 17 `paper-material` is a container that renders two shadows on top of each other to
17 create the effect of a lifted piece of paper. 18 create the effect of a lifted piece of paper.
18 19
19 Example: 20 Example:
20 21
21 <paper-material elevation="1"> 22 <paper-material elevation="1">
22 ... content ... 23 ... content ...
23 </paper-material> 24 </paper-material>
24 25
25 @group Paper Elements 26 @group Paper Elements
26 @class paper-material
27 @demo demo/index.html 27 @demo demo/index.html
28 --> 28 -->
29 29
30 <dom-module id="paper-material"> 30 <dom-module id="paper-material">
31 <style> 31 <template>
32 :host { 32 <style>
33 display: block; 33 :host {
34 position: relative; 34 display: block;
35 } 35 position: relative;
36 }
36 37
37 :host([animated]) { 38 :host([animated]) {
38 @apply(--shadow-transition); 39 @apply(--shadow-transition);
39 } 40 }
40 41
41 :host([elevation="1"]) { 42 :host([elevation="1"]) {
42 @apply(--shadow-elevation-2dp); 43 @apply(--shadow-elevation-2dp);
43 } 44 }
44 45
45 :host([elevation="2"]) { 46 :host([elevation="2"]) {
46 @apply(--shadow-elevation-4dp); 47 @apply(--shadow-elevation-4dp);
47 } 48 }
48 49
49 :host([elevation="3"]) { 50 :host([elevation="3"]) {
50 @apply(--shadow-elevation-6dp); 51 @apply(--shadow-elevation-6dp);
51 } 52 }
52 53
53 :host([elevation="4"]) { 54 :host([elevation="4"]) {
54 @apply(--shadow-elevation-8dp); 55 @apply(--shadow-elevation-8dp);
55 } 56 }
56 57
57 :host([elevation="5"]) { 58 :host([elevation="5"]) {
58 @apply(--shadow-elevation-16dp); 59 @apply(--shadow-elevation-16dp);
59 } 60 }
60 </style> 61 </style>
61 <template> 62
62 <content></content> 63 <content></content>
63 </template> 64 </template>
64 </dom-module> 65 </dom-module>
65 <script> 66 <script>
66 Polymer({ 67 Polymer({
67 is: 'paper-material', 68 is: 'paper-material',
68 69
69 properties: { 70 properties: {
70
71 /** 71 /**
72 * The z-depth of this element, from 0-5. Setting to 0 will remove the 72 * The z-depth of this element, from 0-5. Setting to 0 will remove the
73 * shadow, and each increasing number greater than 0 will be "deeper" 73 * shadow, and each increasing number greater than 0 will be "deeper"
74 * than the last. 74 * than the last.
75 * 75 *
76 * @attribute elevation 76 * @attribute elevation
77 * @type number 77 * @type number
78 * @default 1 78 * @default 1
79 */ 79 */
80 elevation: { 80 elevation: {
(...skipping 11 matching lines...) Expand all
92 * @default false 92 * @default false
93 */ 93 */
94 animated: { 94 animated: {
95 type: Boolean, 95 type: Boolean,
96 reflectToAttribute: true, 96 reflectToAttribute: true,
97 value: false 97 value: false
98 } 98 }
99 } 99 }
100 }); 100 });
101 </script> 101 </script>
OLDNEW
« no previous file with comments | « lib/src/paper-item/paper-item-shared-styles.html ('k') | lib/src/paper-material/test/paper-material.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698