diff options
Diffstat (limited to 'static/bower_components/paper-item/paper-icon-item.html')
-rw-r--r-- | static/bower_components/paper-item/paper-icon-item.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/static/bower_components/paper-item/paper-icon-item.html b/static/bower_components/paper-item/paper-icon-item.html new file mode 100644 index 0000000..231159c --- /dev/null +++ b/static/bower_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="../paper-styles/paper-styles.html"> + +<!-- +`<paper-icon-item>` is a convenience element to make an item with icon. It is a non 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-icon-item` | Mixin applied to the item | `{}` + +--> + +<dom-module id="paper-icon-item"> + + <link rel="import" type="css" href="paper-item-shared.css"> + + <style> + + :host { + @apply(--layout-horizontal); + @apply(--layout-center); + @apply(--paper-font-subhead); + + @apply(--paper-item); + @apply(--paper-icon-item); + } + + .content-icon { + width: var(--paper-item-icon-width, 56px); + } + + </style> + + <template> + <div id="contentIcon" class="content-icon layout horizontal center"> + <content select="[item-icon]"></content> + </div> + <content></content> + </template> + +</dom-module> + +<script> + +(function() { + + Polymer({ + + is: 'paper-icon-item', + + hostAttributes: { + 'role': 'listitem' + } + + }); + +})(); + +</script> |