fix: remove modal dialog body before z-index for non scrollable modal (…

…#794)
openedx · Jul 29, 2021 · ac24b84 · ac24b84
1 parent 2f90581
commit ac24b84
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
@@ -131,8 +131,8 @@
   overflow: auto;
   position: relative;
 
-  &::before{
-    content:"";
+  &::before {
+    content: "";
     background-color: transparent;
     background-image: linear-gradient(#605c5c, #b8bebe, transparent 50%);
     display: block;
@@ -142,46 +142,52 @@
     margin-top: -$modal-inner-padding;
     margin-left: -$modal-inner-padding;
     margin-right: -$modal-inner-padding;
-    opacity: .5;
+    opacity: 0.5;
     z-index: 2;
   }
-  &::after{
-    content:"";
+  &::after {
+    content: "";
     background-color: transparent;
-    background-image: linear-gradient(360deg, #605c5c, #b8bebe, transparent 50%);
+    background-image: linear-gradient(
+      360deg,
+      #605c5c,
+      #b8bebe,
+      transparent 50%
+    );
     display: block;
     height: 20px;
     position: sticky;
     bottom: -$modal-inner-padding / 2;
     margin-bottom: -$modal-inner-padding;
     margin-left: -$modal-inner-padding;
     margin-right: -$modal-inner-padding;
-    opacity: .5;
+    opacity: 0.5;
   }
 
   &.pgn__modal-body-scroll-bottom {
-    &::before{
-      opacity: .5;
+    &::before {
+      opacity: 0.5;
     }
-    &::after{
+    &::after {
       opacity: 0;
     }
   }
 
   &.pgn__modal-body-scroll-top {
-    &::before{
+    &::before {
       opacity: 0;
+      z-index: 0;
     }
-    &::after{
-      opacity: .5;
+    &::after {
+      opacity: 0.5;
     }
   }
 
   &.pgn__modal-body-scroll-top.pgn__modal-body-scroll-bottom {
-    &::before{
+    &::before {
       opacity: 0;
     }
-    &::after{
+    &::after {
       opacity: 0;
     }
   }
@@ -223,8 +229,8 @@
   .pgn__modal-body {
     padding: $modal-inner-padding / 2 $modal-inner-padding;
 
-    &::before{
-      top: -$modal-inner-padding / 2
+    &::before {
+      top: -$modal-inner-padding / 2;
     }
   }
 }