diff options
Diffstat (limited to 'chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html')
-rw-r--r-- | chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html new file mode 100644 index 00000000000..000d098cfb3 --- /dev/null +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html @@ -0,0 +1,85 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html"> + +<dom-module id="viewer-zoom-button"> + <template> + <style> + :host { + --translate-x-distance: 132px; + } + + :host([new-print-preview]) { + --translate-x-distance: 96px; + } + + #wrapper { + transition: transform 250ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + :host([closed_]) #wrapper { + /* 132px roughly flips the location of the button across the right edge + * of the page. */ + transform: translateX(var(--translate-x-distance)); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + } + + :host([show-on-left][closed_]) #wrapper { + transform: translateX(calc(-1 * var(--translate-x-distance))); + } + + cr-icon-button { + --cr-icon-button-size: 36px; + --cr-icon-button-icon-size: 20px; + background-color: rgb(242, 242, 242); + border-radius: 50%; + color: var(--paper-grey-700); + overflow: visible; + @apply --shadow-elevation-2dp; + } + + :host(:not([new-print-preview])) cr-icon-button { + --cr-icon-button-ripple-opacity: .4; + } + + cr-icon-button([disabled]) { + box-shadow: none; + } + + :host([new-print-preview]) cr-icon-button { + --cr-icon-button-size: 32px; + background-color: var(--google-grey-600); + color: white; + } + + @media (prefers-color-scheme: light) { + :host([new-print-preview]) cr-icon-button { + --cr-icon-button-ripple-opacity: .5; + } + } + + @media (prefers-color-scheme: dark) { + :host([new-print-preview]) cr-icon-button { + background-color: var(--google-grey-900); + color: var(--google-grey-200); + } + } + + :host([keyboard-navigation-active]) cr-icon-button:focus { + @apply --shadow-elevation-6dp; + } + + cr-icon-button:active { + @apply --shadow-elevation-8dp; + } + </style> + <div id="wrapper"> + <cr-icon-button iron-icon="[[visibleIcon_]]" on-click="fireClick_" + aria-label$="[[visibleTooltip_]]" title="[[visibleTooltip_]]"> + </cr-icon-button> + </div> + </template> + <script src="viewer-zoom-button.js"></script> +</dom-module> |