aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-08-20 11:13:07 -0700
committerMark Otto <[email protected]>2012-08-20 11:13:07 -0700
commit47697c5f352c08294fb8a077e1ab27dce7decdb9 (patch)
tree361d87fee660f59842bc332d6cc13d7bea76894c
parentafaee0ca136033811f48cefc6873fc62fee02923 (diff)
parenta1951ed7c08bbaad37e323b460f440d9598d364e (diff)
downloadbootstrap-47697c5f352c08294fb8a077e1ab27dce7decdb9.tar.xz
bootstrap-47697c5f352c08294fb8a077e1ab27dce7decdb9.zip
Merge branch 'progress-multi-2.1.0-wip' of https://github.com/jpommerening/bootstrap into jpommerening-progress-multi-2.1.0-wip
-rw-r--r--docs/components.html20
-rw-r--r--less/progress-bars.less17
2 files changed, 29 insertions, 8 deletions
diff --git a/docs/components.html b/docs/components.html
index e4bb55188..0eb929d83 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2067,6 +2067,26 @@
&lt;/div&gt;
</pre>
+ <h3>Stacked</h3>
+ <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
+ <div class="bs-docs-example">
+ <div class="progress">
+ <div class="bar-success" style="width: 35%"></div>
+ <div class="bar-warning" style="width: 20%"></div>
+ <div class="bar-danger" style="width: 10%"></div>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+&lt;div class="progress"&gt;
+ &lt;div class="bar-success"
+ style="width: 35%;"&gt;&lt;/div&gt;
+ &lt;div class="bar-warning"
+ style="width: 20%;"&gt;&lt;/div&gt;
+ &lt;div class="bar-danger"
+ style="width: 10%;"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
<hr class="bs-docs-separator">
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 768f55ad9..c3de308eb 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -56,6 +56,7 @@
width: 0%;
height: 100%;
color: @white;
+ float: left;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -86,33 +87,33 @@
// ------
// Danger (red)
-.progress-danger .bar {
+.progress-danger .bar, .progress .bar-danger {
#gradient > .vertical(#ee5f5b, #c43c35);
}
-.progress-danger.progress-striped .bar {
+.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b);
}
// Success (green)
-.progress-success .bar {
+.progress-success .bar, .progress .bar-success {
#gradient > .vertical(#62c462, #57a957);
}
-.progress-success.progress-striped .bar {
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462);
}
// Info (teal)
-.progress-info .bar {
+.progress-info .bar, .progress .bar-info {
#gradient > .vertical(#5bc0de, #339bb9);
}
-.progress-info.progress-striped .bar {
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
}
// Warning (orange)
-.progress-warning .bar {
+.progress-warning .bar, .progress .bar-warning {
#gradient > .vertical(lighten(@orange, 15%), @orange);
}
-.progress-warning.progress-striped .bar {
+.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(@orange, 15%));
}