blob: 632001dd749f8360d04c3d214f6f3fd7bb6ab3f2 [file] [log] [blame]
<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>