Updated modal

Author: djthorpe

example/index.html

@@ -135,6 +135,18 @@ <h1>Icons</h1>
 
   <!-- toast which persists on the screen for 10 seconds -->
   <js-toast id="toast" duration="10"></js-toast>
+
+  <!-- Modal Dialog -->
+  <js-modal id="modal" visible toggle="js-button">
+    <js-nav vertical>
+      <js-navitem texttransform="uppercase">Home</js-navitem>
+      <js-navspacer></js-navspacer>
+      <js-navitem disabled>
+        <js-close></js-close>
+      </js-navitem>
+    </js-nav>
+  </js-modal>
+
 </body>
 
 </html>

src/index.js

@@ -2,6 +2,7 @@
 import './core/core';
 import './element/element';
 import './canvas/canvas';
+import './modal/modal';
 import './mapbox/mapbox';
 
 // Styles

src/modal/ModalElement.js

@@ -0,0 +1,90 @@
+import {
+  LitElement, html, css, nothing,
+} from 'lit';
+
+/**
+ * @class ModalElement
+ *
+ * This class provides a modal content container which is initially hidden
+ *
+ * @example
+ * <js-modal select="#button">OK</js-modal>
+ */
+export class ModalElement extends LitElement {
+  static get localName() {
+    return 'js-modal';
+  }
+
+  static get properties() {
+    return {
+      visible: { type: Boolean, reflect: true },
+      select: { type: String, reflect: true },
+    };
+  }
+
+  static get styles() {
+    return css`
+      div {
+        position: fixed; 
+        left: 0; 
+        top: 0;
+        right: 0;
+        bottom: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        transition: visibility var(--modal-fade-delay), opacity var(--modal-fade-delay); 
+      }
+      .visible {
+          display: block;
+          visibility: visible;
+      }
+      .canvas {
+        background-color: var(--modal-background-color-canvas);
+        opacity: 0;
+        &.visible {
+          opacity: var(--modal-opacity-canvas);
+        }
+      }
+      .content {
+        background-color: var(--modal-background-color);
+        margin: var(--modal-margin);
+        border: var(--modal-border);
+        border-radius: var(--modal-border-radius);        
+      }
+      .wrapper {
+        display: flex;
+        position: relative;             
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+      }        
+    `;
+  }
+
+  render() {
+    return html`
+      <div class=${this.canvasClasses.join(' ') || nothing}></div>
+      <div class=${this.contentClasses.join(' ') || nothing}">
+        <div class="wrapper"><slot></slot></div>
+      </div>
+    `;
+  }
+
+  get canvasClasses() {
+    const classes = [];
+    classes.push('canvas');
+    if (this.visible) {
+      classes.push('visible');
+    }
+    return classes;
+  }
+
+  get contentClasses() {
+    const classes = [];
+    classes.push('content');
+    if (this.visible) {
+      classes.push('visible');
+    }
+    return classes;
+  }
+}

src/modal/modal.js

@@ -0,0 +1,5 @@
+// Elements
+import { ModalElement } from './ModalElement';
+
+// Define Web Components
+customElements.define(ModalElement.localName, ModalElement); // js-modal

src/tokens.css

@@ -241,3 +241,14 @@
   --nav-item-border: 0.2rem solid transparent;
   --nav-item-border-hover: 0.2rem solid white;
 }
+
+/* modals */
+:root {
+  --modal-background-color-canvas: var(--black-color);
+  --modal-background-color: var(--white-color);
+  --modal-opacity-canvas: 0.3;
+  --modal-fadein-delay: 0.5s;
+  --modal-margin: 20vh 20vh;
+  --modal-border-radius: 0.2rem;
+  --modal-border: 0.05rem solid var(--black-color);
+}