diff options
Diffstat (limited to 'static/bower_components/paper-item/paper-item-body.html')
-rw-r--r-- | static/bower_components/paper-item/paper-item-body.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/static/bower_components/paper-item/paper-item-body.html b/static/bower_components/paper-item/paper-item-body.html new file mode 100644 index 0000000..6345830 --- /dev/null +++ b/static/bower_components/paper-item/paper-item-body.html @@ -0,0 +1,93 @@ +<!-- + @license + Copyright (c) 2015 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../polymer/polymer.html"> +<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 | `{}` + +--> + +<dom-module id="paper-item-body"> + + <style> + + :host { + 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: var(--paper-item-body-two-line-min-height, 72px); + } + + :host([three-line]) { + min-height: var(--paper-item-body-three-line-min-height, 88px); + } + + :host > ::content > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + :host > ::content [secondary] { + color: var(--paper-item-body-secondary-color, --secondary-text-color); + @apply(--paper-font-body1); + + @apply(--paper-item-body-secondary); + } + + + </style> + + <template> + <content></content> + </template> + +</dom-module> + +<script> + +(function() { + + Polymer({ + + is: 'paper-item-body' + + }); + +})(); + +</script> |