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