| Index: third_party/polymer/v0_8/components/paper-item/paper-item-body.html
|
| diff --git a/third_party/polymer/v0_8/components/paper-item/paper-item-body.html b/third_party/polymer/v0_8/components/paper-item/paper-item-body.html
|
| index a49e4d00b73243eae9d73838fdc877a1770d15ea..6345830c13e370313881b21f926518643ff2352b 100644
|
| --- a/third_party/polymer/v0_8/components/paper-item/paper-item-body.html
|
| +++ b/third_party/polymer/v0_8/components/paper-item/paper-item-body.html
|
| @@ -12,8 +12,29 @@
|
| <link rel="import" href="../paper-styles/paper-styles.html">
|
|
|
| <!--
|
| +Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
|
| +three- line items. It is a flex item that is a vertical flexbox.
|
| +
|
| + <paper-item>
|
| + <paper-item-body two-line>
|
| + <div>Show your status</div>
|
| + <div secondary>Your status is visible to everyone</div>
|
| + </paper-item-body>
|
| + </paper-item>
|
| +
|
| +The child elements with the `secondary` attribute is given secondary text styling.
|
| +
|
| +### Styling
|
| +
|
| +The following custom properties and mixins are available for styling:
|
| +
|
| +Custom property | Description | Default
|
| +----------------|-------------|----------
|
| +`--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px`
|
| +`--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px`
|
| +`--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color`
|
| +`--paper-item-body-secondary` | Mixin applied to the `secondary` area | `{}`
|
|
|
| -@element paper-item-body
|
| -->
|
|
|
| <dom-module id="paper-item-body">
|
| @@ -21,17 +42,18 @@
|
| <style>
|
|
|
| :host {
|
| - --mixin(--layout-vertical);
|
| - --mixin(--layout-center-justified);
|
| - --mixin(--layout-flex);
|
| + overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
|
| + @apply(--layout-vertical);
|
| + @apply(--layout-center-justified);
|
| + @apply(--layout-flex);
|
| }
|
|
|
| :host([two-line]) {
|
| - min-height: 72px;
|
| + min-height: var(--paper-item-body-two-line-min-height, 72px);
|
| }
|
|
|
| :host([three-line]) {
|
| - min-height: 88px;
|
| + min-height: var(--paper-item-body-three-line-min-height, 88px);
|
| }
|
|
|
| :host > ::content > * {
|
| @@ -41,10 +63,10 @@
|
| }
|
|
|
| :host > ::content [secondary] {
|
| - color: var(--secondary-text-color);
|
| - mixin(--paper-font-body1);
|
| + color: var(--paper-item-body-secondary-color, --secondary-text-color);
|
| + @apply(--paper-font-body1);
|
|
|
| - mixin(--paper-item-body-secondary);
|
| + @apply(--paper-item-body-secondary);
|
| }
|
|
|
|
|
| @@ -62,9 +84,7 @@
|
|
|
| Polymer({
|
|
|
| - is: 'paper-item-body',
|
| -
|
| - enableCustomStyleProperties: true
|
| + is: 'paper-item-body'
|
|
|
| });
|
|
|
|
|