third_party/polymer/components-chromium/paper-item/paper-item.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><!--
   9
  10 Material Design: <a href="http://www.google.com/design/spec/components/menus.html">Menus</a>
  11
  12 `paper-item` is a simple item object for use in menus. When the user touches the item, a ripple
  13 effect emanates from the point of contact. If used in a `core-selector`, the selected item will
  14 be highlighted.
  15
  16 Example:
  17
  18     <core-menu>
  19         <paper-item>Cut</paper-item>
  20         <paper-item>Copy</paper-item>
  21         <paper-item>Paste</paper-item>
  22     </core-menu>
  23
  24 Links
  25 -----
  26
  27 To use as a link, put an `<a>` element in the item. You may also use the `noink` attribute to
  28 prevent the ripple from "freezing" during a page navigation.
  29
  30 Example:
  31
  32     <paper-item noink>
  33         <a href="http://www.polymer-project.org" layout horizontal center>Polymer</a>
  34     </paper-item>
  35
  36 @group Paper Elements
  37 @element paper-item
  38 @extends paper-button-base
  39 @status unstable
  40 --><html><head><link href="../polymer/polymer.html" rel="import">
  41 <link href="../paper-button/paper-button-base.html" rel="import">
  42 <link href="../paper-ripple/paper-ripple.html" rel="import">
  43
  44 </head><body><polymer-element name="paper-item" extends="paper-button-base" assetpath="">
  45
  46   <template>
  47
  48     <style>
  49
  50       :host {
  51         display: block;
  52         position: relative;
  53         font-size: 16px;
  54         box-sizing: border-box;
  55         min-width: 7em;
  56         outline: none;
  57         -moz-user-select: none;
  58         -ms-user-select: none;
  59         -webkit-user-select: none;
  60         user-select: none;
  61         cursor: pointer;
  62         z-index: 0;
  63       }
  64
  65       :host([disabled]) {
  66         color: #a8a8a8;
  67         cursor: auto;
  68         pointer-events: none;
  69       }
  70
  71       :host(.core-selected) {
  72         background-color: #eaeaea;
  73       }
  74
  75       #ripple {
  76         pointer-events: none;
  77         z-index: -1;
  78       }
  79
  80       .button-content {
  81         padding: 0.9em 1em;
  82       }
  83
  84       polyfill-next-selector { content: '.button-content > a'; }
  85       ::content > a {
  86         height: 100%;
  87         /* flex */
  88         -ms-flex: 1 1 0.000000001px;
  89         -webkit-flex: 1;
  90         flex: 1;
  91         -webkit-flex-basis: 0.000000001px;
  92         flex-basis: 0.000000001px;
  93       }
  94
  95     </style>
  96
  97     <!-- this div is needed to position the ripple behind text content -->
  98     <div class="button-content" relative="" layout="" horizontal="" center="">
  99       <content></content>
 100     </div>
 101
 102   </template>
 103
 104
 105 </polymer-element>
 106 <script charset="utf-8" src="paper-item-extracted.js"></script></body></html>