| <link rel="import" href="../../html/polymer.html"> |
| |
| <link rel="import" href="../cr_icons_css.html"> |
| <link rel="import" href="../icons.html"> |
| <link rel="import" href="../paper_button_style_css.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| |
| <dom-module id="cr-toolbar-selection-overlay"> |
| <template> |
| <style include="cr-icons paper-button-style"> |
| :host { |
| background-color: white; |
| border-bottom: 1px solid var(--google-grey-300); |
| bottom: 0; |
| color: var(--google-grey-900); |
| display: flex; |
| left: 0; |
| opacity: 0; |
| padding-inline-start: var(--cr-toolbar-field-margin, 0); |
| pointer-events: none; |
| position: absolute; |
| right: 0; |
| top: 0; |
| transition: opacity var(--cr-toolbar-overlay-animation-duration), |
| visibility var(--cr-toolbar-overlay-animation-duration); |
| visibility: hidden; |
| } |
| |
| :host-context([dark]) { |
| background-color: var(--google-grey-900); |
| background-image: linear-gradient(rgba(255, 255, 255, .04), |
| rgba(255, 255, 255, .04)); |
| border-bottom-color: var(--cr-separator-color); |
| color: var(--cr-secondary-text-color); |
| } |
| |
| :host([show]) { |
| opacity: 1; |
| pointer-events: initial; |
| visibility: initial; |
| } |
| |
| #overlay-content { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| margin: 0 auto; |
| max-width: var(--selection-overlay-max-width, initial); |
| padding: 0 var(--selection-overlay-padding, 24px); |
| } |
| |
| paper-button { |
| margin-inline-start: 8px; |
| } |
| |
| #number-selected { |
| flex: 1; |
| } |
| |
| paper-icon-button-light { |
| height: 36px; |
| margin-inline-end: 24px; |
| margin-inline-start: 2px; |
| width: 36px; |
| } |
| |
| button iron-icon { |
| height: 20px; |
| width: 20px; |
| } |
| </style> |
| <template is="dom-if" if="[[hasShown_]]"> |
| <div id="overlay-content"> |
| <paper-icon-button-light> |
| <button on-tap="onClearSelectionTap_" title="[[cancelLabel]]"> |
| <iron-icon icon="cr:clear"></iron-icon> |
| </button> |
| </paper-icon-button-light> |
| <div id="number-selected">[[selectionLabel_]]</div> |
| <paper-button on-tap="onClearSelectionTap_"> |
| [[cancelLabel]] |
| </paper-button> |
| <paper-button id="delete" on-tap="onDeleteTap_" |
| disabled="[[deleteDisabled]]"> |
| [[deleteLabel]] |
| </paper-button> |
| </div> |
| </template> |
| </template> |
| <script src="cr_toolbar_selection_overlay.js"></script> |
| </dom-module> |