_modal.scss in trestle-0.10.0.pre

- old
+ new

@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .modal {
   &.loading {
     .modal-content {
       min-height: 100px;
 
@@ -15,22 +17,27 @@
         opacity: 0.25;
       }
     }
   }
 
-  &.error {
+  &.error-modal {
     .modal-header {
       background-color: $error-bg;
     }
+
+    .modal-body {
+      padding: 0;
+    }
   }
 
+  &.show:not(:last-child),
   &.background {
+    z-index: $zindex-modal-backdrop - 1;
     overflow-y: hidden;
 
     .modal-dialog {
       transform: scale(0.9);
-      opacity: 0.75;
     }
   }
 }
 
 .modal-header {
@@ -94,12 +101,12 @@
   .alert {
     margin-bottom: 0;
     border-radius: 0;
     border-width: 0 0 1px 0;
 
-    padding-top: $alert-padding-y / 2;
-    padding-bottom: $alert-padding-y / 2;
+    padding-top: math.div($alert-padding-y, 2);
+    padding-bottom: math.div($alert-padding-y, 2);
 
     .alert-icon {
       font-size: 36px;
       margin-right: $alert-padding-x * 0.75;
     }
@@ -109,7 +116,29 @@
     }
 
     p {
       font-size: 0.9rem;
     }
+  }
+}
+
+.modal-backdrop {
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      @include icon-fa($fa-var-spinner);
+      @extend .fa-spin;
+
+      font-size: 5rem;
+
+      color: white;
+      opacity: 0.25;
+    }
+  }
+
+  &.show + &.show {
+    opacity: 0;
   }
 }