blob: 8d66c290623339254b9eb7d1cc8778d378f80d0b [file] [log] [blame]
<link rel="import" href="../../html/polymer.html">
<link rel="import" href="../../html/assert.html">
<link rel="import" href="../../html/cr/ui/focus_without_ink.html">
<link rel="import" href="../../html/util.html">
<link rel="import" href="../shared_vars_css.html">
<dom-module id="cr-action-menu">
<template>
<style>
:host dialog {
background-color: var(--cr-menu-background-color);
border: none;
border-radius: 4px;
box-shadow: var(--cr-menu-shadow);
margin: 0;
min-width: 128px;
outline: none;
padding: 0;
@apply --cr-action-menu-dialog;
}
:host dialog::backdrop {
background-color: transparent;
}
:host ::slotted(.dropdown-item) {
background: none;
border: none;
border-radius: 0;
box-sizing: border-box;
color: var(--cr-primary-text-color);
font: inherit;
min-height: 32px;
padding: 0 24px;
text-align: start;
user-select: none;
width: 100%;
}
:host ::slotted(.dropdown-item:not([hidden])) {
align-items: center;
display: flex;
}
:host ::slotted(.dropdown-item[disabled]) {
opacity: var(--cr-action-menu-disabled-item-opacity, 0.65);
}
:host ::slotted(.dropdown-item:not([disabled])) {
@apply --cr-actionable;
}
:host ::slotted(.dropdown-item:focus) {
background-color: var(--cr-menu-background-focus-color);
outline: none;
}
.item-wrapper {
background: var(--cr-menu-background-sheen);
outline: none;
padding: 8px 0;
}
</style>
<dialog id="dialog" tabindex="0" on-close="onNativeDialogClose_" role="menu"
aria-label$="[[ariaLabel]]">
<div class="item-wrapper" tabindex="-1">
<slot id="contentNode"></slot>
</div>
</dialog>
</template>
<script src="cr_action_menu.js"></script>
</dom-module>