BREAKING CHANGE mg modal use opened class to toggle visibility like mg dropdown

Author: medevod

src/plugins/mgModal.ts

@@ -6,7 +6,7 @@ export function registerModals() {
   function setupModal(el: Element) {
     // Function to handle modal removal
     function removeModalHandler() {
-      modal?.classList.remove("mg-show");
+      modal?.classList.remove("opened");
     }
 
     // Select the modal and close button elements
@@ -16,7 +16,7 @@ export function registerModals() {
 
     // Add event listener to the element to show modal on click
     el.addEventListener("click", function (_: Event) {
-      modal?.classList.add("mg-show");
+      modal?.classList.add("opened");
     });
 
     // Add event listener to the close button to remove modal on click

src/scss/extensions/mg-modal.scss

@@ -21,6 +21,11 @@
   background: rgb(0 0 0 / 70%);
   transition: opacity 0.3s;
 
+  &.opened {
+    opacity: 1;
+    visibility: visible;
+  }
+
   &>.mg-modal--content {
     background-color: $color-initial;
     border-radius: $control-radius;
@@ -64,19 +69,19 @@
     margin-left: -1rem;
   }
 
-  &.mg-show.mg-right>.mg-modal--content {
+  &.opened.mg-right>.mg-modal--content {
     transform: translateX(-100vw);
   }
 
-  &.mg-show.mg-left>.mg-modal--content {
+  &.opened.mg-left>.mg-modal--content {
     transform: translateX(100vw);
   }
 
-  &.mg-show.mg-top>.mg-modal--content {
+  &.opened.mg-top>.mg-modal--content {
     transform: translateY(100vh);
   }
 
-  &.mg-show.mg-bottom>.mg-modal--content {
+  &.opened.mg-bottom>.mg-modal--content {
     transform: translateY(-100vh);
   }
 }