angular/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
AleksanderBodurri b3fcc8b408 fix(devtools): prevent ng-deep component styling from leaking to child components
Previously this css was causing a styling error in the profiler visualization menu panel
2020-08-10 18:33:16 +03:00

80 lines
1.1 KiB
SCSS

:host {
position: relative;
width: 100%;
height: 100%;
display: block;
}
mat-tab-group {
width: 100%;
height: 100%;
display: block;
}
#nav-buttons {
display: flex;
position: absolute;
top: 0px;
left: 0px;
}
#app-angular-version {
position: absolute;
top: 8px;
right: 10px;
font-size: 11px;
font-weight: bold;
// color: #5128a5;
}
::ng-deep {
.mat-icon-button {
height: 30px !important;
width: 30px !important;
line-height: 30px !important;
margin-right: 5px !important;
}
.mat-tab-body-wrapper {
height: calc(100% - 31px);
}
.mat-tab-header {
height: 30px;
}
.mat-tab-label-container {
margin-left: 125px;
}
mat-tab-header {
.mat-tab-label {
min-width: unset;
line-height: 30px;
height: 30px;
font-size: 12px;
padding: 0px 10px;
}
}
}
.menu {
position: absolute;
left: 60px;
top: -3px;
font-size: 17px;
outline: none;
width: 13px;
height: 33px;
padding: 0;
}
::ng-deep {
.options-menu {
padding: 1rem 1.25rem;
}
}
.menu-toggle-button {
font-size: 12px;
}