rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
scss/_progress.scss
View File

@ -19,12 +19,19 @@
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
} }
.progress[value] { .progress[value] {
// IE10 uses `color` to set the bar background-color // Set overall background
color: #0074d9; background-color: #eee;
// Remove Firefox and Opera border // Remove Firefox and Opera border
border: 0; border: 0;
// Reset the default appearance // Reset the default appearance
appearance: none; 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 { .progress[value]::-webkit-progress-bar {
background-color: #eee; background-color: #eee;
@ -111,6 +118,10 @@
@include gradient-striped(); @include gradient-striped();
background-size: $spacer-y $spacer-y; background-size: $spacer-y $spacer-y;
} }
.progress-striped[value]::-ms-fill {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
// IE9 // IE9
@media screen and (min-width:0\0) { @media screen and (min-width:0\0) {
.progress-bar-striped { .progress-bar-striped {

5
scss/mixins/_progress.scss
View File

@ -9,6 +9,11 @@
background-color: $color; background-color: $color;
} }
// IE10+, Microsoft Edge
&[value]::-ms-fill {
background-color: $color;
}
// IE9 // IE9
@media screen and (min-width:0\0) { @media screen and (min-width:0\0) {
.progress-bar { .progress-bar {