Improvements to 'buffer-bar-color'

* buffer-bar-color:
  Make buffer and unbuffered part of progress more distinct (fixes #280)
master
Addy Osmani 2015-05-07 19:15:20 +01:00
commit f09e46e200
2 changed files with 4 additions and 3 deletions

View File

@ -243,7 +243,7 @@ $range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
/* ========== Progress ========== */
$progress-main-color: unquote("rgb(#{$color-primary})") !default;
$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
$progress-fallback-buffer-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
/* ========== List ========== */

View File

@ -50,7 +50,7 @@
// Webkit only
@supports (-webkit-appearance:none) {
.mdl-js-progress:not(.mdl-progress__indeterminate) > .auxbar {
.mdl-js-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
linear-gradient(to right, $progress-main-color, $progress-main-color);
mask: url('/images/buffer.svg');
@ -58,7 +58,8 @@
}
.mdl-js-progress:not(.mdl-progress__indeterminate) > .auxbar {
background-color: $progress-fallback-buffer-color;
background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
linear-gradient(to right, $progress-main-color, $progress-main-color);
}
.mdl-js-progress.mdl-progress__indeterminate > .bar1 {