third_party/polymer/v0_8/components-chromium/paper-item/paper-item-body.html

   1 <!--
   2     @license
   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://polymer.github.io/LICENSE.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/CONTRIBUTORS.txt
   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/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/paper-styles.html">
  11
  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.
  15
  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 styling.
  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` area      | `{}`
  35
  36 -->
  37
  38 </head><body><dom-module id="paper-item-body">
  39
  40   <style>
  41
  42     :host {
  43       overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
  44       @apply(--layout-vertical);
  45       @apply(--layout-center-justified);
  46       @apply(--layout-flex);
  47     }
  48
  49     :host([two-line]) {
  50       min-height: var(--paper-item-body-two-line-min-height, 72px);
  51     }
  52
  53     :host([three-line]) {
  54       min-height: var(--paper-item-body-three-line-min-height, 88px);
  55     }
  56
  57     :host > ::content > * {
  58       white-space: nowrap;
  59       overflow: hidden;
  60       text-overflow: ellipsis;
  61     }
  62
  63     :host > ::content [secondary] {
  64       color: var(--paper-item-body-secondary-color, --secondary-text-color);
  65       @apply(--paper-font-body1);
  66
  67       @apply(--paper-item-body-secondary);
  68     }
  69
  70
  71   </style>
  72
  73   <template>
  74     <content></content>
  75   </template>
  76
  77 </dom-module>
  78
  79 <script src="paper-item-body-extracted.js"></script></body></html>