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

2 files changed, 137 insertions, 65 deletions

diff --git a/less/mixins/progress-bar.less b/less/mixins/progress-bar.less
index f07996a34..e681c9555 100644
--- a/less/mixins/progress-bar.less
+++ b/less/mixins/progress-bar.less
@@ -1,10 +1,15 @@
 // Progress bars
 
-.progress-bar-variant(@color) {
-  background-color: @color;
-
-  // Deprecated parent class requirement as of v3.2.0
-  .progress-striped & {
-    #gradient > .striped();
+.progress-variant(@color) {
+  &[value]::-webkit-progress-value {
+    background-color: @color;
+  }
+  &[value]::-moz-progress-bar {
+    background-color: @color;
+  }
+  @media screen and (~"min-width:0\0") {
+    .progress-bar {
+      background-color: @color;
+    }
   }
 }
diff --git a/less/progress-bars.less b/less/progress-bars.less
index c8ff47b31..dfaad105e 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -3,98 +3,165 @@
 // --------------------------------------------------
 
 
-// Bar animations
-// -------------------------
+//
+// Progress animations
+//
 
-// WebKit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from  { background-position: @line-height-computed 0; }
   to    { background-position: 0 0; }
 }
 
-// Spec and IE10+
 @keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from  { background-position: @line-height-computed 0; }
   to    { background-position: 0 0; }
 }
 
 
+//
+// Basic progress bar
+//
 
-// Bar itself
-// -------------------------
-
-// Outer container
 .progress {
-  overflow: hidden;
+  display: block;
+  width: 100%;
   height: @line-height-computed;
   margin-bottom: @line-height-computed;
-  background-color: @progress-bg;
+}
+.progress[value] {
+  // Reset the default appearance
+  appearance: none;
+  // Remove Firefox and Opera border
+  border: 0;
+  // IE10 uses `color` to set the bar background-color
+  color: #0074d9;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
   .border-radius(@border-radius-base);
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+  .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+}
+.progress[value]::-webkit-progress-value::before {
+  content: attr(value);
+}
+.progress[value]::-webkit-progress-value {
+  background-color: #0074d9;
+  border-top-left-radius: @border-radius-base;
+  border-bottom-left-radius: @border-radius-base;
+}
+.progress[value="0"]::-webkit-progress-value {
+  color: @gray-light;
+  min-width: 2rem;
+  background-color: transparent;
+  background-image: none;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: @border-radius-base;
+  border-bottom-right-radius: @border-radius-base;
 }
 
-// Bar of progress
-.progress-bar {
-  float: left;
-  width: 0%;
-  height: 100%;
-  font-size: @font-size-small;
-  line-height: @line-height-computed;
-  color: @progress-bar-color;
-  text-align: center;
-  background-color: @progress-bar-bg;
-  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
-  transition: width .6s ease;
+// Firefox styles must be entirely separate or it busts Webkit styles.
+@-moz-document url-prefix() {
+  .progress[value] {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress[value]::-moz-progress-bar {
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[value="0"]::-moz-progress-bar {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[value="100"]::-moz-progress-bar {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
 }
 
-// Striped bars
+// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
+@media screen and (~"min-width:0\0") {
+  .progress {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress-bar {
+    display: inline-block;
+    height: @line-height-computed;
+    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[width^="0"] {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
+}
+
+
 //
-// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar-striped` class, which you just add to an existing
-// `.progress-bar`.
-.progress-striped .progress-bar,
-.progress-bar-striped {
+// Striped
+//
+
+.progress-striped[value]::-webkit-progress-value {
+  #gradient > .striped();
+  background-size: @line-height-computed @line-height-computed;
+}
+.progress-striped[value]::-moz-progress-bar {
   #gradient > .striped();
-  background-size: 40px 40px;
+  background-size: @line-height-computed @line-height-computed;
+}
+@media screen and (~"min-width:0\0") {
+  .progress-bar-striped {
+    #gradient > .striped();
+    background-size: @line-height-computed @line-height-computed;
+  }
 }
 
-// Call animation for the active one
+
+//
+// Animated
 //
-// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar.active` approach.
-.progress.active .progress-bar,
-.progress-bar.active {
+
+.progress-animated[value]::-webkit-progress-value {
   animation: progress-bar-stripes 2s linear infinite;
 }
-
-// Account for lower percentages
-.progress-bar {
-  &[aria-valuenow="0"] {
-    color: @gray-light;
-    min-width: 30px;
-    background-color: transparent;
-    background-image: none;
-    .box-shadow(none);
+.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 {
+    animation: progress-bar-stripes 2s linear infinite;
   }
 }
 
 
-
+//
 // Variations
-// -------------------------
+//
 
-.progress-bar-success {
-  .progress-bar-variant(@progress-bar-success-bg);
+.progress-success {
+  .progress-variant(@progress-bar-success-bg);
 }
-
-.progress-bar-info {
-  .progress-bar-variant(@progress-bar-info-bg);
+.progress-info {
+  .progress-variant(@progress-bar-info-bg);
 }
-
-.progress-bar-warning {
-  .progress-bar-variant(@progress-bar-warning-bg);
+.progress-warning {
+  .progress-variant(@progress-bar-warning-bg);
 }
-
-.progress-bar-danger {
-  .progress-bar-variant(@progress-bar-danger-bg);
+.progress-danger {
+  .progress-variant(@progress-bar-danger-bg);
 }