BS5 components

src/html/components/_scripts.astro

@@ -9,21 +9,25 @@ const adminlteJsUrl = path + "/js/adminlte.js";
   integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
   crossorigin="anonymous"
 ></script>
-<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+<!--end::Third Party Plugin(OverlayScrollbars)-->
+<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
 <script
   src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
   integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
   crossorigin="anonymous"
 ></script>
-<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+<!--end::Required Plugin(popperjs for Bootstrap 5)-->
+<!--begin::Required Plugin(Bootstrap 5)-->
 <script
   src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
   integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
   crossorigin="anonymous"
 ></script>
-<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
+<!--end::Required Plugin(Bootstrap 5)-->
+<!--begin::Required Plugin(AdminLTE)-->
 <script src={adminlteJsUrl} is:inline></script>
-<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
+<!--end::Required Plugin(AdminLTE)-->
+<!--begin::OverlayScrollbars Configure-->
 <script is:inline>
   const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
   const Default = {
@@ -31,7 +35,6 @@ const adminlteJsUrl = path + "/js/adminlte.js";
     scrollbarAutoHide: "leave",
     scrollbarClickScroll: true,
   };
-
   document.addEventListener("DOMContentLoaded", function () {
     const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
     if (
@@ -49,3 +52,21 @@ const adminlteJsUrl = path + "/js/adminlte.js";
   });
 </script>
 <!--end::OverlayScrollbars Configure-->
+<!--begin::Bootstrap Tooltips-->
+<script is:inline>
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+</script>
+<!--end::Bootstrap Tooltips-->
+<!--begin::JavaScript-->
+<script is:inline>
+  const toastTrigger = document.getElementById('liveToastBtn');
+  const toastLiveExample = document.getElementById('liveToast');
+  if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
+    toastTrigger.addEventListener('click', () => {
+      toastBootstrap.show();
+    })
+  }
+</script>
+<!--end::JavaScript-->

src/html/pages/forms/general.astro

@@ -58,7 +58,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-12">
                 <div class="callout callout-info">
-                  For detailed documentaion of Form visit <a
+                  For detailed documentation of Form visit <a
                     href="https://getbootstrap.com/docs/5.3/forms/overview/"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -72,7 +72,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Quick Example-->
-                <div class="card card-primary card-outline">
+                <div class="card card-primary card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Quick Example</div>
@@ -140,7 +140,7 @@ const page = "general";
                 </div>
                 <!--end::Quick Example-->
                 <!--begin::Input Group-->
-                <div class="card card-success card-outline">
+                <div class="card card-success card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Input Group</div>
@@ -234,7 +234,7 @@ const page = "general";
                 </div>
                 <!--end::Input Group-->
                 <!--begin::Horizontal Form-->
-                <div class="card card-warning card-outline">
+                <div class="card card-warning card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Horizontal Form</div>
@@ -348,7 +348,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Different Height-->
-                <div class="card card-secondary card-outline">
+                <div class="card card-secondary card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Height</div>
@@ -381,7 +381,7 @@ const page = "general";
                 </div>
                 <!--end::Different Height-->
                 <!--begin::Different Width-->
-                <div class="card card-danger card-outline">
+                <div class="card card-danger card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Width</div>
@@ -425,7 +425,7 @@ const page = "general";
                 </div>
                 <!--end::Different Width-->
                 <!--begin::Form Validation-->
-                <div class="card card-info card-outline">
+                <div class="card card-info card-outline mb-2">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Form Validation</div>

src/scss/_toasts.scss

@@ -0,0 +1,144 @@
+/**
+ * Toast styles to reflect Bootstrap colors
+ */
+.toast {
+  min-width: 300px;
+  margin: 8px;
+}
+
+.toast .toast-body {
+  color: $black;
+  background-color: $gray-100;
+  /* stylelint-disable */
+  border-radius: 0 0 .25rem .25rem;
+  /* stylelint-enable */
+}
+
+.toast-danger .toast-header {
+  //background-color: #dc3545 !important;
+  color: $white !important;
+  background-color: $red !important;
+  border-color: $red;
+}
+
+.toast-danger .toast-header button {
+  color: $white !important;
+}
+
+.toast-danger .toast-body {
+  color: $white;
+  background-color: $red-300;
+}
+
+.toast-dark .toast-header {
+  color: $white !important;
+  background-color: $gray-900 !important;
+  border-color: $gray-700;
+}
+
+.toast-dark .toast-header button {
+  color: $white !important;
+  --bs-btn-close-color: $white;
+}
+
+.toast-dark .toast-body {
+  color: $white;
+  background-color: $gray-700;
+}
+
+.toast-info .toast-header {
+  color: $white !important;
+  background-color: #17a2b8 !important;
+  border-color: #17a2b8;
+}
+
+.toast-info .toast-header button {
+  color: $white !important;
+  --bs-btn-close-color: $white;
+}
+
+.toast-info .toast-body {
+  color: $white;
+  background-color: #1fc8e3;
+}
+
+.toast-light .toast-header {
+  color: #1f2d3d !important;
+  background-color: $gray-100 !important;
+  border-color: $gray-100;
+}
+
+.toast-light .toast-header button {
+  color: #1f2d3d !important;
+  --bs-btn-close-color: #1f2d3d;
+}
+
+.toast-light .toast-body {
+  color: #1f2d3d;
+  background-color: $white;
+}
+
+.toast-primary .toast-header {
+  color: $white !important;
+  background-color: #007bff !important;
+  border-color: #007bff;
+}
+
+.toast-primary .toast-header button {
+  color: $white !important;
+  --bs-btn-close-color: $white;
+}
+
+.toast-primary .toast-body {
+  color: $white;
+  background-color: #3395ff;
+}
+
+.toast-secondary .toast-header {
+  color: $white !important;
+  background-color: $gray-600 !important;
+  border-color: $gray-600;
+}
+
+.toast-secondary .toast-header button {
+  color: $white !important;
+  --bs-btn-close-color: $white;
+}
+
+.toast-secondary .toast-body {
+  color: $white;
+  background-color: #868e96;
+}
+
+.toast-success .toast-header {
+  color: $white !important;
+  background-color: #28a745 !important;
+  border-color: #28a745;
+}
+
+.toast-success .toast-header button {
+  color: $white !important;
+  --bs-btn-close-color: $white;
+}
+
+.toast-success .toast-body {
+  color: $white;
+  background-color: #34ce57;
+}
+
+.toast-warning .toast-header {
+  color: #1f2d3d !important;
+  background-color: $yellow !important;
+  border-color: $yellow;
+}
+
+.toast-warning .toast-header button {
+  color: #1f2d3d !important;
+  --bs-btn-close-color: #1f2d3d;
+}
+
+.toast-warning .toast-body {
+  color: #1f2d3d;
+  background-color: #ffce3a;
+}
+

src/scss/adminlte.scss

@@ -60,12 +60,12 @@
 // Bootstrap Utilities
 @import "bootstrap/scss/utilities/api";
 
-
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";
 @import "variables-dark";
 @import "mixins";
+@import "toasts";
 
 // AdiminLTE Parts
 // ---------------------------------------------------