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

Unified 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, 7 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 side-by-side diff with in-line comments
Download patch
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'
});

Powered by Google App Engine
This is Rietveld 408576698