SZUT/EMS
5
0
Fork 0
Code Issues 1 Pull requests Projects 1 Activity Actions

Fix: Warn/Error/Abort styling for FAB; FIX: remove FAB shadow in tables
All checks were successful
Quality Check / Linting (push) Successful in 22s
Details
Quality Check / Linting (pull_request) Successful in 21s
Details

Browse source
This commit is contained in:
Dominik Säume 2025-01-09 19:30:55 +01:00
parent 34d635a6fd
commit 5cd186b812
1 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/styles.scss
View file

@ -29,15 +29,46 @@ app-root {
} }
button { button {
&.abort, &.error, &.warn { &.abort,
&.error,
&.warn {
@include mat.button-overrides(( @include mat.button-overrides((
text-label-text-color: var(--mat-sys-error), // default
text-ripple-color: var(--mat-sys-error), text-label-text-color: var(--mat-sys-error),
text-state-layer-color: var(--mat-sys-error), text-ripple-color: var(--mat-sys-error),
filled-label-text-color: var(--mat-sys-on-error), text-state-layer-color: var(--mat-sys-error),
filled-container-color: var(--mat-sys-error), // filled
filled-ripple-color: var(--mat-sys-on-error), filled-label-text-color: var(--mat-sys-on-error),
filled-state-layer-color: var(--mat-sys-on-error), filled-container-color: var(--mat-sys-error),
)); filled-ripple-color: var(--mat-sys-on-error),
filled-state-layer-color: var(--mat-sys-on-error),
));
@include mat.fab-overrides((
// default
container-color: var(--mat-sys-error-container),
foreground-color: var(--mat-sys-on-error-container),
state-layer-color: var(--mat-sys-on-error-container),
ripple-color: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)),
// mini
small-container-color: var(--mat-sys-error-container),
small-foreground-color: var(--mat-sys-on-error-container),
small-state-layer-color: var(--mat-sys-on-error-container),
small-ripple-color: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))
));
} }
} }
table button.mdc-fab {
@include mat.fab-overrides((
// default
container-elevation-shadow: transparent,
hover-container-elevation-shadow: transparent,
pressed-container-elevation-shadow: transparent,
focus-container-elevation-shadow: transparent,
// mini
small-container-elevation-shadow: transparent,
small-hover-container-elevation-shadow: transparent,
small-pressed-container-elevation-shadow: transparent,
small-focus-container-elevation-shadow: transparent,
));
}