| <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; |
| } |
| |
| :host-context(:not([dark])):host([new-print-preview]) cr-icon-button { |
| --cr-icon-button-ripple-opacity: .5; |
| } |
| |
| :host-context([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> |
