blob: 7c539d2e4814f436e56a2634f30edfa533e72d91 [file] [log] [blame]
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../color.html">
<link rel="import" href="../default-theme.html">
<link rel="import" href="../typography.html">
Material design: [Lists](
Shared styles for a native `button` to be used as an item in a `paper-listbox` element:
<style is="custom-style" include="paper-item-styles"></style>
<button class="paper-item" role="option">Inbox</button>
<button class="paper-item" role="option">Starred</button>
<button class="paper-item" role="option">Sent mail</button>
@group Paper Elements
@demo demo/index.html
<dom-module id="paper-item-styles">
:host, html {
--paper-item: {
display: block;
position: relative;
min-height: var(--paper-item-min-height, 48px);
padding: 0px 16px;
@apply --paper-font-subhead;
outline: none;
background: white;
width: 100%;
text-align: left;
.paper-item {
@apply --paper-item;
.paper-item[hidden] {
display: none !important;
.paper-item.iron-selected {
font-weight: var(--paper-item-selected-weight, bold);
@apply --paper-item-selected;
.paper-item[disabled] {
color: var(--paper-item-disabled-color, var(--disabled-text-color));
@apply --paper-item-disabled;
.paper-item:focus {
position: relative;
outline: 0;
@apply --paper-item-focused;
.paper-item:focus:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
@apply --paper-item-focused-before;