From cd96389b8aa8a5d806588434b6569e992447cf1a Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Tue, 14 Jul 2020 12:00:37 +0200
Subject: [PATCH] Add function getModalDialogCSS
(VPU/WebComponents/FileHandling#14)
---
packages/common/styles.js | 162 ++++++++++++++++++++++++++++++++++++++
1 file changed, 162 insertions(+)
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 28cb8a36..cc7a48f5 100644
--- a/packages/common/styles.js
+++ b/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;
+ }
+ `;
+}
--
GitLab