Skip to content
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