npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/paper-item/paper-item.html

+<!--
+Copyright (c) 2014 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
+-->
+
+<!--
+
+Material Design: <a href="http://www.google.com/design/spec/components/menus.html">Menus</a>
+
+`paper-item` is a simple item object for use in menus. When the user touches the item, a ripple
+effect emanates from the point of contact. If used in a `core-selector`, the selected item will
+be highlighted.
+
+Example:
+
+    <core-menu>
+        <paper-item>Cut</paper-item>
+        <paper-item>Copy</paper-item>
+        <paper-item>Paste</paper-item>
+    </core-menu>
+
+Links
+-----
+
+To use as a link, put an `<a>` element in the item. You may also use the `noink` attribute to
+prevent the ripple from "freezing" during a page navigation.
+
+Example:
+
+    <paper-item noink>
+        <a href="http://www.polymer-project.org" layout horizontal center>Polymer</a>
+    </paper-item>
+
+@group Paper Elements
+@element paper-item
+@extends paper-button-base
+@status unstable
+-->
+
+<link href="../polymer/polymer.html" rel="import">
+<link href="../paper-button/paper-button-base.html" rel="import">
+<link href="../paper-ripple/paper-ripple.html" rel="import">
+
+<polymer-element name="paper-item" extends="paper-button-base">
+
+  <template>
+
+    <style>
+
+      :host {
+        display: block;
+        position: relative;
+        font-size: 16px;
+        box-sizing: border-box;
+        min-width: 7em;
+        outline: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        z-index: 0;
+      }
+
+      :host([disabled]) {
+        color: #a8a8a8;
+        cursor: auto;
+        pointer-events: none;
+      }
+
+      :host(.core-selected) {
+        background-color: #eaeaea;
+      }
+
+      #ripple {
+        pointer-events: none;
+        z-index: -1;
+      }
+
+      .button-content {
+        padding: 0.9em 1em;
+      }
+
+      polyfill-next-selector { content: '.button-content > a'; }
+      ::content > a {
+        height: 100%;
+        /* flex */
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      }
+
+    </style>
+
+    <!-- this div is needed to position the ripple behind text content -->
+    <div class="button-content" relative layout horizontal center>
+      <content></content>
+    </div>
+
+  </template>
+
+  <script>
+    Polymer({
+
+      publish: {
+
+        /**
+         * If true, the button will be styled with a shadow.
+         *
+         * @attribute raised
+         * @type boolean
+         * @default false
+         */
+        raised: false,
+
+        /**
+         * By default the ripple emanates from where the user touched the button.
+         * Set this to true to always center the ripple.
+         *
+         * @attribute recenteringTouch
+         * @type boolean
+         * @default false
+         */
+        recenteringTouch: false,
+
+        /**
+         * By default the ripple expands to fill the button. Set this to false to
+         * constrain the ripple to a circle within the button.
+         *
+         * @attribute fill
+         * @type boolean
+         * @default true
+         */
+        fill: true
+
+      }
+
+    });
+  </script>
+</polymer-element>