diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/paper-item/paper-item-body.html')
-rw-r--r-- | chromium/third_party/catapult/third_party/polymer2/bower_components/paper-item/paper-item-body.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/paper-item/paper-item-body.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/paper-item/paper-item-body.html new file mode 100644 index 00000000000..4f5079f77f8 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/paper-item/paper-item-body.html @@ -0,0 +1,83 @@ +<!-- +@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="../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../paper-styles/default-theme.html"> +<link rel="import" href="../paper-styles/typography.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"> + <template> + <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 > ::slotted(*) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + :host > ::slotted([secondary]) { + @apply --paper-font-body1; + + color: var(--paper-item-body-secondary-color, var(--secondary-text-color)); + + @apply --paper-item-body-secondary; + } + </style> + + <slot></slot> + </template> + + <script> + Polymer({ + is: 'paper-item-body' + }); + </script> +</dom-module> |