third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.css ('k') | third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html b/third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html

index 4497e50f507fe694d14b89c55570e69779b2c848..d7ea76be24630fd930c46adc7f8b3fa99363f473 100644

--- a/third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html

+++ b/third_party/polymer/v0_8/components-chromium/paper-drawer-panel/paper-drawer-panel.html

@@ -65,171 +65,48 @@ Example:

</paper-header-panel>

</paper-drawer-panel>

-To position the drawer to the right, add `rightDrawer` attribute.

+To position the drawer to the right, add `right-drawer` attribute.

- <paper-drawer-panel rightDrawer>

+ <paper-drawer-panel right-drawer>

<div drawer> Drawer panel... </div>

<div main> Main panel... </div>

</paper-drawer-panel>

-@group Polymer Elements

+Styling paper-drawer-panel:

+To change the main container:

+ paper-drawer-panel {

+ --paper-drawer-panel-main-container: {

+ background-color: gray;

+ };

+ }

+To change the drawer container when it's in the left side:

+ paper-drawer-panel {

+ --paper-drawer-panel-left-drawer-container: {

+ background-color: white;

+ };

+ }

+To change the drawer container when it's in the right side:

+ paper-drawer-panel {

+ --paper-drawer-panel-right-drawer-container: {

+ background-color: white;

+ };

+ }

+@group Paper elements

@element paper-drawer-panel

-@homepage github.io

+@demo demo/index.html

+@hero hero.svg

-->

</head><body><dom-module id="paper-drawer-panel">

- <style>

- :host {

- display: block;

- position: absolute;

- top: 0;

- left: 0;

- width: 100%;

- height: 100%;

- overflow: hidden;

- }

- iron-selector > #drawer {

- position: absolute;

- top: 0;

- left: 0;

- height: 100%;

- will-change: transform;

- box-sizing: border-box;

- -moz-box-sizing: border-box;

- }

- .transition > #drawer {

- transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;

- transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;

- }

- /*

- right-drawer: make drawer on the right side

- */

- .right-drawer > #drawer {

- left: auto;

- right: 0;

- }

- paper-drawer-panel #drawer > * {

- position: absolute;

- top: 0;

- left: 0;

- width: 100%;

- height: 100%;

- box-sizing: border-box;

- -moz-box-sizing: border-box;

- }

- iron-selector > #main {

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- }

- .transition > #main {

- transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;

- }

- .right-drawer > #main {

- left: 0;

- }

- .right-drawer.transition > #main {

- transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;

- }

- #main > [main] {

- height: 100%;

- }

- #scrim {

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- background-color: rgba(0, 0, 0, 0.3);

- visibility: hidden;

- opacity: 0;

- transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;

- }

- #edgeSwipeOverlay {

- position: absolute;

- top: 0;

- bottom: 0;

- left: 0;

- width: 20px;

- }

- .right-drawer > #main > #edgeSwipeOverlay {

- right: 0;

- left: auto;

- }

- /*

- narrow layout

- */

- .narrow-layout > #drawer.iron-selected {

- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);

- }

- .right-drawer.narrow-layout > #drawer.iron-selected {

- box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);

- }

- .narrow-layout > #drawer > ::content[select="[drawer]"] > * {

- border: 0;

- }

- .narrow-layout > #drawer:not(.iron-selected) {

- -webkit-transform: translateX(-100%);

- transform: translateX(-100%);

- }

- .right-drawer.narrow-layout > #drawer:not(.iron-selected) {

- left: auto;

- -webkit-transform: translateX(100%);

- transform: translateX(100%);

- }

- .narrow-layout > #main {

- left: 0 !important;

- padding: 0;

- }

- .right-drawer.narrow-layout > #main {

- left: 0;

- right: 0;

- padding: 0;

- }

- .narrow-layout > #main:not(.iron-selected) > #scrim,

- .dragging #scrim {

- visibility: visible;

- opacity: 1;

- }

- .narrow-layout > #main > * {

- margin: 0;

- min-height: 100%;

- left: 0;

- right: 0;

- box-sizing: border-box;

- -moz-box-sizing: border-box;

- }

- iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {

- display: none;

- }

- </style>

+ <link rel="import" type="css" href="paper-drawer-panel.css">

- <iron-media-query on-query-matches-changed="onQueryMatchesChanged" query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">

+ <iron-media-query id="mq" on-query-matches-changed="_onQueryMatchesChanged" query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">

</iron-media-query>

<iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]" activate-event="" selected="[[selected]]">

@@ -237,8 +114,6 @@ To position the drawer to the right, add `rightDrawer` attribute.

- <div id="edgeSwipeOverlay" hidden$="[[_computeSwipeOverlayHidden(narrow, disableEdgeSwipe)]]">

- </div>

</div>