blob: ab6a4d461ca5f31847ed80f72c9aa13f5f85a8cc [file] [log] [blame]
<style include="cr-hidden-style">
:host {
--button-position-offset: 48px;
bottom: 0;
padding: 48px 0;
position: fixed;
right: 0;
user-select: none;
z-index: 3;
}
:host-context([is-print-preview]) {
--button-position-offset: 24px;
}
:host-context([is-print-preview][dir='ltr']),
:host-context([dir='rtl']) {
left: 0;
right: auto;
}
:host-context([is-print-preview][dir='rtl']) {
left: auto;
right: 0;
}
#zoom-buttons {
position: relative;
right: var(--button-position-offset);
}
:host-context([is-print-preview][dir='ltr']) #zoom-buttons,
:host-context([dir='rtl']) #zoom-buttons {
left: var(--button-position-offset);
right: auto;
}
:host-context([is-print-preview][dir='rtl']) #zoom-buttons {
left: auto;
right: var(--button-position-offset);
}
viewer-zoom-button {
display: block;
}
/*
* A larger gap between the fit button and the two-up view button
* and above the bottom two zoom buttons.
*/
#two-up-view-button,
#zoom-in-button {
margin-top: 24px;
}
/* A small gap between the zoom in/zoom out buttons. */
#zoom-out-button {
margin-top: 10px;
}
</style>
<div id="zoom-buttons">
<viewer-zoom-button id="fit-button" on-fabclick="fitToggle"
delay="[[fitButtonDelay_]]"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
icons="pdf:fullscreen-exit cr:fullscreen">
</viewer-zoom-button>
<!-- TODO(crbug.com/51472): Change icons for two-up-view-button -->
<!-- once they are finalized. -->
<viewer-zoom-button id="two-up-view-button" delay="100"
disabled="[[annotationMode]]" hidden$="[[!twoUpViewEnabled]]"
on-fabclick="twoUpViewToggle_"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
icons="pdf:create pdf:eraser"></viewer-zoom-button>
<viewer-zoom-button id="zoom-in-button" icons="pdf:add"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
<viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
</div>