fix(modal): adjust scroll classes (#132)

oruga-ui · Jul 17, 2024 · 47e52ea · 47e52ea
1 parent 9460840
commit 47e52ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
@@ -41,11 +41,6 @@
 // $modal-scale-transform:             scale(1.02);
 /* @bootstrap docs */
 
-html.modal-open {
-  overflow: hidden;
-  padding-right: 1rem;
-}
-
 .modal {
   display: flex;
 

diff --git a/src/assets/scss/utils/_utility.scss b/src/assets/scss/utils/_utility.scss
@@ -16,7 +16,24 @@
   }
 }
 
-// Utlity classes
+// global scroll classes
+
+html.scroll-clipped,
+body.scroll-clipped {
+  overflow: hidden;
+  padding-right: 1rem;
+}
+
+html.scroll-hidden,
+body.scroll-hidden {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+// utlity classes
 
 .clickable {
   cursor: pointer;
@@ -52,7 +69,7 @@
   height: unset;
 }
 
-// Utility classes for text
+// utility classes for text
 
 .text-right {
   text-align: right;

diff --git a/src/plugins/bootstrap.ts b/src/plugins/bootstrap.ts
@@ -87,6 +87,8 @@ const bootstrapConfig: OrugaOptions = {
     itemDisabledClass: "disabled",
     mobileClass: "dropdown-modal",
     teleportClass: "teleported",
+    // scrollClipClass: "scroll-clipped",
+    // noScrollClass: "scroll-hidden",
   },
   datepicker: {
     override: true,
@@ -243,8 +245,8 @@ const bootstrapConfig: OrugaOptions = {
     closeClass: "btn-close",
     fullScreenClass: "fullscreen",
     mobileClass: "mobile",
-    scrollClipClass: "modal-open",
-    noScrollClass: "noScroll",
+    scrollClipClass: "scroll-clipped",
+    noScrollClass: "scroll-hidden",
   },
   notification: {
     override: true,