progress bar for IE10+/Edge (radius, use ::-ms-fill, add variant mixins, striped...

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 61e13b052865de18703043b8b53a784a55c76687..382307b45a1a1eaacdfe82e2912dfae8c3f792e9 100644 (file)
--- 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 e174141dc8cd91b092c57d00d2bd90505f96eb8b..9622d790b2521d3fc3cc32117b4a1fd6393cfd30 100644 (file)
--- 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 {