Merge d77d7bb into 52cb3ad

sweetalert2 · Nov 14, 2019 · 45ff5a4 · 45ff5a4
2 parents 52cb3ad + d77d7bb
commit 45ff5a4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/src/scss/_body.scss b/src/scss/_body.scss
@@ -13,6 +13,10 @@
 
   &.swal2-no-backdrop {
     .swal2-container {
+      &::before {
+        background: transparent;
+      }
+
       top: auto;
       right: auto;
       bottom: auto;

diff --git a/src/scss/_core.scss b/src/scss/_core.scss
@@ -1,4 +1,17 @@
 .swal2-container {
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: $swal2-backdrop-transition;
+    opacity: 0;
+    background: $swal2-backdrop;
+    will-change: opacity;
+  }
+
   // centering
   display: flex;
   position: fixed;
@@ -12,17 +25,20 @@
   justify-content: center;
   padding: $swal2-container-padding;
   overflow-x: hidden;
-  transition: $swal2-backdrop-transition;
 
   // sweetalert2/issues/905
   -webkit-overflow-scrolling: touch;
 
   &.swal2-backdrop-show {
-    background: $swal2-backdrop;
+    &::before {
+      opacity: 1;
+    }
   }
 
   &.swal2-backdrop-hide {
-    background: transparent !important;
+    &::before {
+      opacity: 0;
+    }
   }
 
   &.swal2-top {

diff --git a/src/scss/_toasts-body.scss b/src/scss/_toasts-body.scss
@@ -1,7 +1,9 @@
 @mixin sweetalert2-toasts-body() {
   &.swal2-toast-shown {
     .swal2-container {
-      background-color: transparent;
+      &::before {
+        background: transparent;
+      }
 
       &.swal2-top {
         top: 0;

diff --git a/src/variables.scss b/src/variables.scss
@@ -25,7 +25,7 @@ $swal2-font-size: 1rem !default;
 
 // BACKDROP
 $swal2-backdrop: rgba($swal2-black, .4) !default;
-$swal2-backdrop-transition: background-color .1s !default;
+$swal2-backdrop-transition: opacity .1s !default;
 
 // ICONS
 $swal2-icon-size: 5em !default;