Organize existing .progress styles

diff --git a/scss/_progress.scss b/scss/_progress.scss
index b18695f98b384dcce9fcd23be9cfa96444dae4d2..c1a65fb9b3713f5cc35f5f9a458eae1a5122cf77 100644 (file)
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -28,16 +28,13 @@
   // Set overall border radius
   @include border-radius($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]::-webkit-progress-bar {
-  background-color: $progress-bg;
-  @include border-radius($border-radius);
-  @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
-}
 .progress[value]::-webkit-progress-value {
   background-color: $progress-bar-color;
   border-top-left-radius: $border-radius;
@@ -48,6 +45,13 @@
   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(inset 0 .1rem .1rem rgba(0,0,0,.1));
+}
+
 // Firefox styles must be entirely separate or it busts Webkit styles.
 //
 // Commented out for now because linter.