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 0000000000..81c6958e16 --- /dev/null +++ b/doc/includes/progress_bars/examples_progress_bars_stacked.html @@ -0,0 +1,9 @@ +{{#markdown}} +```html +
+ + + +
+``` +{{/markdown}} diff --git a/doc/pages/components/progress_bars.html b/doc/pages/components/progress_bars.html index b096564452..dfc11be5da 100644 --- a/doc/pages/components/progress_bars.html +++ b/doc/pages/components/progress_bars.html @@ -49,6 +49,25 @@

Rendered HTML

+

Stacked

+ +Progress bars can be stacked. + +
+
+

HTML

+{{> examples_progress_bars_stacked}} +
+
+

Rendered HTML

+
+ + + +
+
+
+ *** ## Accessibility diff --git a/scss/foundation/components/_progress-bars.scss b/scss/foundation/components/_progress-bars.scss index 87f88ed832..65af4cdec3 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); }