root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

stack mutliple progress bars

This commit is contained in:
Jonas Pommerening 2012-08-20 10:12:03 +02:00
parent e510306196
commit a1951ed7c0
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/components.html
View File

@ -2067,6 +2067,26 @@
</div> </div>
</pre> </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"> <hr class="bs-docs-separator">

17
less/progress-bars.less
View File

@ -56,6 +56,7 @@
width: 0%; width: 0%;
height: 100%; height: 100%;
color: @white; color: @white;
float: left;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@ -86,33 +87,33 @@
// ------ // ------
// Danger (red) // Danger (red)
.progress-danger .bar { .progress-danger .bar, .progress .bar-danger {
#gradient > .vertical(#ee5f5b, #c43c35); #gradient > .vertical(#ee5f5b, #c43c35);
} }
.progress-danger.progress-striped .bar { .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b); #gradient > .striped(#ee5f5b);
} }
// Success (green) // Success (green)
.progress-success .bar { .progress-success .bar, .progress .bar-success {
#gradient > .vertical(#62c462, #57a957); #gradient > .vertical(#62c462, #57a957);
} }
.progress-success.progress-striped .bar { .progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462); #gradient > .striped(#62c462);
} }
// Info (teal) // Info (teal)
.progress-info .bar { .progress-info .bar, .progress .bar-info {
#gradient > .vertical(#5bc0de, #339bb9); #gradient > .vertical(#5bc0de, #339bb9);
} }
.progress-info.progress-striped .bar { .progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de); #gradient > .striped(#5bc0de);
} }
// Warning (orange) // Warning (orange)
.progress-warning .bar { .progress-warning .bar, .progress .bar-warning {
#gradient > .vertical(lighten(@orange, 15%), @orange); #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%)); #gradient > .striped(lighten(@orange, 15%));
} }