From: cwperry <chrisp@containerstore.com>
Date: Thu, 30 Apr 2015 11:28:36 +0000 (-0500)
Subject: Added the ability to stack progress bars.
X-Git-Tag: v5.5.3~57^2~4^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6514%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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
index 000000000..81c6958e1
--- /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 b09656445..dfc11be5d 100644
--- 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 87f88ed83..65af4cdec 100644
--- 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); }