Extract modal dialog CSS (#14)

packages/file-handling/src/file-source.js

@@ -323,6 +323,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
         return css`
             ${commonStyles.getGeneralCSS()}
             ${commonStyles.getButtonCSS()}
+            ${commonStyles.getModalDialogCSS()}
 
             #dropArea {
                 border: var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black);
@@ -366,145 +367,6 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             .block {
                 margin-bottom: 10px;
             }
-
-            /**************************\\
-              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;
-            }
         `;
     }
 

common @ 73129048

-Subproject commit 63b49c3a2eeae312b4a2aeec4cc2f7f0ee12b749
+Subproject commit 7312904874df399f4bbb2ae6c6f700bce8c3129f