| <style> |
| :host(:focus) { |
| outline: none; |
| } |
| |
| #thumbnails { |
| box-sizing: border-box; |
| height: 100%; |
| overflow: auto; |
| padding-bottom: 24px; |
| padding-inline-end: var(--viewer-thumbnail-bar-padding-inline-end); |
| text-align: center; |
| } |
| |
| viewer-thumbnail { |
| padding-top: 24px; |
| } |
| </style> |
| <div id="thumbnails" hidden$="[[!isPluginActive_]]" role="tablist"> |
| <template is="dom-repeat" items="[[pageNumbers_]]" |
| on-dom-change="onDomChange_"> |
| <viewer-thumbnail tabindex="0" role="tab" |
| aria-label$="[[getAriaLabel_(item)]]" |
| aria-selected="[[isActivePage_(item, activePage)]]", |
| clockwise-rotations="[[clockwiseRotations]]" |
| is-active="[[isActivePage_(item, activePage)]]" page-number="[[item]]"> |
| </viewer-thumbnail> |
| </template> |
| </div> |
