Added the ability to stack progress bars.

foundation · Apr 30, 2015 · ece27e8 · knv · Nov 26, 2015 · ece27e8
1 parent 888e448
commit ece27e8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/doc/includes/progress_bars/examples_progress_bars_stacked.html 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
@@ -49,6 +49,25 @@ <h4>Rendered HTML</h4>
   </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
@@ -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); }