Skip to content

Commit

Permalink
fix(tabs): ink bar not visible in high contrast mode (#9997)
Browse files Browse the repository at this point in the history
Adds a fallback that makes the ink bar visible in high contrast mode, allowing users to see which tab is selected.
  • Loading branch information
crisbeto authored and andrewseguin committed Feb 20, 2018
1 parent d1011e8 commit 1ba04eb
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion src/lib/tabs/_tabs-common.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../core/style/variables';
@import '../../cdk/a11y/a11y';

$mat-tab-bar-height: 48px !default;
$mat-tab-animation-duration: 500ms !default;
Expand Down Expand Up @@ -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;
}
}

0 comments on commit 1ba04eb

Please sign in to comment.