1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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/typography.html">
14<link rel="import" href="paper-item-behavior.html">
15<link rel="import" href="paper-item-shared-styles.html">
16
17<!--
18`<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list
19item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
20varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child
21node with the attribute `item-icon` is placed in the icon area.
22
23    <paper-icon-item>
24      <iron-icon icon="favorite" item-icon></iron-icon>
25      Favorite
26    </paper-icon-item>
27    <paper-icon-item>
28      <div class="avatar" item-icon></div>
29      Avatar
30    </paper-icon-item>
31
32### Styling
33
34The following custom properties and mixins are available for styling:
35
36Custom property               | Description                                    | Default
37------------------------------|------------------------------------------------|----------
38`--paper-item-icon-width`     | Width of the icon area                         | `56px`
39`--paper-item-icon`           | Mixin applied to the icon area                 | `{}`
40`--paper-icon-item`           | Mixin applied to the item                      | `{}`
41`--paper-item-selected-weight`| The font weight of a selected item             | `bold`
42`--paper-item-selected`       | Mixin applied to selected paper-items                | `{}`
43`--paper-item-disabled-color` | The color for disabled paper-items             | `--disabled-text-color`
44`--paper-item-disabled`       | Mixin applied to disabled paper-items        | `{}`
45`--paper-item-focused`        | Mixin applied to focused paper-items         | `{}`
46`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}`
47-->
48
49<dom-module id="paper-icon-item">
50  <template>
51    <style include="paper-item-shared-styles"></style>
52    <style>
53      :host {
54        @apply(--layout-horizontal);
55        @apply(--layout-center);
56        @apply(--paper-font-subhead);
57
58        @apply(--paper-item);
59        @apply(--paper-icon-item);
60      }
61
62      .content-icon {
63        @apply(--layout-horizontal);
64        @apply(--layout-center);
65
66        width: var(--paper-item-icon-width, 56px);
67        @apply(--paper-item-icon);
68      }
69    </style>
70
71    <div id="contentIcon" class="content-icon">
72      <content select="[item-icon]"></content>
73    </div>
74    <content></content>
75  </template>
76
77  <script>
78    Polymer({
79      is: 'paper-icon-item',
80
81      behaviors: [
82        Polymer.PaperItemBehavior
83      ]
84    });
85  </script>
86</dom-module>
87