diff --git a/demo/index.html b/demo/index.html index 528129f..85875ff 100644 --- a/demo/index.html +++ b/demo/index.html @@ -48,7 +48,9 @@ -
+
+ toggle drawer +
flip drawer diff --git a/paper-drawer-panel.html b/paper-drawer-panel.html index 8dc8b1e..1c53b17 100644 --- a/paper-drawer-panel.html +++ b/paper-drawer-panel.html @@ -174,27 +174,21 @@ position: absolute; top: 0; right: 0; + left: 0; bottom: 0; @apply(--paper-drawer-panel-main-container); } - .transition > #main { + .left-drawer.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 > ::content > [main] { - height: 100%; - } - + #main > ::content > [main], #drawer > ::content > [drawer] { height: 100%; } @@ -213,8 +207,9 @@ @apply(--paper-drawer-panel-scrim); } - .narrow-layout > #drawer { + #drawer { will-change: transform; + width: var(--paper-drawer-panel-drawer-container-width, 256px); } .narrow-layout > #drawer.iron-selected { @@ -229,12 +224,20 @@ border: 0; } - .left-drawer.narrow-layout > #drawer:not(.iron-selected) { + .left-drawer > #drawer:not(.iron-selected) { -webkit-transform: translateX(-100%); transform: translateX(-100%); } - .right-drawer.narrow-layout > #drawer:not(.iron-selected) { + .transition.left-drawer:not(.narrow-layout) > #main:not(.iron-selected) { + left: var(--paper-drawer-panel-drawer-container-width, 256px); + } + + .transition.right-drawer:not(.narrow-layout) > #main:not(.iron-selected) { + right: var(--paper-drawer-panel-drawer-container-width, 256px); + } + + .right-drawer > #drawer:not(.iron-selected) { left: auto; visibility: hidden; @@ -242,8 +245,8 @@ transform: translateX(100%); } - .right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected), - .right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) { + .right-drawer.dragging > #drawer:not(.iron-selected), + .right-drawer.peeking > #drawer:not(.iron-selected) { visibility: visible; } @@ -251,11 +254,6 @@ padding: 0; } - .right-drawer.narrow-layout > #main { - left: 0; - right: 0; - } - .narrow-layout > #main:not(.iron-selected) > #scrim, .dragging > #main > #scrim { visibility: visible; @@ -272,9 +270,10 @@ box-sizing: border-box; } - iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { + iron-selector:not(.narrow-layout) #main:not(.iron-selected) ::content [paper-drawer-toggle] { display: none; } + -
+
-
+
@@ -544,9 +543,9 @@ this.selected = 'main'; }, - ready: function() { + attached: function() { // Avoid transition at the beginning e.g. page loads and enable - // transitions only after the element is rendered and ready. + // transitions only after the element is rendered and attached. this._transition = true; }, @@ -567,22 +566,6 @@ }); }, - _computeDrawerStyle: function(drawerWidth) { - return 'width:' + drawerWidth + ';'; - }, - - _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { - var style = ''; - - style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; - - if (rightDrawer) { - style += 'right:' + (narrow ? '' : drawerWidth) + ';'; - } - - return style; - }, - _computeMediaQuery: function(forceNarrow, responsiveWidth) { return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; }, @@ -611,10 +594,8 @@ _responsiveChange: function(narrow) { this._setNarrow(narrow); - - if (this.narrow) { - this.selected = this.defaultSelected; - } + + this.selected = this.defaultSelected; this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); this.fire('paper-responsive-change', {narrow: this.narrow});