fix(toasts): account for iconography

techfromsage · Jun 4, 2021 · 8b78aea · 8b78aea
1 parent 7ab3d0b
commit 8b78aea
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
@@ -23,6 +23,7 @@
   .btn-close {
     width: auto;
     height: auto;
+    padding: 0;
     font-weight: 300;
     text-decoration: underline;
     background: transparent;
@@ -36,15 +37,11 @@
   }
 }
 
-.toast-body {
+.toast > *:only-child {
+  align-items: center;
   padding: $toast-padding-y $toast-padding-x;
-  padding-right: math.div($toast-padding-x, 2);
-
-  &:only-child {
-    padding-right: $toast-padding-x;
-  }
 }
 
-.toast-body + .btn-close {
-  margin-right: $toast-padding-x;
+.toast-body:not(:only-child) {
+  padding: 0 math.div($toast-padding-x, 2);
 }
diff --git a/src/docs/_includes/toasts.njk b/src/docs/_includes/toasts.njk
@@ -19,6 +19,7 @@
   >
     <div class="toast align-items-center" data-bs-autohide="false">
       <div class="d-flex">
+        <i class="fal fa-spinner-third fa-spin fa-fw"></i>
         <div class="toast-body">Hello, world! This is a toast message.</div>
         <button
           type="button"