From 47ef0c517f59eddabaa1f347a24d9d4c67d63422 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Tue, 14 Jul 2020 09:43:20 +0200
Subject: [PATCH] Extract modal dialog CSS (#14)
---
packages/file-handling/src/file-source.js | 140 +---------------------
packages/file-handling/vendor/common | 2 +-
2 files changed, 2 insertions(+), 140 deletions(-)
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index d5031bed..2915e303 100644
--- a/packages/file-handling/src/file-source.js
+++ b/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;
- }
`;
}
diff --git a/packages/file-handling/vendor/common b/packages/file-handling/vendor/common
index 63b49c3a..73129048 160000
--- a/packages/file-handling/vendor/common
+++ b/packages/file-handling/vendor/common
@@ -1 +1 @@
-Subproject commit 63b49c3a2eeae312b4a2aeec4cc2f7f0ee12b749
+Subproject commit 7312904874df399f4bbb2ae6c6f700bce8c3129f
--
GitLab