Cannot use paper-dialog with-backdrop inside app-drawer-layout

[coreyfarrell]

Description

z-index css added to app-drawer-layout/app-drawer-layout.html by #390 is a breaking change.

Expected outcome

When paper-dialog is used with-backdrop inside app-drawer-layout, the dialog should appear above the backdrop.

Actual outcome

When the dialog is opened it creates body>iron-overlay-backdrop with a z-index of 102, sets z-index: 103 for the dialog. The paper-dialog is below iron-overlay-backdrop because of app-drawer-layout having z-index less than 102.

Live Demo

I'm unsure how to publish a demo using 2.0-preview. If it's needed and someone tells me how I can make a simple demo.

Steps to reproduce

1. Add <paper-dialog with-backdrop> inside app-drawer-layout
2. Open the dialog.
3. Observe that the dialog is below the backdrop, dialog buttons cannot be clicked.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[keanulee]

Dialogs inside app-drawer-layout are not supported and not recommended. See #295.