Home | History | Annotate | Download | only in paper-item 
      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 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
     13 <link rel="import" href="../paper-styles/default-theme.html">
     14 <link rel="import" href="../paper-styles/typography.html">
     15 
     16 <!--
     17 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
     18 three- line items. It is a flex item that is a vertical flexbox.
     19 
     20     <paper-item>
     21       <paper-item-body two-line>
     22         <div>Show your status</div>
     23         <div secondary>Your status is visible to everyone</div>
     24       </paper-item-body>
     25     </paper-item>
     26 
     27 The child elements with the `secondary` attribute is given secondary text styling.
     28 
     29 ### Styling
     30 
     31 The following custom properties and mixins are available for styling:
     32 
     33 Custom property | Description | Default
     34 ----------------|-------------|----------
     35 `--paper-item-body-two-line-min-height`   | Minimum height of a two-line item          | `72px`
     36 `--paper-item-body-three-line-min-height` | Minimum height of a three-line item        | `88px`
     37 `--paper-item-body-secondary-color`       | Foreground color for the `secondary` area  | `--secondary-text-color`
     38 `--paper-item-body-secondary`             | Mixin applied to the `secondary` area      | `{}`
     39 
     40 -->
     41 
     42 <dom-module id="paper-item-body">
     43   <template>
     44     <style>
     45       :host {
     46         overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
     47         @apply(--layout-vertical);
     48         @apply(--layout-center-justified);
     49         @apply(--layout-flex);
     50       }
     51 
     52       :host([two-line]) {
     53         min-height: var(--paper-item-body-two-line-min-height, 72px);
     54       }
     55 
     56       :host([three-line]) {
     57         min-height: var(--paper-item-body-three-line-min-height, 88px);
     58       }
     59 
     60       :host > ::content > * {
     61         overflow: hidden;
     62         text-overflow: ellipsis;
     63         white-space: nowrap;
     64       }
     65 
     66       :host > ::content [secondary] {
     67         @apply(--paper-font-body1);
     68 
     69         color: var(--paper-item-body-secondary-color, --secondary-text-color);
     70 
     71         @apply(--paper-item-body-secondary);
     72       }
     73     </style>
     74 
     75     <content></content>
     76   </template>
     77 
     78   <script>
     79     Polymer({
     80       is: 'paper-item-body'
     81     });
     82   </script>
     83 </dom-module>
     84