46 lines
1.3 KiB
SCSS
46 lines
1.3 KiB
SCSS
|
@use '../core/style/layout-common';
|
||
|
|
|
||
|
|
// Wraps each tab body. We need to add these styles ourselves,
|
||
|
|
// because MDC only provides styling for the tab header.
|
||
|
|
.mat-mdc-tab-body {
|
||
|
|
@include layout-common.fill();
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
outline: 0;
|
||
|
|
|
||
|
|
// Fix for auto content wrapping in IE11
|
||
|
|
flex-basis: 100%;
|
||
|
|
|
||
|
|
&.mat-mdc-tab-body-active {
|
||
|
|
position: relative;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
z-index: 1;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height &.mat-mdc-tab-body-active {
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-tab-body-content {
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
.mat-mdc-tab-group-dynamic-height & {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Usually the `visibility: hidden` added by the animation is enough to prevent focus from
|
||
|
|
// entering the collapsed content, but children with their own `visibility` can override it.
|
||
|
|
// This is a fallback that completely hides the content when the element becomes hidden.
|
||
|
|
// Note that we can't do this in the animation definition, because the style gets recomputed too
|
||
|
|
// late, breaking the animation because Angular didn't have time to figure out the target height.
|
||
|
|
// This can also be achieved with JS, but it has issues when starting an animation before
|
||
|
|
// the previous one has finished.
|
||
|
|
&[style*='visibility: hidden'] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|