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

Side by Side Diff: third_party/polymer/v0_8/components/paper-item/paper-item-body.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 months 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://polym er.github.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polym er.github.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/CO NTRIBUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.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/P ATENTS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.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/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
13 13
14 <!-- 14 <!--
15 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
16 three- line items. It is a flex item that is a vertical flexbox.
15 17
16 @element paper-item-body 18 <paper-item>
19 <paper-item-body two-line>
20 <div>Show your status</div>
21 <div secondary>Your status is visible to everyone</div>
22 </paper-item-body>
23 </paper-item>
24
25 The child elements with the `secondary` attribute is given secondary text stylin g.
26
27 ### Styling
28
29 The following custom properties and mixins are available for styling:
30
31 Custom property | Description | Default
32 ----------------|-------------|----------
33 `--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px`
34 `--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px`
35 `--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color`
36 `--paper-item-body-secondary` | Mixin applied to the `secondary` are a | `{}`
37
17 --> 38 -->
18 39
19 <dom-module id="paper-item-body"> 40 <dom-module id="paper-item-body">
20 41
21 <style> 42 <style>
22 43
23 :host { 44 :host {
24 --mixin(--layout-vertical); 45 overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
25 --mixin(--layout-center-justified); 46 @apply(--layout-vertical);
26 --mixin(--layout-flex); 47 @apply(--layout-center-justified);
48 @apply(--layout-flex);
27 } 49 }
28 50
29 :host([two-line]) { 51 :host([two-line]) {
30 min-height: 72px; 52 min-height: var(--paper-item-body-two-line-min-height, 72px);
31 } 53 }
32 54
33 :host([three-line]) { 55 :host([three-line]) {
34 min-height: 88px; 56 min-height: var(--paper-item-body-three-line-min-height, 88px);
35 } 57 }
36 58
37 :host > ::content > * { 59 :host > ::content > * {
38 white-space: nowrap; 60 white-space: nowrap;
39 overflow: hidden; 61 overflow: hidden;
40 text-overflow: ellipsis; 62 text-overflow: ellipsis;
41 } 63 }
42 64
43 :host > ::content [secondary] { 65 :host > ::content [secondary] {
44 color: var(--secondary-text-color); 66 color: var(--paper-item-body-secondary-color, --secondary-text-color);
45 mixin(--paper-font-body1); 67 @apply(--paper-font-body1);
46 68
47 mixin(--paper-item-body-secondary); 69 @apply(--paper-item-body-secondary);
48 } 70 }
49 71
50 72
51 </style> 73 </style>
52 74
53 <template> 75 <template>
54 <content></content> 76 <content></content>
55 </template> 77 </template>
56 78
57 </dom-module> 79 </dom-module>
58 80
59 <script> 81 <script>
60 82
61 (function() { 83 (function() {
62 84
63 Polymer({ 85 Polymer({
64 86
65 is: 'paper-item-body', 87 is: 'paper-item-body'
66
67 enableCustomStyleProperties: true
68 88
69 }); 89 });
70 90
71 })(); 91 })();
72 92
73 </script> 93 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698