| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> |
| |
| <dom-module id="viewer-page-selector"> |
| <template> |
| <style> |
| :host { |
| color: #fff; |
| font-size: 0.81rem; |
| } |
| |
| :host ::selection { |
| background: rgba(255, 255, 255, 0.3); |
| } |
| |
| #pageselector { |
| --cr-input-focus-color: transparent; |
| --cr-input-container: { |
| overflow: initial; |
| } |
| --cr-input-error-display: none; |
| --cr-input-background-color: transparent; |
| --cr-input-color: white; |
| --cr-input-input: { |
| -webkit-margin-start: -3px; |
| -webkit-padding-end: 3px; |
| -webkit-padding-start: 3px; |
| padding-bottom: 0; |
| padding-top: 0; |
| text-align: end; |
| caret-color: #fff; |
| border-radius: 2px; |
| box-sizing: content-box; |
| } |
| -webkit-margin-start: -3px; |
| height: 100%; |
| width: 1ch; |
| } |
| |
| #pageselector[focused_], |
| #pageselector:hover { |
| --cr-input-background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| #slash { |
| padding: 0 3px; |
| } |
| |
| #pagelength-spacer { |
| -webkit-margin-start: -2px; |
| text-align: start; |
| } |
| |
| #pageselector, |
| #slash, |
| #pagelength-spacer { |
| display: inline-block; |
| } |
| </style> |
| <cr-input id="pageselector" value="[[pageNo]]" on-mouseup="select" |
| on-value-changed="onInputValueChange_" on-change="pageNoCommitted" |
| aria-label$="{{strings.labelPageNumber}}"> |
| </cr-input> |
| <span id="slash"> / </span> |
| <span id="pagelength-spacer"> |
| <span id="pagelength">{{docLength}}</span> |
| </span> |
| </template> |
| <script src="viewer-page-selector.js"></script> |
| </dom-module> |