| <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> |