diff options
Diffstat (limited to 'chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html')
-rw-r--r-- | chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html new file mode 100644 index 00000000000..1ebf0df604f --- /dev/null +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html @@ -0,0 +1,109 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> + +<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html"> +<link rel="import" href="chrome://resources/cr_elements/icons.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> + +<dom-module id="viewer-toolbar-dropdown"> + <template> + <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; + color: var(--cr-primary-text-color); + overflow-y: hidden; + padding-bottom: 2px; + width: var(--dropdown-width); + } + + @media (prefers-color-scheme: light) { + #dropdown { + @apply --shadow-elevation-2dp; + } + } + + @media (prefers-color-scheme: dark) { + #dropdown { + background-image: linear-gradient(var(--cr-menu-background-sheen), + var(--cr-menu-background-sheen)); + box-shadow: var(--cr-menu-shadow); + } + } + + #scroll-container { + max-height: 300px; + overflow-y: auto; + padding: 6px 0 4px 0; + } + + #button { + --cr-icon-button-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: rgba(255, 255, 255, 0.24); + } + + 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> + </template> + <script src="viewer-toolbar-dropdown.js"></script> +</dom-module> |