All files / src/layout Mask.ts

100% Statements 32/32
100% Branches 1/1
50% Functions 1/2
100% Lines 32/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3392x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x  
import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';
 
export class Mask extends LitElement {
  static styles = css`
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
    }
 
    .show {
      display: flex;
    }
  `;
 
  @property({ type: Boolean })
  show = false;
 
  render() {
    return html` <div class="mask  ${this.show ? 'show' : ''}">
      <slot></slot>
    </div>`;
  }
}