diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.html b/lib/core/src/lib/snackbar-content/snackbar-content.component.html index 87abd9831f..0d1f5bddd5 100644 --- a/lib/core/src/lib/snackbar-content/snackbar-content.component.html +++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.html @@ -1,6 +1,6 @@

@if (data.decorativeIcon) { - + } {{ data.message }}

@@ -8,14 +8,23 @@ @if (data.showAction) {
@if (data.actionLabel) { - } @if (data.actionIcon) { - } diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss index e1eb2143de..c371f77f1f 100644 --- a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss +++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss @@ -1,4 +1,4 @@ -@use '../styles/mat-selectors' as ms; +@use '@angular/material' as mat; :host { display: flex; @@ -12,41 +12,38 @@ overflow-wrap: anywhere; gap: 8px; - mat-icon { + &-icon { flex: 0 0 auto; align-self: flex-start; } - } - .adf-snackbar-message-content-action { - margin-left: 24px; - display: flex; - flex-direction: row; + &-action { + margin-left: 24px; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; - #{ms.$mat-button} { - min-width: 0; - margin: -8px; - height: unset; - - &.adf-snackbar-message-content-action-button { - margin-right: 8px; - padding-left: 16px; - padding-right: 16px; - width: auto; + &-button { + min-width: 0; + height: unset; + padding-top: 4px; + padding-bottom: 4px; -webkit-font-smoothing: subpixel-antialiased; + + @include mat.button-overrides( + ( + text-horizontal-padding: 16px + ) + ); } - &.adf-snackbar-message-content-action-icon { - padding: 0; - width: auto; - - mat-icon { - height: 24px; - width: 24px; - font-size: 24px; - margin-right: 0; - margin-top: 4px; - } + &-icon { + @include mat.icon-button-overrides( + ( + state-layer-size: 24px + ) + ); } } }