third_party/polymer/v1_0/components-chromium/iron-overlay-behavior/iron-overlay-backdrop.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="iron-overlay-manager.html">
  11
  12 <!--
  13 `iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a
  14 singleton.
  15
  16 ### Styling
  17
  18 The following custom properties and mixins are available for styling.
  19
  20 Custom property | Description | Default
  21 -------------------------------------------|------------------------|---------
  22 `--iron-overlay-backdrop-background-color` | Backdrop background color                                     | #000
  23 `--iron-overlay-backdrop-opacity`          | Backdrop opacity                                              | 0.6
  24 `--iron-overlay-backdrop`                  | Mixin applied to `iron-overlay-backdrop`.                      | {}
  25 `--iron-overlay-backdrop-opened`           | Mixin applied to `iron-overlay-backdrop` when it is displayed | {}
  26 -->
  27
  28 </head><body><dom-module id="iron-overlay-backdrop">
  29
  30   <style>
  31
  32     :host {
  33       position: fixed;
  34       top: 0;
  35       left: 0;
  36       width: 100vw;
  37       height: 100vh;
  38       background-color: var(--iron-overlay-backdrop-background-color, #000);
  39       opacity: 0;
  40       transition: opacity 0.2s;
  41
  42       @apply(--iron-overlay-backdrop);
  43     }
  44
  45     :host([opened]) {
  46       opacity: var(--iron-overlay-backdrop-opacity, 0.6);
  47
  48       @apply(--iron-overlay-backdrop-opened);
  49     }
  50
  51   </style>
  52
  53   <template>
  54     <content></content>
  55   </template>
  56
  57 </dom-module>
  58
  59 <script src="iron-overlay-backdrop-extracted.js"></script></body></html>