angular/devtools/projects/ng-devtools/src/styles/_overrides.scss
Matthieu Riegler e40307803a refactor(devtools): visual separation between directives in the property tab (#64222)
also a drive by clean-up to remove some `ng-deep` stylings

PR Close #64222
2025-10-03 15:05:50 +00:00

59 lines
1.2 KiB
SCSS

@use '@angular/material' as mat;
@use './typography' as tg;
/* Defines all Material component overrides specific to Angular DevTools */
/* If you must resort to direct Mat class changes, please use a "FRAGILE" comment on top. */
@mixin mat-cmp-overrides {
@include mat.expansion-overrides(
(
container-background-color: transparent,
container-elevation-shadow: none,
)
);
@include mat.toolbar-overrides(
(
container-background-color: transparent,
)
);
@include mat.tree-overrides(
(
container-background-color: transparent,
)
);
@include mat.table-overrides(
(
background-color: transparent,
)
);
@include mat.menu-overrides(
(
item-icon-size: 16px,
item-label-text-font: tg.$font-family,
item-label-text-size: tg.$font-size,
item-label-text-line-height: 0.875rem,
)
);
/* FRAGILE */
.mat-mdc-menu-item {
min-height: 32px;
}
/* FRAGILE */
label.mat-mdc-menu-item > .mat-mdc-menu-item-text {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
}
/* FRAGILE */
mat-slide-toggle .mdc-switch__ripple {
width: 25px;
height: 25px;
}
}