Rewrite progress component without <progress> element

- <progress> element didn't allow animation, labels overlaid, multiple bars, etc.

- Revamps CSS to use something more similar to v3's implementation

- Ditches variant mixin for `bg-` utils

- Rebuilds docs to match, including adding a new Height section for customizing that.

Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.

scss/_mixins.scss

@@ -43,7 +43,6 @@
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
-@import "mixins/progress";
 @import "mixins/table-row";
 
 // // Skins

scss/_progress.scss

@@ -1,103 +1,32 @@
-//
 // Progress animations
-//
-
 @keyframes progress-bar-stripes {
-  from { background-position: $spacer-y 0; }
+  from { background-position: $progress-height 0; }
   to { background-position: 0 0; }
 }
 
-
-//
 // Basic progress bar
-//
-
 .progress {
-  display: block;
-  width: 100%;
-  height: $spacer-y; // todo: make a new var for this
-  margin-bottom: $spacer-y;
+  display: flex;
   overflow: hidden; // force rounded corners by cropping it
-}
-.progress[value] {
-  // Set overall background
+  font-size: $progress-font-size;
+  line-height: $progress-height;
+  text-align: center;
   background-color: $progress-bg;
-  // Remove Firefox and Opera border
-  border: 0;
-  // Reset the default appearance
-  appearance: none;
-  // Set overall border radius
   @include border-radius($progress-border-radius);
 }
-
-// Filled-in portion of the bar
-.progress[value]::-ms-fill {
-  background-color: $progress-bar-color;
-  // Remove right-hand border of value bar from IE10+/Edge
-  border: 0;
-}
-.progress[value]::-moz-progress-bar {
-  background-color: $progress-bar-color;
-}
-.progress[value]::-webkit-progress-value {
-  background-color: $progress-bar-color;
+.progress-bar {
+  height: $progress-height;
+  color: $progress-bar-color;
+  background-color: $progress-bar-bg;
 }
 
-// Unfilled portion of the bar
-.progress[value]::-webkit-progress-bar {
-  background-color: $progress-bg;
-  @include box-shadow($progress-box-shadow);
-}
-base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
-.progress[value] {
-  background-color: $progress-bg;
-  @include box-shadow($progress-box-shadow);
-}
-
-
-//
 // Striped
-//
-
-.progress-striped[value]::-webkit-progress-value {
+.progress-bar-striped {
   @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-moz-progress-bar {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
-}
-.progress-striped[value]::-ms-fill {
-  @include gradient-striped();
-  background-size: $spacer-y $spacer-y;
+  background-size: $progress-height $progress-height;
 }
 
-
-//
 // Animated
-//
-
-.progress-animated[value]::-webkit-progress-value {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-.progress-animated[value]::-moz-progress-bar {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-
-//
-// Variations
-//
-
-.progress-success {
-  @include progress-variant($progress-bar-success-bg);
-}
-.progress-info {
-  @include progress-variant($progress-bar-info-bg);
-}
-.progress-warning {
-  @include progress-variant($progress-bar-warning-bg);
-}
-.progress-danger {
-  @include progress-variant($progress-bar-danger-bg);
+.progress-bar-animated {
+  animation: progress-bar-stripes $progress-bar-animation-timing;
 }

scss/_variables.scss

@@ -852,17 +852,14 @@ $alert-danger-border:         $state-danger-border !default;
 
 // Progress bars
 
-$progress-bg:                 $gray-lighter !default;
-$progress-bar-color:          $brand-primary !default;
-$progress-border-radius:      $border-radius !default;
-$progress-box-shadow:         inset 0 .1rem .1rem rgba($black,.1) !default;
-
-$progress-bar-bg:             $brand-primary !default;
-$progress-bar-success-bg:     $brand-success !default;
-$progress-bar-warning-bg:     $brand-warning !default;
-$progress-bar-danger-bg:      $brand-danger !default;
-$progress-bar-info-bg:        $brand-info !default;
-
+$progress-height:               1rem !default;
+$progress-font-size:            .75rem !default;
+$progress-bg:                   $gray-lighter !default;
+$progress-border-radius:        $border-radius !default;
+$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
+$progress-bar-color:            $white !default;
+$progress-bar-bg:               $brand-primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
 
 // List group
 

scss/mixins/_progress.scss

@@ -1,16 +0,0 @@
-// Progress bars
-
-@mixin progress-variant($color) {
-  &[value]::-webkit-progress-value {
-    background-color: $color;
-  }
-
-  &[value]::-moz-progress-bar {
-    background-color: $color;
-  }
-
-  // IE10+, Microsoft Edge
-  &[value]::-ms-fill {
-    background-color: $color;
-  }
-}