fix(dark): backdrop opacity (#7)

* Fix for backdrop opacity Note that the opacity set for the dark theme (75%) is higher than the equivalent standard opacity (40%). his is done in pourpose * Add text to test page In order to test backdrop opacity
sweetalert2 · Apr 30, 2019 · 89ac5e5 · 89ac5e5
1 parent c7dd303
commit 89ac5e5
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/dark/dark.css b/dark/dark.css
@@ -555,7 +555,7 @@ body.swal2-no-backdrop .swal2-shown {
   max-width: calc(100% - 0.625em * 2);
   background-color: transparent; }
   body.swal2-no-backdrop .swal2-shown > .swal2-modal {
-    box-shadow: 0 0 10px #58585b; }
+    box-shadow: 0 0 10px rgba(25, 25, 26, 0.75); }
   body.swal2-no-backdrop .swal2-shown.swal2-top {
     top: 0;
     left: 50%;
@@ -671,7 +671,7 @@ body.swal2-no-backdrop .swal2-shown {
   .swal2-container.swal2-fade {
     transition: background-color .1s; }
   .swal2-container.swal2-shown {
-    background-color: #58585b; }
+    background-color: rgba(25, 25, 26, 0.75); }
 
 .swal2-popup {
   display: none;

diff --git a/dark/dark.scss b/dark/dark.scss
@@ -6,7 +6,7 @@ $swal2-dark-theme-white: #e1e1e1;
 $swal2-background: $swal2-dark-theme-black;
 $swal2-content-color: $swal2-dark-theme-white;
 $swal2-title-color: $swal2-dark-theme-white;
-$swal2-backdrop: lighten($swal2-dark-theme-black, 25%);
+$swal2-backdrop: rgba($swal2-dark-theme-black, .75);
 
 // FOOTER
 $swal2-footer-color: darken($swal2-content-color, 15%);

diff --git a/dark/index.html b/dark/index.html
@@ -8,6 +8,8 @@
   <link rel="stylesheet" href="./dark.css">
 </head>
 
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 <body>
   <script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,8 @@ @@
       <link rel="stylesheet" href="./dark.css">
     </head>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <body>
       <script>
@@ Expand Down @@