<!-- @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 --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="iron-overlay-manager.html"> <!-- `iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a singleton. ### Styling The following custom properties and mixins are available for styling. Custom property | Description | Default -------------------------------------------|------------------------|--------- `--iron-overlay-backdrop-background-color` | Backdrop background color | #000 `--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6 `--iron-overlay-backdrop` | Mixin applied to `iron-overlay-backdrop`. | {} `--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-backdrop` when it is displayed | {} --> <dom-module id="iron-overlay-backdrop"> <style> :host { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--iron-overlay-backdrop-background-color, #000); opacity: 0; transition: opacity 0.2s; @apply(--iron-overlay-backdrop); } :host([opened]) { opacity: var(--iron-overlay-backdrop-opacity, 0.6); @apply(--iron-overlay-backdrop-opened); } </style> <template> <content></content> </template> </dom-module> <script> (function() { Polymer({ is: 'iron-overlay-backdrop', properties: { /** * Returns true if the backdrop is opened. */ opened: { readOnly: true, reflectToAttribute: true, type: Boolean, value: false }, _manager: { type: Object, value: Polymer.IronOverlayManager } }, /** * Appends the backdrop to document body and sets its `z-index` to be below the latest overlay. */ prepare: function() { if (!this.parentNode) { Polymer.dom(document.body).appendChild(this); this.style.zIndex = this._manager.currentOverlayZ() - 1; } }, /** * Shows the backdrop if needed. */ open: function() { // only need to make the backdrop visible if this is called by the first overlay with a backdrop if (this._manager.getBackdrops().length < 2) { this._setOpened(true); } }, /** * Hides the backdrop if needed. */ close: function() { // only need to make the backdrop invisible if this is called by the last overlay with a backdrop if (this._manager.getBackdrops().length < 2) { this._setOpened(false); } }, /** * Removes the backdrop from document body if needed. */ complete: function() { // only remove the backdrop if there are no more overlays with backdrops if (this._manager.getBackdrops().length === 0 && this.parentNode) { Polymer.dom(this.parentNode).removeChild(this); } } }); })(); </script>