adding dialog opacity and glow

GrapesJS · Dec 20, 2023 · 6e6f5c7 · 6e6f5c7
1 parent 9ef322b
commit 6e6f5c7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/modal_dialog/view/ModalView.ts b/src/modal_dialog/view/ModalView.ts
@@ -3,7 +3,7 @@ import Modal from '../model/Modal';
 
 export default class ModalView extends ModuleView<Modal> {
   template({ pfx, ppfx, content, title }: any) {
-    return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color">
+    return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color dialog-opacity">
       <div class="${pfx}header">
         <div class="${pfx}title">${title}</div>
         <div class="${pfx}btn-close" data-close-modal>&Cross;</div>

diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
@@ -537,3 +537,21 @@ $colorsAll: (one, var(--gjs-primary-color)),
 .cm-s-hopscotch span.cm-error {
     color: #ffffff;
 }
+
+.dialog-opacity {
+  -webkit-transition: opacity 300ms ease-out;  
+  -moz-transition: opacity 300ms ease-in-out; 
+  // background-color: #000 !important;
+  color: #fff !important;
+  opacity: 0.7 !important;
+
+  box-shadow: 0 0 8px 4px #41a7df,
+  0 0 20px 7px #ebecca,
+
+}
+
+.dialog-opacity:hover {
+  opacity: 0.9 !important;
+  -webkit-transition: opacity 300ms ease-out;  
+  -moz-transition: opacity 300ms ease-in-out;   
+}