rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'progress-multi-2.1.0-wip' of https://github.com/jpommerening/bootstrap into jpommerening-progress-multi-2.1.0-wip

Browse Source
This commit is contained in:
Mark Otto 2012-08-20 11:13:07 -07:00
commit 47697c5f35
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>
</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">

17
less/progress-bars.less
View File

@ -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%));
}