| <link rel="import" href="../../html/polymer.html"> |
| |
| <link rel="import" href="../../html/assert.html"> |
| <link rel="import" href="../../html/util.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| |
| <dom-module id="cr-drawer"> |
| <template> |
| <style> |
| :host dialog { |
| --drawer-width: 256px; |
| --transition-timing: 200ms ease; |
| background-color: #fff; |
| border: none; |
| bottom: 0; |
| left: calc(-1 * var(--drawer-width)); |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| position: absolute; |
| top: 0; |
| transition: left var(--transition-timing); |
| width: var(--drawer-width); |
| } |
| |
| :host-context([dark]) dialog { |
| background: var(--google-grey-900) |
| linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); |
| } |
| |
| :host dialog, |
| #container { |
| height: 100%; |
| word-break: break-word; |
| } |
| |
| :host([show_]) dialog { |
| left: 0; |
| } |
| |
| :host([align=rtl]) dialog { |
| left: auto; |
| right: calc(-1 * var(--drawer-width)); |
| transition: right var(--transition-timing); |
| } |
| |
| :host([show_][align=rtl]) dialog { |
| right: 0; |
| } |
| |
| :host dialog::backdrop { |
| background: rgba(0, 0, 0, 0.5); |
| bottom: 0; |
| left: 0; |
| opacity: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| transition: opacity var(--transition-timing); |
| } |
| |
| :host([show_]) dialog::backdrop { |
| opacity: 1; |
| } |
| |
| .drawer-header { |
| align-items: center; |
| border-bottom: var(--cr-separator-line); |
| color: var(--cr-drawer-heading-color); |
| display: flex; |
| font-size: 123.08%; /* go to 16px from 13px */ |
| min-height: 56px; |
| outline: none; |
| padding-inline-start: 24px; |
| } |
| |
| :host-context([dark]) .drawer-header { |
| --cr-separator-color: rgba(255, 255, 255, .1); |
| } |
| |
| :host ::slotted(.drawer-content) { |
| height: calc(100% - 56px); |
| overflow: auto; |
| } |
| </style> |
| <dialog id="dialog" on-cancel="onDialogCancel_" on-tap="onDialogTap_" |
| on-close="onDialogClose_"> |
| <div id="container" on-tap="onContainerTap_"> |
| <div class="drawer-header" tabindex="-1">[[heading]]</div> |
| <slot></slot> |
| </div> |
| </dialog> |
| </template> |
| </dom-module> |
| <script src="cr_drawer.js"></script> |