Skip to content

fix(progress-bar): not usable in high contrast mode #11651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/lib/progress-bar/progress-bar.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import '../core/style/variables';
@import '../core/style/vendor-prefixes';
@import '../core/style/noop-animation';
@import '../../cdk/a11y/a11y';

$mat-progress-bar-height: 5px !default;
$mat-progress-bar-full-animation-duration: 2000ms !default;
Expand Down Expand Up @@ -30,6 +31,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
// The width is set to be 10px longer than the container as it will be translated 10px
// during the background scroll animation.
width: calc(100% + 10px);

@include cdk-high-contrast {
display: none;
}
}

// The progress bar buffer is the bar indicator showing the buffer value and is only visible
Expand All @@ -38,6 +43,11 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
@include _noop-animation();
transform-origin: top left;
transition: transform $mat-progress-bar-piece-animation-duration ease;

@include cdk-high-contrast {
border-top: solid 5px;
opacity: 0.5;
}
}

// The secondary progress bar is only used in the indeterminate animation, because of this it
Expand All @@ -52,6 +62,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
animation: none;
transform-origin: top left;
transition: transform $mat-progress-bar-piece-animation-duration ease;

@include cdk-high-contrast {
border-top: solid $mat-progress-bar-height;
}
}

// A pseudo element is created for each progress bar bar that fills with the indicator color.
Expand Down Expand Up @@ -124,6 +138,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
@include backface-visibility(hidden);
animation: mat-progress-bar-background-scroll
$mat-progress-bar-piece-animation-duration infinite linear;

// Needs to be explicit here so it can overwrite the `display: none`
// in all other variants in high contrast mode.
display: block;
}
}
}
Expand Down