Added the ability to stack progress bars.

diff --git a/doc/includes/progress_bars/examples_progress_bars_stacked.html b/doc/includes/progress_bars/examples_progress_bars_stacked.html
new file mode 100644 (file)
index 0000000..81c6958
--- /dev/null
+++ b/doc/includes/progress_bars/examples_progress_bars_stacked.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+```html
+<div class="progress [small-# large-#] [radius round]">
+  <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span>
+  <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span>
+  <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span>
+</div>
+```
+{{/markdown}}

diff --git a/doc/pages/components/progress_bars.html b/doc/pages/components/progress_bars.html
index b0965644523e93ae83fd1ad609806838a7752de9..dfc11be5dade88356065148b1bdc8af3f4f6445f 100644 (file)
--- a/doc/pages/components/progress_bars.html
+++ b/doc/pages/components/progress_bars.html
@@ -49,6 +49,25 @@ Additional classes can be added to your progress bar to change its appearance.
   </div>
 </div>
 
+<h3>Stacked</h3>
+
+Progress bars can be stacked.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{> examples_progress_bars_stacked}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    <div class="progress large-9">
+      <span class="meter" style="width: 20%"></span>
+      <span class="meter success" style="width: 30%"></span>
+      <span class="meter alert" style="width: 30%"></span>
+    </div>
+  </div>
+</div>
+
 ***
 
 ## Accessibility

diff --git a/scss/foundation/components/_progress-bars.scss b/scss/foundation/components/_progress-bars.scss
index 87f88ed8322b8afc52327725f9e34a0a5dda8e52..65af4cdec33720a40baa1290908522de992dca41 100644 (file)
--- a/scss/foundation/components/_progress-bars.scss
+++ b/scss/foundation/components/_progress-bars.scss
@@ -47,6 +47,8 @@ $progress-meter-alert-color: $alert-color !default;
   background: $bg;
   display: block;
   height: 100%;
+  float: left;
+  width: 0%;
 }
 
 
@@ -60,6 +62,10 @@ $progress-meter-alert-color: $alert-color !default;
       // Meter
       .meter {
         @include progress-meter;
+
+        &.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
+        &.success { @include progress-meter($bg:$progress-meter-success-color); }
+        &.alert { @include progress-meter($bg:$progress-meter-alert-color); }
       }
       &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
       &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }