Refactor: drop all custom .progress-bar styles and replace with <progress> element

1 files changed, 141 insertions, 55 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index ebedf2af0..c25791d4b 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -4062,7 +4062,7 @@ a.list-group-item.active > .badge,
 }
 @-webkit-keyframes progress-bar-stripes {
   from {
-    background-position: 40px 0;
+    background-position: 24px 0;
   }
   to {
     background-position: 0 0;
@@ -4070,7 +4070,7 @@ a.list-group-item.active > .badge,
 }
 @-o-keyframes progress-bar-stripes {
   from {
-    background-position: 40px 0;
+    background-position: 24px 0;
   }
   to {
     background-position: 0 0;
@@ -4078,89 +4078,175 @@ a.list-group-item.active > .badge,
 }
 @keyframes progress-bar-stripes {
   from {
-    background-position: 40px 0;
+    background-position: 24px 0;
   }
   to {
     background-position: 0 0;
   }
 }
 .progress {
+  display: block;
+  width: 100%;
   height: 24px;
   margin-bottom: 24px;
-  overflow: hidden;
-  background-color: #f5f5f5;
+}
+.progress[value] {
+  color: #0074d9;
+  border: 0;
+
+  appearance: none;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
   border-radius: .2rem;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+  -webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
+          box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
 }
-.progress-bar {
-  float: left;
-  width: 0;
-  height: 100%;
-  font-size: .85rem;
-  line-height: 24px;
-  color: #fff;
-  text-align: center;
-  background-color: #027de7;
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-  -webkit-transition: width .6s ease;
-       -o-transition: width .6s ease;
-          transition: width .6s ease;
-}
-.progress-striped .progress-bar,
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  -webkit-background-size: 40px 40px;
-          background-size: 40px 40px;
+.progress[value]::-webkit-progress-value::before {
+  content: attr(value);
 }
-.progress.active .progress-bar,
-.progress-bar.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-       -o-animation: progress-bar-stripes 2s linear infinite;
-          animation: progress-bar-stripes 2s linear infinite;
+.progress[value]::-webkit-progress-value {
+  background-color: #0074d9;
+  border-top-left-radius: .2rem;
+  border-bottom-left-radius: .2rem;
 }
-.progress-bar[aria-valuenow="0"] {
-  min-width: 30px;
+.progress[value="0"]::-webkit-progress-value {
+  min-width: 2rem;
   color: #818a91;
   background-color: transparent;
   background-image: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
-.progress-bar-success {
-  background-color: #5cb85c;
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+}
+@-moz-document url-prefix() {
+  .progress[value] {
+    background-color: #eee;
+    border-radius: .2rem;
+    box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
+  }
+  .progress[value]::-moz-progress-bar {
+    background-color: #0074d9;
+    border-top-left-radius: .2rem;
+    border-bottom-left-radius: .2rem;
+  }
+  .progress[value="0"]::-moz-progress-bar {
+    min-width: 2rem;
+    color: #818a91;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[value="100"]::-moz-progress-bar {
+    border-top-right-radius: .2rem;
+    border-bottom-right-radius: .2rem;
+  }
+}
+@media screen and (min-width:0\0) {
+  .progress {
+    background-color: #eee;
+    border-radius: .2rem;
+    -webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
+            box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
+  }
+  .progress-bar {
+    display: inline-block;
+    height: 24px;
+    text-indent: -999rem;
+    background-color: #0074d9;
+    border-top-left-radius: .2rem;
+    border-bottom-left-radius: .2rem;
+  }
+  .progress[width^="0"] {
+    min-width: 2rem;
+    color: #818a91;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: .2rem;
+    border-bottom-right-radius: .2rem;
+  }
 }
-.progress-striped .progress-bar-success {
+.progress-striped[value]::-webkit-progress-value {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  -webkit-background-size: 24px 24px;
+          background-size: 24px 24px;
 }
-.progress-bar-info {
-  background-color: #5bc0de;
-}
-.progress-striped .progress-bar-info {
+.progress-striped[value]::-moz-progress-bar {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-size: 24px 24px;
+}
+@media screen and (min-width:0\0) {
+  .progress-bar-striped {
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    -webkit-background-size: 24px 24px;
+            background-size: 24px 24px;
+  }
+}
+.progress-animated[value]::-webkit-progress-value {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
+.progress-animated[value]::-moz-progress-bar {
+  animation: progress-bar-stripes 2s linear infinite;
+}
+@media screen and (min-width:0\0) {
+  .progress-animated .progress-bar-striped {
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+         -o-animation: progress-bar-stripes 2s linear infinite;
+            animation: progress-bar-stripes 2s linear infinite;
+  }
+}
+.progress-success[value]::-webkit-progress-value {
+  background-color: #5cb85c;
+}
+.progress-success[value]::-moz-progress-bar {
+  background-color: #5cb85c;
 }
-.progress-bar-warning {
+@media screen and (min-width:0\0) {
+  .progress-success .progress-bar {
+    background-color: #5cb85c;
+  }
+}
+.progress-info[value]::-webkit-progress-value {
+  background-color: #5bc0de;
+}
+.progress-info[value]::-moz-progress-bar {
+  background-color: #5bc0de;
+}
+@media screen and (min-width:0\0) {
+  .progress-info .progress-bar {
+    background-color: #5bc0de;
+  }
+}
+.progress-warning[value]::-webkit-progress-value {
   background-color: #f0ad4e;
 }
-.progress-striped .progress-bar-warning {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+.progress-warning[value]::-moz-progress-bar {
+  background-color: #f0ad4e;
 }
-.progress-bar-danger {
+@media screen and (min-width:0\0) {
+  .progress-warning .progress-bar {
+    background-color: #f0ad4e;
+  }
+}
+.progress-danger[value]::-webkit-progress-value {
   background-color: #d9534f;
 }
-.progress-striped .progress-bar-danger {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+.progress-danger[value]::-moz-progress-bar {
+  background-color: #d9534f;
+}
+@media screen and (min-width:0\0) {
+  .progress-danger .progress-bar {
+    background-color: #d9534f;
+  }
 }
 .media,
 .media-body {