Update styles.md

trimble-oss · Jun 26, 2024 · c91b8e6 · c91b8e6
1 parent 664e178
commit c91b8e6
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/content/components/web/alerts/styles.md b/content/components/web/alerts/styles.md
@@ -80,27 +80,30 @@ document.addEventListener('DOMContentLoaded', function() {
 [data-bs-theme=dark] code {
   filter: brightness(250%);
 }
+.alert-danger i.modus-icons {
+  color: var(--bs-danger);
+}
+.alert-primary i.modus-icons {
+  color: var(--bs-primary);
+}
+.alert-success i.modus-icons {
+  color: var(--bs-success);
+}
+.alert-warning i.modus-icons {
+  color: var(--bs-warning);
+}
 </style>
 
 <div class="bg-secondary bg-opacity-10">
   <div class="p-3 p-xl-4 px-xl-5 mx-4">
-    <div class="alert alert-primary d-flex align-items-center" role="alert">
+    <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
     <div>
       An example alert with an icon
     </div>
+     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      </button>
   </div>
-    <div class="alert alert-secondary d-flex align-items-center py-2" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">help</i>
-      <div>A basic secondary alert with a button</div>
-      <div class="ms-auto">
-        <a href="#" class="btn-text-primary">Button</a>
-      </div>
-    </div>
-    <div class="alert alert-dark d-flex align-items-center" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
-      <div>A basic dark alert with a <a href="#examples">link</a></div>
-    </div>
     <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">check_circle</i>
       <div>Success! A basic success alert with a dismiss icon</div>