diff --git a/scss/_progress.scss b/scss/_progress.scss index 61e13b0528..382307b45a 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -19,12 +19,19 @@ margin-bottom: $spacer-y; } .progress[value] { - // IE10 uses `color` to set the bar background-color - color: #0074d9; + // Set overall background + background-color: #eee; // Remove Firefox and Opera border border: 0; // Reset the default appearance appearance: none; + // Set overall border radius + @include border-radius($border-radius); +} +.progress[value]::-ms-fill { + background-color: #0074d9; + // Remove right-hand border of value bar from IE10+/Edge + border: 0; } .progress[value]::-webkit-progress-bar { background-color: #eee; @@ -111,6 +118,10 @@ @include gradient-striped(); background-size: $spacer-y $spacer-y; } +.progress-striped[value]::-ms-fill { + @include gradient-striped(); + background-size: $spacer-y $spacer-y; +} // IE9 @media screen and (min-width:0\0) { .progress-bar-striped { diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss index e174141dc8..9622d790b2 100644 --- a/scss/mixins/_progress.scss +++ b/scss/mixins/_progress.scss @@ -9,6 +9,11 @@ background-color: $color; } + // IE10+, Microsoft Edge + &[value]::-ms-fill { + background-color: $color; + } + // IE9 @media screen and (min-width:0\0) { .progress-bar {