1 files changed, 31 insertions, 53 deletions

diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss
index 382307b..8cac202 100644
--- a/assets/stylesheets/bootstrap/_progress.scss
+++ b/assets/stylesheets/bootstrap/_progress.scss
@@ -20,7 +20,7 @@
 }
 .progress[value] {
   // Set overall background
-  background-color: #eee;
+  background-color: $progress-bg;
   // Remove Firefox and Opera border
   border: 0;
   // Reset the default appearance
@@ -28,80 +28,58 @@
   // Set overall border radius
   @include border-radius($border-radius);
 }
+
+// Filled-in portion of the bar
 .progress[value]::-ms-fill {
-  background-color: #0074d9;
+  background-color: $progress-bar-color;
   // Remove right-hand border of value bar from IE10+/Edge
   border: 0;
 }
-.progress[value]::-webkit-progress-bar {
-  background-color: #eee;
-  @include border-radius($border-radius);
-  @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
-}
-.progress[value]::-webkit-progress-value::before {
-  content: attr(value);
+.progress[value]::-moz-progress-bar {
+  background-color: $progress-bar-color;
+  @include border-left-radius($border-radius);
 }
 .progress[value]::-webkit-progress-value {
-  background-color: #0074d9;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
+  background-color: $progress-bar-color;
+  @include border-left-radius($border-radius);
+}
+// Tweaks for full progress bar
+.progress[value="100"]::-moz-progress-bar {
+  @include border-right-radius($border-radius);
 }
 .progress[value="100"]::-webkit-progress-value {
-  border-top-right-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
+  @include border-right-radius($border-radius);
 }
 
-// Firefox styles must be entirely separate or it busts Webkit styles.
-//
-// Commented out for now because linter.
-//
-// $-moz-document url-prefix() {
-//   .progress[value] {
-//     background-color: #eee;
-//     .border-radius($border-radius);
-//     .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;
-//     border-bottom-left-radius: $border-radius;
-//   }
-//   .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;
-//     border-bottom-right-radius: $border-radius;
-//   }
-// }
+// Unfilled portion of the bar
+.progress[value]::-webkit-progress-bar {
+  background-color: $progress-bg;
+  @include border-radius($border-radius);
+  @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 border-radius($border-radius);
+  @include box-shadow($progress-box-shadow);
+}
 
 // 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;
+    background-color: $progress-bg;
     @include border-radius($border-radius);
-    @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+    @include box-shadow($progress-box-shadow);
   }
   .progress-bar {
     display: inline-block;
     height: $spacer-y;
     text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
-    background-color: #0074d9;
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-  .progress[width^="0"] {
-    min-width: 2rem;
-    color: $gray-light;
-    background-color: transparent;
-    background-image: none;
+    background-color: $progress-bar-color;
+    @include border-left-radius($border-radius);
   }
   .progress[width="100%"] {
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
+    @include border-right-radius($border-radius);
   }
 }