mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
8bdbbf4510
This commit introduces 2 new features into DevTools. Directive level dependency inspection: Users can now view which dependencies their directives have injected in the property viewer tab. This view displays not only the dependency but also the resolution path that was used to service the injection. Injector graph inspection: Users can now view a visualization of the element and environment hierarchies in their application. These trees are displayed separately but on the same page in the Injector Tree tab. User can click on individual injectors to view a list of all the providers configured in that injector, as well as highlight the resolution path from that injector to the root (with the corresponding environment injector connection highlighted as well). PR Close #51719
68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
@use 'sass:map';
|
|
@use 'external/npm/node_modules/@angular/material/index' as mat;
|
|
@include mat.all-component-typographies();
|
|
@include mat.core();
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
// Light theme
|
|
$light-primary: mat.define-palette(mat.$grey-palette, 700, 200);
|
|
$light-accent: mat.define-palette(mat.$blue-palette, 800);
|
|
$light-theme: mat.define-light-theme($light-primary, $light-accent);
|
|
|
|
// Dark theme
|
|
$dark-primary: mat.define-palette(mat.$blue-grey-palette, 50);
|
|
$dark-accent: mat.define-palette(mat.$blue-palette, 200);
|
|
$dark-theme: map.deep-merge(
|
|
mat.define-dark-theme($dark-primary, $dark-accent),
|
|
(
|
|
'color': (
|
|
'background': (
|
|
background: #202124,
|
|
card: #202124,
|
|
),
|
|
'foreground': (
|
|
text: #bcc5ce,
|
|
),
|
|
),
|
|
'background': (
|
|
background: #202124,
|
|
card: #202124,
|
|
),
|
|
'foreground': (
|
|
'text': #bcc5ce,
|
|
),
|
|
)
|
|
);
|
|
|
|
.light-theme {
|
|
@include mat.all-component-themes($light-theme);
|
|
|
|
.mat-mdc-chip.mat-mdc-standard-chip {
|
|
--mdc-chip-container-height: 24px;
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
background: #202124;
|
|
@include mat.all-component-themes($dark-theme);
|
|
|
|
.mat-mdc-chip.mat-mdc-standard-chip {
|
|
--mdc-chip-container-height: 24px;
|
|
}
|
|
}
|
|
|
|
|
|
ng-devtools {
|
|
.mdc-card {
|
|
padding: 4px;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-menu-content {
|
|
padding: 0 !important;
|
|
}
|