mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(tabs): ink bar not visible in high contrast mode (#9997)
Adds a fallback that makes the ink bar visible in high contrast mode, allowing users to see which tab is selected.
This commit is contained in:
committed by
Jeremy Elbourn
parent
ea3a01e7f1
commit
e24bb4254c
@@ -1,4 +1,5 @@
|
||||
@import '../core/style/variables';
|
||||
@import '../../cdk/a11y/a11y';
|
||||
|
||||
$mat-tab-bar-height: 48px !default;
|
||||
$mat-tab-animation-duration: 500ms !default;
|
||||
@@ -46,13 +47,20 @@ $mat-tab-animation-duration: 500ms !default;
|
||||
|
||||
// Mixin styles for the ink bar that displays near the active tab in the header.
|
||||
@mixin ink-bar {
|
||||
$height: 2px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
height: $height;
|
||||
transition: $mat-tab-animation-duration $ease-in-out-curve-function;
|
||||
|
||||
.mat-tab-group-inverted-header & {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@include cdk-high-contrast {
|
||||
outline: solid $height;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user