diff options
| author | Mark Otto <[email protected]> | 2012-08-20 11:13:07 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-08-20 11:13:07 -0700 |
| commit | 47697c5f352c08294fb8a077e1ab27dce7decdb9 (patch) | |
| tree | 361d87fee660f59842bc332d6cc13d7bea76894c | |
| parent | afaee0ca136033811f48cefc6873fc62fee02923 (diff) | |
| parent | a1951ed7c08bbaad37e323b460f440d9598d364e (diff) | |
| download | bootstrap-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.html | 20 | ||||
| -rw-r--r-- | less/progress-bars.less | 17 |
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 @@ </div> </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"> +<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> +</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%)); } |
