Add function getModalDialogCSS (VPU/WebComponents/FileHandling#14)

packages/common/styles.js

@@ -705,3 +705,165 @@ export function getSelect2CSS() {
         }
     `;
 }
+
+export function getModalDialogCSS() {
+    // language=css
+    return css`
+        /**************************\\
+          Modal Styles
+        \\**************************/
+
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+        }
+
+        .modal-container {
+            background-color: #fff;
+            max-width: 600px;
+            max-height: 100vh;
+            min-width: 60%;
+            min-height: 50%;
+            overflow-y: auto;
+            box-sizing: border-box;
+            display: grid;
+            grid-template-columns: 50px auto;
+            grid-template-rows: auto;
+            grid-template-areas: "sidebar main";
+        }
+
+        .modal-nav {
+            cursor: pointer;
+            overflow: hidden;
+            background-color: #eee;
+        }
+
+        .modal-nav > div {
+            padding: 5px;
+            text-align: center;
+        }
+
+        .modal-nav .nav-icon {
+            width: 35px;
+            height: 35px;
+        }
+
+        .modal-nav .active {
+            background-color: #777;
+            color: white;
+        }
+
+        .modal-close {
+            position: absolute;
+            background: transparent;
+            border: none;
+            float: right;
+            top: 10px;
+            right: 10px;
+        }
+
+        .modal-close:hover {
+            font-weight: bold;
+        }
+
+        button.modal-close:focus {
+            outline: none;
+        }
+
+        .modal-close:before {
+            content: "\\2715";
+        }
+
+        .modal-content {
+            padding: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /*height: 50vh;*/
+        }
+
+        .modal-content .source-main {
+            /*flex-grow: 1;*/
+            /*justify-content: center;*/
+            /*align-items: center;*/
+            height: 100%;
+            width: 100%;
+        }
+
+        /**************************\\
+          Modal Animation Style
+        \\**************************/
+        @keyframes mmfadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes mmfadeOut {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+            }
+        }
+
+        @keyframes mmslideIn {
+            from {
+                transform: translateY(15%);
+            }
+            to {
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes mmslideOut {
+            from {
+                transform: translateY(0);
+            }
+            to {
+                transform: translateY(-10%);
+            }
+        }
+
+        .micromodal-slide {
+            display: none;
+        }
+
+        .micromodal-slide.is-open {
+            display: block;
+        }
+
+        .micromodal-slide[aria-hidden="false"] .modal-overlay {
+            animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+        }
+
+        .micromodal-slide[aria-hidden="false"] .modal-container {
+            animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
+        }
+
+        .micromodal-slide[aria-hidden="true"] .modal-overlay {
+            animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+        }
+
+        .micromodal-slide[aria-hidden="true"] .modal-container {
+            animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
+        }
+
+        .micromodal-slide .modal-container,
+        .micromodal-slide .modal-overlay {
+            will-change: transform;
+        }
+    `;
+}