third_party/polymer/v0_8/components-chromium/paper-item/paper-item-body.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-item/paper-item.html ('k') | third_party/polymer/v0_8/components-chromium/paper-item/paper-item-body-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../paper-styles/paper-styles.html">	10 <link rel="import" href="../paper-styles/paper-styles.html">

11	11

12 <!--	12 <!--

	13 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or

	14 three- line items. It is a flex item that is a vertical flexbox.

13	15

14 @element paper-item-body	16 <paper-item>

	17 <paper-item-body two-line>

	18 <div>Show your status</div>

	19 <div secondary>Your status is visible to everyone</div>

	20 </paper-item-body>

	21 </paper-item>

	22

	23 The child elements with the `secondary` attribute is given secondary text stylin g.

	24

	25 ### Styling

	26

	27 The following custom properties and mixins are available for styling:

	28

	29 Custom property \| Description \| Default

	30 ----------------\|-------------\|----------

	31 `--paper-item-body-two-line-min-height` \| Minimum height of a two-line item \| `72px`

	32 `--paper-item-body-three-line-min-height` \| Minimum height of a three-line item \| `88px`

	33 `--paper-item-body-secondary-color` \| Foreground color for the `secondary` area \| `--secondary-text-color`

	34 `--paper-item-body-secondary` \| Mixin applied to the `secondary` are a \| `{}`

	35

15 -->	36 -->

16	37

17 </head><body><dom-module id="paper-item-body">	38 </head><body><dom-module id="paper-item-body">

18	39

19 <style>	40 <style>

20	41

21 :host {	42 :host {

22 --mixin(--layout-vertical);	43 overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */

23 --mixin(--layout-center-justified);	44 @apply(--layout-vertical);

24 --mixin(--layout-flex);	45 @apply(--layout-center-justified);

	46 @apply(--layout-flex);

25 }	47 }

26	48

27 :host([two-line]) {	49 :host([two-line]) {

28 min-height: 72px;	50 min-height: var(--paper-item-body-two-line-min-height, 72px);

29 }	51 }

30	52

31 :host([three-line]) {	53 :host([three-line]) {

32 min-height: 88px;	54 min-height: var(--paper-item-body-three-line-min-height, 88px);

33 }	55 }

34	56

35 :host > ::content > * {	57 :host > ::content > * {

36 white-space: nowrap;	58 white-space: nowrap;

37 overflow: hidden;	59 overflow: hidden;

38 text-overflow: ellipsis;	60 text-overflow: ellipsis;

39 }	61 }

40	62

41 :host > ::content [secondary] {	63 :host > ::content [secondary] {

42 color: var(--secondary-text-color);	64 color: var(--paper-item-body-secondary-color, --secondary-text-color);

43 mixin(--paper-font-body1);	65 @apply(--paper-font-body1);

44	66

45 mixin(--paper-item-body-secondary);	67 @apply(--paper-item-body-secondary);

46 }	68 }

47	69

48	70

49 </style>	71 </style>

50	72

51 <template>	73 <template>

52 <content></content>	74 <content></content>

53 </template>	75 </template>

54	76

55 </dom-module>	77 </dom-module>

56	78

57 <script src="paper-item-body-extracted.js"></script></body></html>	79 <script src="paper-item-body-extracted.js"></script></body></html>

OLD	NEW