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/components/general.astro

@@ -258,6 +258,10 @@ const pageTitle = "General Components";
               <!--end::Body-->
             </div>
             <!--end::Button-->
+          </div>
+          <!--end::Col-->
+          <!--begin::Col-->
+          <div class="col-md-6">
             <!--begin::Button Group-->
             <div class="card card-info card-outline mb-2">
               <!--begin::Header-->
@@ -321,10 +325,6 @@ const pageTitle = "General Components";
               <!--end::Body-->
             </div>
             <!--end::Button Group-->
-          </div>
-          <!--end::Col-->
-          <!--begin::Col-->
-          <div class="col-md-6">
             <!--begin::Collapse-->
             <div class="card card-primary card-outline mb-2">
               <!--begin::Header-->
@@ -575,19 +575,123 @@ const pageTitle = "General Components";
               <!--end::Body-->
             </div>
             <!--end::Placeholder-->
-            <!--begin::Quick Example-->
+            <!--begin::Progress-->
+            <div class="card card-primary card-outline mb-2">
+              <!--begin::Header-->
+              <div class="card-header">
+                <div class="card-title">Progress</div>
+              </div>
+              <!--end::Header-->
+              <!--begin::Body-->
+              <div class="card-body">
+                <div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                  <div class="progress-bar bg-success" style="width: 25%; border-radius: 0.375rem;"></div>
+                </div>
+                <div class="progress mb-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+                  <div class="progress-bar" style="width: 10%; border-radius: 0.375rem;"></div>
+                </div>
+                <div class="progress mb-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+                  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%; border-radius: 0.375rem;"></div>
+                </div>
+                <div class="progress mb-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%; border-radius: 0.375rem;"></div>
+                </div>
+                <div class="progress mb-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%; border-radius: 0.375rem;"></div>
+                </div>
+              </div>
+              <!--end::Body-->
+            </div>
+            <!--end::Progress-->
+            <!--begin::Toast-->
+            <div class="card card-primary card-outline mb-2">
+              <!--begin::Header-->
+              <div class="card-header">
+                <div class="card-title">Toast</div>
+              </div>
+              <!--end::Header-->
+              <!--begin::Body-->
+              <div class="card-body">
+                <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+                <div class="toast-container position-fixed bottom-0 end-0 p-3">
+                  <div id="liveToast" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="liveToast" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!--end::Body-->
+            </div>
+            <!--end::Toast-->
+            <!--begin::Tooltip-->
             <div class="card card-primary card-outline mb-2">
               <!--begin::Header-->
               <div class="card-header">
-                <div class="card-title">Quick Example</div>
+                <div class="card-title">Tooltip</div>
               </div>
               <!--end::Header-->
               <!--begin::Body-->
               <div class="card-body">
+                <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
+              </div>
+              <!--end::Body-->
+            </div>
+            <!--end::Toast-->
+            <!--begin::Spinner-->
+            <div class="card card-success card-outline mb-2">
+              <!--begin::Header-->
+              <div class="card-header">
+                <div class="card-title">Spinner</div>
+              </div>
+              <!--end::Header-->
+              <!--begin::Body-->
+              <div class="card-body">
+                <div class="spinner-border text-primary" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-secondary" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-success" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-danger" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-warning" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-info" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-light" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="spinner-border text-dark" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
               </div>
               <!--end::Body-->
             </div>
-            <!--end::Quick Example-->
+            <!--end::Spinner-->
           </div>
           <!--end::Col-->
         </div>

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
 // ---------------------------------------------------