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

This commit is contained in:
Patrick H. Lauke 2015-12-10 22:29:54 +00:00
parent d5b57c3c4d
commit 97461a51a2
2 changed files with 18 additions and 2 deletions

View File

@ -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 {

View File

@ -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 {