blob: 97e1002cb595de25b56c352e797289020ffa8d31 [file] [log] [blame]
<style include="cr-hidden-style">
:host {
--button-position-offset: 24px;
bottom: 0;
left: 0;
padding: 48px 0;
position: fixed;
right: auto;
user-select: none;
z-index: 3;
}
:host-context([dir='rtl']) {
left: auto;
right: 0;
}
#zoom-buttons {
left: var(--button-position-offset);
opacity: 1;
position: relative;
right: auto;
transition: opacity 250ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:host-context([dir='rtl']) #zoom-buttons {
left: auto;
right: var(--button-position-offset);
}
:host(:not([visible_])) #zoom-buttons {
opacity: 0;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
viewer-zoom-button {
display: block;
}
/* A larger gap between the fit button and the bottom two zoom buttons. */
#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="fitButton" on-fabclick="fitToggle"
tooltips="$i18n{tooltipFitToPage},$i18n{tooltipFitToWidth}"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
icons="pdf:fullscreen-exit cr:fullscreen">
</viewer-zoom-button>
<viewer-zoom-button id="zoom-in-button" icons="pdf:add"
tooltips="$i18n{tooltipZoomIn}"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
on-fabclick="zoomIn"></viewer-zoom-button>
<viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
tooltips="$i18n{tooltipZoomOut}"
keyboard-navigation-active="[[keyboardNavigationActive_]]"
on-fabclick="zoomOut"></viewer-zoom-button>
</div>