| Index: third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| deleted file mode 100644
|
| index 485e86829236121c133a75397b421d0ba3c71d46..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
|
| +++ /dev/null
|
| @@ -1,146 +0,0 @@
|
| -<!--
|
| -@license
|
| -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| -Code distributed by Google as part of the polymer project is also
|
| -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| ---><html><head><link rel="import" href="../../polymer/polymer.html">
|
| -<link rel="import" href="../../iron-media-query/iron-media-query.html">
|
| -<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
|
| -<link rel="import" href="../app-drawer/app-drawer.html">
|
| -
|
| -<!--
|
| -app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
|
| -the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
|
| -In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
|
| -in/out to hide/reveal the main content.
|
| -
|
| -By default the drawer is aligned to the start, which is left in LTR layouts:
|
| -
|
| -```html
|
| -<app-drawer-layout>
|
| - <app-drawer>
|
| - drawer content
|
| - </app-drawer>
|
| - <div>
|
| - main content
|
| - </div>
|
| -</app-drawer-layout>
|
| -```
|
| -
|
| -Align the drawer at the end:
|
| -
|
| -```html
|
| -<app-drawer-layout>
|
| - <app-drawer align="end">
|
| - drawer content
|
| - </app-drawer>
|
| - <div>
|
| - main content
|
| - </div>
|
| -</app-drawer-layout>
|
| -```
|
| -
|
| -With an app-header-layout:
|
| -
|
| -```html
|
| -<app-drawer-layout>
|
| - <app-drawer>
|
| - drawer-content
|
| - </app-drawer>
|
| - <app-header-layout>
|
| - <app-header>
|
| - <app-toolbar>
|
| - <div title>App name</div>
|
| - </app-toolbar>
|
| - </app-header>
|
| -
|
| - main content
|
| -
|
| - </app-header-layout>
|
| -</app-drawer-layout>
|
| -```
|
| -
|
| -Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on tap events:
|
| -
|
| -```html
|
| -<app-drawer-layout>
|
| - <app-drawer>
|
| - drawer-content
|
| - </app-drawer>
|
| - <app-header-layout>
|
| - <app-header>
|
| - <app-toolbar>
|
| - <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
| - <div title>App name</div>
|
| - </app-toolbar>
|
| - </app-header>
|
| -
|
| - main content
|
| -
|
| - </app-header-layout>
|
| -</app-drawer-layout>
|
| -```
|
| -
|
| -Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
|
| -
|
| -```html
|
| -<app-drawer-layout fullbleed>
|
| - <app-drawer>
|
| - drawer content
|
| - </app-drawer>
|
| - <div>
|
| - main content
|
| - </div>
|
| -</app-drawer-layout>
|
| -```
|
| -
|
| -### Styling
|
| -
|
| -Custom property | Description | Default
|
| ------------------------------------------|--------------------------------------|---------
|
| -`--app-drawer-layout-content-transition` | Transition for the content container | none
|
| -
|
| -@group App Elements
|
| -@element app-drawer-layout
|
| -@demo app-drawer-layout/demo/simple-drawer.html Simple Demo
|
| -@demo app-drawer-layout/demo/two-drawers.html Two drawers
|
| --->
|
| -
|
| -</head><body><dom-module id="app-drawer-layout">
|
| - <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| - }
|
| -
|
| - :host([fullbleed]) {
|
| - @apply(--layout-fit);
|
| - }
|
| -
|
| - #contentContainer {
|
| - position: relative;
|
| -
|
| - height: 100%;
|
| -
|
| - transition: var(--app-drawer-layout-content-transition, none);
|
| - }
|
| -
|
| - #contentContainer:not(.narrow) > ::content [drawer-toggle] {
|
| - display: none;
|
| - }
|
| - </style>
|
| -
|
| - <div id="contentContainer">
|
| - <content select=":not(app-drawer)"></content>
|
| - </div>
|
| -
|
| - <content id="drawerContent" select="app-drawer"></content>
|
| -
|
| - <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]" on-query-matches-changed="_onQueryMatchesChanged"></iron-media-query>
|
| - </template>
|
| -
|
| - </dom-module>
|
| -<script src="app-drawer-layout-extracted.js"></script></body></html>
|
|
|