added notification plugins aka toasts (sweetalert2 & toastr)

- added sweetalert2 & toastr to package.json & build/npm/Plugins.js
- added plugin related scss fixes and created files per plugin
- updated "Modals" demo page to "Modals & Alerts" & renamed link on all demo files
- rebuild dist files

Author: REJack

build/npm/Plugins.js

@@ -182,11 +182,21 @@ const Plugins = [
     from: 'node_modules/select2/dist/',
     to  : 'plugins/select2'
   },
-  // Select2
+  // Sparklines
   {
     from: 'node_modules/sparklines/source/',
     to  : 'plugins/sparklines'
   },
+  // SweetAlert2
+  {
+    from: 'node_modules/sweetalert2/dist/',
+    to  : 'plugins/sweetalert2'
+  },
+  // Toastr
+  {
+    from: 'node_modules/toastr/build/',
+    to  : 'plugins/toastr'
+  },
 
 
   // // Doc Assets

build/scss/AdminLTE.scss

@@ -58,6 +58,8 @@
 @import "plugins/icheck-bootstrap";
 @import "plugins/mapael";
 @import "plugins/jqvmap";
+@import "plugins/sweetalert2";
+@import "plugins/toastr";
 // Miscellaneous
 // ---------------------------------------------------
 @import "miscellaneous";

build/scss/plugins/_sweetalert2.scss

@@ -0,0 +1,36 @@
+/*
+ * Plugin: SweetAlert2
+ * ---------------
+ */
+
+// Icon Colors
+.swal2-icon {
+  &.swal2-info {
+    color: $info;
+    border-color: ligthen($info, 20%);
+  }
+  &.swal2-warning {
+    color: $warning;
+    border-color: ligthen($warning, 20%);
+  }
+  &.swal2-error {
+    color: $danger;
+    border-color: ligthen($danger, 20%);
+  }
+  &.swal2-question {
+    color: $secondary;
+    border-color: ligthen($secondary, 20%);
+  }
+  &.swal2-success {
+    color: $success;
+    border-color: ligthen($success, 20%);
+    
+    .swal2-success-ring {
+      border-color: ligthen($success, 20%);
+    }
+    [class^="swal2-success-line"] {
+      background-color: $success;
+    }
+  }
+
+}

build/scss/plugins/_toastr.scss

@@ -0,0 +1,49 @@
+/*
+ * Plugin: Toastr
+ * ---------------
+ */
+
+// Background to FontAwesome Icons
+// #toast-container > .toast {
+//     background-image: none !important;
+// }
+// #toast-container > .toast .toast-message:before {
+//     font-family: 'Font Awesome 5 Free';
+//     font-size: 24px;
+//     font-weight: 900;
+//     line-height: 18px;
+//     float: left;
+//     color: #FFF;
+//     padding-right: 0.5em;
+//     margin: auto 0.5em auto -1.5em;
+// }        
+// #toast-container > .toast-warning .toast-message:before {
+//     content: "\f06a";
+// }
+// #toast-container > .toast-error .toast-message:before {
+//     content: "\f071";
+// }
+// #toast-container > .toast-info .toast-message:before {
+//     content: "\f05a";
+// }
+// #toast-container > .toast-success .toast-message:before {
+//     content: "\f058";
+// }
+
+
+// Background color
+.toast {
+  background-color: $primary;
+}
+.toast-success {
+  background-color: $success;
+}
+.toast-error {
+  background-color: $danger;
+}
+.toast-info {
+  background-color: $info;
+}
+.toast-warning {
+  background-color: $warning;
+}

dist/css/adminlte.css

@@ -330,7 +330,7 @@ <h3 class="dropdown-item-title">
               <li class="nav-item">
                 <a href="pages/UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

dist/css/adminlte.css.map

@@ -317,7 +317,7 @@ <h3 class="dropdown-item-title">
               <li class="nav-item">
                 <a href="pages/UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>