modal overlay

- update color darken/lighten for custom-switch's
- added .overlay in .modal-dialog/.modal-content
- created demo modal in modals.html
- rebuild css dist files

build/scss/_forms.scss

@@ -236,16 +236,16 @@ textarea.form-control {
     &.custom-switch-off-#{$name} { 
       & .custom-control-input ~ .custom-control-label::before {
         background-color: #{$color};
-        border-color: darken($color, 10%);
+        border-color: darken($color, 20%);
       }
       & .custom-control-input ~ .custom-control-label::after {
-        background-color: darken($color, 30%);
+        background-color: darken($color, 25%);
       }
     }
     &.custom-switch-on-#{$name} { 
       & .custom-control-input:checked ~ .custom-control-label::before {
         background-color: #{$color};
-        border-color: darken($color, 10%);
+        border-color: darken($color, 20%);
       }
       & .custom-control-input:checked ~ .custom-control-label::after {
         background-color: lighten($color, 30%);
@@ -258,16 +258,16 @@ textarea.form-control {
     &.custom-switch-off-#{$name} { 
       & .custom-control-input ~ .custom-control-label::before {
         background-color: #{$color};
-        border-color: darken($color, 10%);
+        border-color: darken($color, 20%);
       }
       & .custom-control-input ~ .custom-control-label::after {
-        background-color: darken($color, 30%);
+        background-color: darken($color, 25%);
       }
     }
     &.custom-switch-on-#{$name} { 
       & .custom-control-input:checked ~ .custom-control-label::before {
         background-color: #{$color};
-        border-color: darken($color, 10%);
+        border-color: darken($color, 20%);
       }
       & .custom-control-input:checked ~ .custom-control-label::after {
         background-color: lighten($color, 30%);

build/scss/_miscellaneous.scss

@@ -363,6 +363,19 @@ a.text-muted:hover {
 }
 
 // Modals
+.modal-dialog {
+  .overlay {
+      display: block;
+      position: absolute;
+      z-index: ($zindex-modal + 2);
+      background: rgba(255, 255, 255, 0.7);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+  }
+}
+
 .modal-content {
   &.bg-warning {
     .modal-header,

dist/css/adminlte.css

@@ -12021,16 +12021,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-primary .custom-control-input ~ .custom-control-label::before {
   background-color: #007bff;
-  border-color: #0062cc;
+  border-color: #004a99;
 }
 
 .custom-switch.custom-switch-off-primary .custom-control-input ~ .custom-control-label::after {
-  background-color: #003166;
+  background-color: #003e80;
 }
 
 .custom-switch.custom-switch-on-primary .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #007bff;
-  border-color: #0062cc;
+  border-color: #004a99;
 }
 
 .custom-switch.custom-switch-on-primary .custom-control-input:checked ~ .custom-control-label::after {
@@ -12039,16 +12039,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-secondary .custom-control-input ~ .custom-control-label::before {
   background-color: #6c757d;
-  border-color: #545b62;
+  border-color: #3d4246;
 }
 
 .custom-switch.custom-switch-off-secondary .custom-control-input ~ .custom-control-label::after {
-  background-color: #25282b;
+  background-color: #313539;
 }
 
 .custom-switch.custom-switch-on-secondary .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #6c757d;
-  border-color: #545b62;
+  border-color: #3d4246;
 }
 
 .custom-switch.custom-switch-on-secondary .custom-control-input:checked ~ .custom-control-label::after {
@@ -12057,16 +12057,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-success .custom-control-input ~ .custom-control-label::before {
   background-color: #28a745;
-  border-color: #1e7e34;
+  border-color: #145523;
 }
 
 .custom-switch.custom-switch-off-success .custom-control-input ~ .custom-control-label::after {
-  background-color: #0a2c12;
+  background-color: #0f401b;
 }
 
 .custom-switch.custom-switch-on-success .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #28a745;
-  border-color: #1e7e34;
+  border-color: #145523;
 }
 
 .custom-switch.custom-switch-on-success .custom-control-input:checked ~ .custom-control-label::after {
@@ -12075,16 +12075,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-info .custom-control-input ~ .custom-control-label::before {
   background-color: #17a2b8;
-  border-color: #117a8b;
+  border-color: #0c525d;
 }
 
 .custom-switch.custom-switch-off-info .custom-control-input ~ .custom-control-label::after {
-  background-color: #062a30;
+  background-color: #093e47;
 }
 
 .custom-switch.custom-switch-on-info .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #17a2b8;
-  border-color: #117a8b;
+  border-color: #0c525d;
 }
 
 .custom-switch.custom-switch-on-info .custom-control-input:checked ~ .custom-control-label::after {
@@ -12093,16 +12093,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-warning .custom-control-input ~ .custom-control-label::before {
   background-color: #ffc107;
-  border-color: #d39e00;
+  border-color: #a07800;
 }
 
 .custom-switch.custom-switch-off-warning .custom-control-input ~ .custom-control-label::after {
-  background-color: #6d5200;
+  background-color: #876500;
 }
 
 .custom-switch.custom-switch-on-warning .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #ffc107;
-  border-color: #d39e00;
+  border-color: #a07800;
 }
 
 .custom-switch.custom-switch-on-warning .custom-control-input:checked ~ .custom-control-label::after {
@@ -12111,16 +12111,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-danger .custom-control-input ~ .custom-control-label::before {
   background-color: #dc3545;
-  border-color: #bd2130;
+  border-color: #921925;
 }
 
 .custom-switch.custom-switch-off-danger .custom-control-input ~ .custom-control-label::after {
-  background-color: #66121a;
+  background-color: #7c151f;
 }
 
 .custom-switch.custom-switch-on-danger .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #dc3545;
-  border-color: #bd2130;
+  border-color: #921925;
 }
 
 .custom-switch.custom-switch-on-danger .custom-control-input:checked ~ .custom-control-label::after {
@@ -12129,16 +12129,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-light .custom-control-input ~ .custom-control-label::before {
   background-color: #f8f9fa;
-  border-color: #dae0e5;
+  border-color: #bdc6d0;
 }
 
 .custom-switch.custom-switch-off-light .custom-control-input ~ .custom-control-label::after {
-  background-color: #9fadba;
+  background-color: #aeb9c5;
 }
 
 .custom-switch.custom-switch-on-light .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #f8f9fa;
-  border-color: #dae0e5;
+  border-color: #bdc6d0;
 }
 
 .custom-switch.custom-switch-on-light .custom-control-input:checked ~ .custom-control-label::after {
@@ -12147,7 +12147,7 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-dark .custom-control-input ~ .custom-control-label::before {
   background-color: #343a40;
-  border-color: #1d2124;
+  border-color: #060708;
 }
 
 .custom-switch.custom-switch-off-dark .custom-control-input ~ .custom-control-label::after {
@@ -12156,7 +12156,7 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-on-dark .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #343a40;
-  border-color: #1d2124;
+  border-color: #060708;
 }
 
 .custom-switch.custom-switch-on-dark .custom-control-input:checked ~ .custom-control-label::after {
@@ -12165,16 +12165,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-blue .custom-control-input ~ .custom-control-label::before {
   background-color: #007bff;
-  border-color: #0062cc;
+  border-color: #004a99;
 }
 
 .custom-switch.custom-switch-off-blue .custom-control-input ~ .custom-control-label::after {
-  background-color: #003166;
+  background-color: #003e80;
 }
 
 .custom-switch.custom-switch-on-blue .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #007bff;
-  border-color: #0062cc;
+  border-color: #004a99;
 }
 
 .custom-switch.custom-switch-on-blue .custom-control-input:checked ~ .custom-control-label::after {
@@ -12183,16 +12183,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-indigo .custom-control-input ~ .custom-control-label::before {
   background-color: #6610f2;
-  border-color: #510bc4;
+  border-color: #3d0894;
 }
 
 .custom-switch.custom-switch-off-indigo .custom-control-input ~ .custom-control-label::after {
-  background-color: #290564;
+  background-color: #33077c;
 }
 
 .custom-switch.custom-switch-on-indigo .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #6610f2;
-  border-color: #510bc4;
+  border-color: #3d0894;
 }
 
 .custom-switch.custom-switch-on-indigo .custom-control-input:checked ~ .custom-control-label::after {
@@ -12201,16 +12201,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-purple .custom-control-input ~ .custom-control-label::before {
   background-color: #6f42c1;
-  border-color: #59339d;
+  border-color: #432776;
 }
 
 .custom-switch.custom-switch-off-purple .custom-control-input ~ .custom-control-label::after {
-  background-color: #2d1a50;
+  background-color: #382063;
 }
 
 .custom-switch.custom-switch-on-purple .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #6f42c1;
-  border-color: #59339d;
+  border-color: #432776;
 }
 
 .custom-switch.custom-switch-on-purple .custom-control-input:checked ~ .custom-control-label::after {
@@ -12219,16 +12219,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-pink .custom-control-input ~ .custom-control-label::before {
   background-color: #e83e8c;
-  border-color: #d91a72;
+  border-color: #ac145a;
 }
 
 .custom-switch.custom-switch-off-pink .custom-control-input ~ .custom-control-label::after {
-  background-color: #7e0f42;
+  background-color: #95124e;
 }
 
 .custom-switch.custom-switch-on-pink .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #e83e8c;
-  border-color: #d91a72;
+  border-color: #ac145a;
 }
 
 .custom-switch.custom-switch-on-pink .custom-control-input:checked ~ .custom-control-label::after {
@@ -12237,16 +12237,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-red .custom-control-input ~ .custom-control-label::before {
   background-color: #dc3545;
-  border-color: #bd2130;
+  border-color: #921925;
 }
 
 .custom-switch.custom-switch-off-red .custom-control-input ~ .custom-control-label::after {
-  background-color: #66121a;
+  background-color: #7c151f;
 }
 
 .custom-switch.custom-switch-on-red .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #dc3545;
-  border-color: #bd2130;
+  border-color: #921925;
 }
 
 .custom-switch.custom-switch-on-red .custom-control-input:checked ~ .custom-control-label::after {
@@ -12255,16 +12255,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-orange .custom-control-input ~ .custom-control-label::before {
   background-color: #fd7e14;
-  border-color: #dc6502;
+  border-color: #aa4e01;
 }
 
 .custom-switch.custom-switch-off-orange .custom-control-input ~ .custom-control-label::after {
-  background-color: #773701;
+  background-color: #904201;
 }
 
 .custom-switch.custom-switch-on-orange .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #fd7e14;
-  border-color: #dc6502;
+  border-color: #aa4e01;
 }
 
 .custom-switch.custom-switch-on-orange .custom-control-input:checked ~ .custom-control-label::after {
@@ -12273,16 +12273,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-yellow .custom-control-input ~ .custom-control-label::before {
   background-color: #ffc107;
-  border-color: #d39e00;
+  border-color: #a07800;
 }
 
 .custom-switch.custom-switch-off-yellow .custom-control-input ~ .custom-control-label::after {
-  background-color: #6d5200;
+  background-color: #876500;
 }
 
 .custom-switch.custom-switch-on-yellow .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #ffc107;
-  border-color: #d39e00;
+  border-color: #a07800;
 }
 
 .custom-switch.custom-switch-on-yellow .custom-control-input:checked ~ .custom-control-label::after {
@@ -12291,16 +12291,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-green .custom-control-input ~ .custom-control-label::before {
   background-color: #28a745;
-  border-color: #1e7e34;
+  border-color: #145523;
 }
 
 .custom-switch.custom-switch-off-green .custom-control-input ~ .custom-control-label::after {
-  background-color: #0a2c12;
+  background-color: #0f401b;
 }
 
 .custom-switch.custom-switch-on-green .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #28a745;
-  border-color: #1e7e34;
+  border-color: #145523;
 }
 
 .custom-switch.custom-switch-on-green .custom-control-input:checked ~ .custom-control-label::after {
@@ -12309,16 +12309,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-teal .custom-control-input ~ .custom-control-label::before {
   background-color: #20c997;
-  border-color: #199d76;
+  border-color: #127155;
 }
 
 .custom-switch.custom-switch-off-teal .custom-control-input ~ .custom-control-label::after {
-  background-color: #0b4534;
+  background-color: #0e5b44;
 }
 
 .custom-switch.custom-switch-on-teal .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #20c997;
-  border-color: #199d76;
+  border-color: #127155;
 }
 
 .custom-switch.custom-switch-on-teal .custom-control-input:checked ~ .custom-control-label::after {
@@ -12327,16 +12327,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-cyan .custom-control-input ~ .custom-control-label::before {
   background-color: #17a2b8;
-  border-color: #117a8b;
+  border-color: #0c525d;
 }
 
 .custom-switch.custom-switch-off-cyan .custom-control-input ~ .custom-control-label::after {
-  background-color: #062a30;
+  background-color: #093e47;
 }
 
 .custom-switch.custom-switch-on-cyan .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #17a2b8;
-  border-color: #117a8b;
+  border-color: #0c525d;
 }
 
 .custom-switch.custom-switch-on-cyan .custom-control-input:checked ~ .custom-control-label::after {
@@ -12345,16 +12345,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-white .custom-control-input ~ .custom-control-label::before {
   background-color: #ffffff;
-  border-color: #e6e6e6;
+  border-color: #cccccc;
 }
 
 .custom-switch.custom-switch-off-white .custom-control-input ~ .custom-control-label::after {
-  background-color: #b3b3b3;
+  background-color: #bfbfbf;
 }
 
 .custom-switch.custom-switch-on-white .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #ffffff;
-  border-color: #e6e6e6;
+  border-color: #cccccc;
 }
 
 .custom-switch.custom-switch-on-white .custom-control-input:checked ~ .custom-control-label::after {
@@ -12363,16 +12363,16 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-gray .custom-control-input ~ .custom-control-label::before {
   background-color: #6c757d;
-  border-color: #545b62;
+  border-color: #3d4246;
 }
 
 .custom-switch.custom-switch-off-gray .custom-control-input ~ .custom-control-label::after {
-  background-color: #25282b;
+  background-color: #313539;
 }
 
 .custom-switch.custom-switch-on-gray .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #6c757d;
-  border-color: #545b62;
+  border-color: #3d4246;
 }
 
 .custom-switch.custom-switch-on-gray .custom-control-input:checked ~ .custom-control-label::after {
@@ -12381,7 +12381,7 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-off-gray-dark .custom-control-input ~ .custom-control-label::before {
   background-color: #343a40;
-  border-color: #1d2124;
+  border-color: #060708;
 }
 
 .custom-switch.custom-switch-off-gray-dark .custom-control-input ~ .custom-control-label::after {
@@ -12390,7 +12390,7 @@ textarea.form-control.is-warning {
 
 .custom-switch.custom-switch-on-gray-dark .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #343a40;
-  border-color: #1d2124;
+  border-color: #060708;
 }
 
 .custom-switch.custom-switch-on-gray-dark .custom-control-input:checked ~ .custom-control-label::after {
@@ -15140,6 +15140,17 @@ a.text-muted:hover {
   flex: 1;
 }
 
+.modal-dialog .overlay {
+  display: block;
+  position: absolute;
+  z-index: 1052;
+  background: rgba(255, 255, 255, 0.7);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .modal-content.bg-warning .modal-header, .modal-content.alert-warning .modal-header, .modal-content.label-warning .modal-header,
 .modal-content.bg-warning .modal-footer,
 .modal-content.alert-warning .modal-footer,

pages/UI/modals.html

@@ -596,7 +596,11 @@
                 <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-xl">
                   Launch Extra Large Modal
                 </button>
-
+                <br />
+                <br />
+                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-overlay">
+                  Launch Modal with Overlay
+                </button>
               </div>
               <!-- /.card -->
             </div>
@@ -629,6 +633,32 @@
       </div>
       <!-- /.modal -->
 
+      <div class="modal fade" id="modal-overlay">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="overlay d-flex justify-content-center align-items-center">
+                <i class="fas fa-2x fa-sync fa-spin"></i>
+            </div>
+            <div class="modal-header">
+              <h4 class="modal-title">Default Modal</h4>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p>One fine body&hellip;</p>
+            </div>
+            <div class="modal-footer justify-content-between">
+              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+          <!-- /.modal-content -->
+        </div>
+        <!-- /.modal-dialog -->
+      </div>
+      <!-- /.modal -->
+
       <div class="modal fade" id="modal-primary">
         <div class="modal-dialog">
           <div class="modal-content bg-primary">