Merge pull request #252 from US-CBP/update/Toast-button-layout

Update to Toast button spacing
US-CBP · Feb 19, 2025 · b4f6e24 · b4f6e24
2 parents 60b6338 + ce29c5a
commit b4f6e24
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/packages/web-components/src/components/cbp-toast/cbp-toast.scss b/packages/web-components/src/components/cbp-toast/cbp-toast.scss
@@ -72,32 +72,36 @@ cbp-toast {
 
   .cbp-toast-sidebar{
     display: flex;
+    width: var(--cbp-space-13x);
+    justify-content: center;
     align-items: center;
     padding: var(--cbp-space-4x);
     background-color: var(--cbp-toast-color-bg-sidebar);
     border-top-left-radius: var(--cbp-border-radius-softer);;
     border-bottom-left-radius: var(--cbp-border-radius-softer);;
 
     [slot="cbp-toast-icon"]{
-          color: var(--cbp-toast-color-icon-sidebar);
+          --cbp-icon-color: var(--cbp-toast-color-icon-sidebar);
     }
   }
 
   .cbp-toast-title{
     font-weight: var(--cbp-font-weight-medium);
     font-size: var(--cbp-font-size-heading-sm);
     line-height: var(--cbp-line-height-sm);
+    padding:  var(--cbp-space-3x) var(--cbp-space-3x) 0 var(--cbp-space-3x);
   }
 
   .cbp-toast-container{
-    padding:  var(--cbp-space-3x);
+    width: 100%;
   }
 
   .cbp-toast-content{
     font-weight: var(--cbp-font-weight-regular);
     font-size: var(--cbp-font-size-body);
     line-height: var(--cbp-line-height-xs);
     color: var(--cbp-toast-color-content);
+    padding:  0 var(--cbp-space-3x) 0 var(--cbp-space-3x);
   }
 
   .cbp-toast-button-bar{
@@ -106,12 +110,18 @@ cbp-toast {
 
     & > div{
       display: flex;
-      gap: var(--cbp-space-4x);
+      flex: 1 1 100%; 
     }
 
     cbp-button[fill=ghost][color=secondary]{ //match button color to text color for toast
       --cbp-button-color: var(--cbp-toast-color);
       --cbp-button-color-dark: var(--cbp-toast-color-dark);
+      --cbp-button-width: 100%;
+      --cbp-button-border-radius: var(--cbp-border-radius-sharp);
+
+      &:last-child {
+        --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) 0;
+      }
     }
   }
 
@@ -131,11 +141,11 @@ cbp-toast {
 
   &[color='warning']{
     --cbp-toast-color-bg: var(--cbp-color-warning-base);
-    --cbp-toast-color-bg-dark: var(--cbp-color-warning-base);
+    --cbp-toast-color-bg-dark: var(--cbp-color-warning-lighter);
     --cbp-toast-color-bg-sidebar: var(--cbp-color-warning-darker);
-    --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-warning-darker);
+    --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-warning-base);
     --cbp-toast-color: var(--cbp-color-text-darker);
-    --cbp-toast-color-dark: var(--cbp-color-text-darker);
+    --cbp-toast-color-dark: var(--cbp-color-text-darkest);
     --cbp-toast-color-content: var(--cbp-color-text-darker);
     --cbp-toast-color-content-dark: var(--cbp-color-text-darker);
     --cbp-toast-color-icon-sidebar-dark: var(--cbp-color-text-light);