fix(toast): vertically center toast content

make sure content is centered, even if a header is not provided fix HealthCatalyst#2324
corykon · Jun 21, 2024 · 636f191 · 636f191
1 parent f928297
commit 636f191
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/projects/cashmere/src/lib/toaster/hc-toast.component.html b/projects/cashmere/src/lib/toaster/hc-toast.component.html
@@ -18,7 +18,7 @@
             </div>
             <div *ngIf="!_customImage" class="hc-toast-icon"></div>
         </div>
-        <div>
+        <div class="hc-toast-content-container">
             <div class="hc-toast-header">{{_headerText}}</div>
             <div class="hc-toast-body">{{_bodyText}}</div>
         </div>

diff --git a/projects/cashmere/src/lib/toaster/hc-toast.component.scss b/projects/cashmere/src/lib/toaster/hc-toast.component.scss
@@ -117,6 +117,13 @@ $hc-header-font-size: 18px !default;
     align-items: center;
 }
 
+.hc-toast-content-container {
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .hc-toast-close {
     padding-left: 20px;
     padding-right: 3px;