| <style> | |
| :host { | |
| display: inline-block; | |
| position: relative; | |
| text-align: start; | |
| --dropdown-width: 260px; | |
| } | |
| :host-context([hidden]) { | |
| display: none; | |
| } | |
| :host([dropdown-centered]) { | |
| --container-offset: calc(50% - var(--dropdown-width) / 2); | |
| } | |
| #container { | |
| position: absolute; | |
| right: var(--container-offset, 0); | |
| } | |
| :host-context([dir=rtl]) #container { | |
| left: var(--container-offset, 0); | |
| right: auto; | |
| } | |
| #dropdown { | |
| background-color: var(--cr-menu-background-color); | |
| border-radius: 4px; | |
| box-shadow: var(--cr-menu-shadow); | |
| color: var(--cr-primary-text-color); | |
| overflow-y: hidden; | |
| padding-bottom: 2px; | |
| width: var(--dropdown-width); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| #dropdown { | |
| background-image: linear-gradient(var(--cr-menu-background-sheen), | |
| var(--cr-menu-background-sheen)); | |
| } | |
| } | |
| #scroll-container { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| padding: 6px 0 4px 0; | |
| } | |
| #button { | |
| --cr-icon-button-fill-color: currentColor; | |
| --cr-icon-button-height: 32px; | |
| --cr-icon-button-icon-start-offset: 4px; | |
| --cr-icon-button-width: 48px; | |
| margin: 0; | |
| } | |
| #button:hover { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| opacity: 1; | |
| } | |
| :host([selected]) #button { | |
| opacity: 1; | |
| } | |
| :host([dropdown-open]) #button { | |
| background-color: var(--active-button-bg); | |
| } | |
| h1 { | |
| border-bottom: var(--cr-separator-line); | |
| font-size: 0.87rem; | |
| font-weight: 500; | |
| margin: 0; | |
| padding: 14px 28px; | |
| } | |
| </style> | |
| <cr-icon-button on-click="toggleDropdown" id="button" | |
| iron-icon="[[dropdownIcon_]],cr:arrow-drop-down" title$="[[header]]"> | |
| </cr-icon-button> | |
| <div id="container"> | |
| <div id="dropdown" style="display: none"> | |
| <template is="dom-if" if="[[!hideHeader]]"> | |
| <h1>[[header]]</h1> | |
| </template> | |
| <div id="scroll-container"> | |
| <slot></slot> | |
| </div> | |
| </div> | |
| </div> |