diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-item/paper-icon-item.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-item/paper-icon-item.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-item/paper-icon-item.html b/catapult/third_party/polymer/components/paper-item/paper-icon-item.html new file mode 100644 index 00000000..e8f6d079 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-item/paper-icon-item.html @@ -0,0 +1,86 @@ +<!-- +@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/typography.html"> +<link rel="import" href="paper-item-behavior.html"> +<link rel="import" href="paper-item-shared-styles.html"> + +<!-- +`<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list +item with a fixed-width icon area, according to Material Design. This is useful if the icons are of +varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child +node with the attribute `item-icon` is placed in the icon area. + + <paper-icon-item> + <iron-icon icon="favorite" item-icon></iron-icon> + Favorite + </paper-icon-item> + <paper-icon-item> + <div class="avatar" item-icon></div> + Avatar + </paper-icon-item> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +------------------------------|------------------------------------------------|---------- +`--paper-item-icon-width` | Width of the icon area | `56px` +`--paper-item-icon` | Mixin applied to the icon area | `{}` +`--paper-icon-item` | Mixin applied to the item | `{}` +`--paper-item-selected-weight`| The font weight of a selected item | `bold` +`--paper-item-selected` | Mixin applied to selected paper-items | `{}` +`--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color` +`--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` +`--paper-item-focused` | Mixin applied to focused paper-items | `{}` +`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` +--> + +<dom-module id="paper-icon-item"> + <template> + <style include="paper-item-shared-styles"></style> + <style> + :host { + @apply(--layout-horizontal); + @apply(--layout-center); + @apply(--paper-font-subhead); + + @apply(--paper-item); + @apply(--paper-icon-item); + } + + .content-icon { + @apply(--layout-horizontal); + @apply(--layout-center); + + width: var(--paper-item-icon-width, 56px); + @apply(--paper-item-icon); + } + </style> + + <div id="contentIcon" class="content-icon"> + <content select="[item-icon]"></content> + </div> + <content></content> + </template> + + <script> + Polymer({ + is: 'paper-icon-item', + + behaviors: [ + Polymer.PaperItemBehavior + ] + }); + </script> +</dom-module> |