Refactor colors and progress bars

* Buttons and progress bars now make use of more semantic global @brand- colors
* Progress bars have been rewritten to reduce the number of possible selectors
* Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS
This commit is contained in:
Mark Otto 2013-02-01 16:21:38 -08:00
parent 2553d74b54
commit d53af49afe
5 changed files with 180 additions and 186 deletions

View File

@ -4102,7 +4102,7 @@ a.counter:hover {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
} }
.progress .bar { .progress-bar {
float: left; float: left;
width: 0; width: 0;
height: 100%; height: 100%;
@ -4110,9 +4110,7 @@ a.counter:hover {
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #149bdf; background-color: #428bca;
/*#gradient > .vertical(#149bdf, #0480be);*/
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -4124,8 +4122,8 @@ a.counter:hover {
transition: width 0.6s ease; transition: width 0.6s ease;
} }
.progress-striped .bar { .progress-striped .progress-bar {
background-color: #149bdf; background-color: #428bca;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4137,7 +4135,7 @@ a.counter:hover {
background-size: 40px 40px; background-size: 40px 40px;
} }
.progress.active .bar { .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite;
@ -4145,16 +4143,12 @@ a.counter:hover {
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
.progress-danger .bar, .progress-bar-danger {
.progress .bar-danger { background-color: #d9534f;
background-color: #ee5f5b;
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
} }
.progress-danger.progress-striped .bar, .progress-striped .progress-bar-danger {
.progress-striped .bar-danger { background-color: #d9534f;
background-color: #ee5f5b;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4162,16 +4156,12 @@ a.counter:hover {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
.progress-success .bar, .progress-bar-success {
.progress .bar-success { background-color: #5cb85c;
background-color: #62c462;
/*#gradient > .vertical(#62c462, #57a957);*/
} }
.progress-success.progress-striped .bar, .progress-striped .progress-bar-success {
.progress-striped .bar-success { background-color: #5cb85c;
background-color: #62c462;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4179,15 +4169,24 @@ a.counter:hover {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
.progress-info .bar, .progress-bar-warning {
.progress .bar-info { background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-color: #f0ad4e;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de; background-color: #5bc0de;
/*#gradient > .vertical(#5bc0de, #339bb9);*/
} }
.progress-info.progress-striped .bar, .progress-striped .progress-bar-info {
.progress-striped .bar-info {
background-color: #5bc0de; background-color: #5bc0de;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4196,23 +4195,6 @@ a.counter:hover {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
.progress-warning .bar,
.progress .bar-warning {
background-color: #fbb450;
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
}
.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
background-color: #fbb450;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.accordion { .accordion {
margin-bottom: 20px; margin-bottom: 20px;
} }

View File

@ -1614,7 +1614,7 @@
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1> <h1>Progress bars</h1>
</div> </div>
<h2>Examples and markup</h2> <h2>Examples and markup</h2>
@ -1623,12 +1623,12 @@
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
<div class="bar" style="width: 60%;"></div> <div class="progress-bar" style="width: 60%;"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 60%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1636,12 +1636,12 @@
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div> <div class="progress-bar" style="width: 20%;"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1649,12 +1649,12 @@
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="bar" style="width: 45%"></div> <div class="progress-bar" style="width: 45%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-striped active"&gt; &lt;div class="progress progress-striped active"&gt;
&lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1662,16 +1662,16 @@
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
<div class="bar bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="bar bar-warning" style="width: 20%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="bar bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress"&gt; &lt;div class="progress"&gt;
&lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1684,62 +1684,62 @@
<h3>Additional colors</h3> <h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-info" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
<div class="progress progress-success" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div> <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div> </div>
<div class="progress progress-warning" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div> </div>
<div class="progress progress-danger"> <div class="progress">
<div class="bar" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-info"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-success"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-warning"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-danger"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Striped bars</h3> <h3>Striped bars</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p> <p>Similar to the solid colors, we have varied striped progress bars.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div> <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div> </div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div> </div>
<div class="progress progress-danger progress-striped"> <div class="progress progress-striped">
<div class="bar" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-info progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-success progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-warning progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-danger progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

View File

@ -1546,7 +1546,7 @@
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1> <h1>Progress bars</h1>
</div> </div>
<h2>Examples and markup</h2> <h2>Examples and markup</h2>
@ -1555,12 +1555,12 @@
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
<div class="bar" style="width: 60%;"></div> <div class="progress-bar" style="width: 60%;"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 60%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1568,12 +1568,12 @@
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div> <div class="progress-bar" style="width: 20%;"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1581,12 +1581,12 @@
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="bar" style="width: 45%"></div> <div class="progress-bar" style="width: 45%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-striped active"&gt; &lt;div class="progress progress-striped active"&gt;
&lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt; &lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1594,16 +1594,16 @@
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
<div class="bar bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="bar bar-warning" style="width: 20%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="bar bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress"&gt; &lt;div class="progress"&gt;
&lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1616,62 +1616,62 @@
<h3>Additional colors</h3> <h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-info" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
<div class="progress progress-success" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div> <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div> </div>
<div class="progress progress-warning" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div> </div>
<div class="progress progress-danger"> <div class="progress">
<div class="bar" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-info"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-success"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-warning"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-danger"&gt; &lt;div class="progress"&gt;
&lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Striped bars</h3> <h3>Striped bars</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p> <p>Similar to the solid colors, we have varied striped progress bars.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div> <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div> </div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div> </div>
<div class="progress progress-danger progress-striped"> <div class="progress progress-striped">
<div class="bar" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="progress progress-info progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-success progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-warning progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="progress progress-danger progress-striped"&gt; &lt;div class="progress progress-striped"&gt;
&lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt; &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

View File

@ -3,8 +3,8 @@
// -------------------------------------------------- // --------------------------------------------------
// ANIMATIONS // Bar animations
// ---------- // -------------------------
// Webkit // Webkit
@-webkit-keyframes progress-bar-stripes { @-webkit-keyframes progress-bar-stripes {
@ -38,21 +38,21 @@
// THE BARS // Bar itself
// -------- // -------------------------
// Outer container // Outer container
.progress { .progress {
overflow: hidden; overflow: hidden;
height: @line-height-base; height: @line-height-base;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
background-color: #f5f5f5; background-color: @progress-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
} }
// Bar of progress // Bar of progress
.progress .bar { .progress-bar {
float: left; float: left;
width: 0%; width: 0%;
height: 100%; height: 100%;
@ -60,21 +60,20 @@
color: #fff; color: #fff;
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);
background-color: #149bdf; background-color: @progress-bar-bg;
/*#gradient > .vertical(#149bdf, #0480be);*/
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box); .box-sizing(border-box);
.transition(width .6s ease); .transition(width .6s ease);
} }
// Striped bars // Striped bars
.progress-striped .bar { .progress-striped .progress-bar {
#gradient > .striped(#149bdf); #gradient > .striped(@progress-bar-bg);
.background-size(40px 40px); .background-size(40px 40px);
} }
// Call animation for the active one // Call animation for the active one
.progress.active .bar { .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite;
@ -84,41 +83,37 @@
// COLORS // Variations
// ------ // -------------------------
// Danger (red) // Danger (red)
.progress-danger .bar, .progress .bar-danger { .progress-bar-danger {
background-color: #ee5f5b; background-color: @progress-bar-danger-bg;
/*#gradient > .vertical(#ee5f5b, #c43c35);*/ .progress-striped & {
} #gradient > .striped(@progress-bar-danger-bg);
.progress-danger.progress-striped .bar, .progress-striped .bar-danger { }
#gradient > .striped(#ee5f5b);
} }
// Success (green) // Success (green)
.progress-success .bar, .progress .bar-success { .progress-bar-success {
background-color: #62c462; background-color: @progress-bar-success-bg;
/*#gradient > .vertical(#62c462, #57a957);*/ .progress-striped & {
} #gradient > .striped(@progress-bar-success-bg);
.progress-success.progress-striped .bar, .progress-striped .bar-success { }
#gradient > .striped(#62c462);
}
// Info (teal)
.progress-info .bar, .progress .bar-info {
background-color: #5bc0de;
/*#gradient > .vertical(#5bc0de, #339bb9);*/
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
} }
// Warning (orange) // Warning (orange)
.progress-warning .bar, .progress .bar-warning { .progress-bar-warning {
background-color: lighten(#f89406, 15%); background-color: @progress-bar-warning-bg;
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/ .progress-striped & {
#gradient > .striped(@progress-bar-warning-bg);
}
} }
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(#f89406, 15%)); // Info (teal)
.progress-bar-info {
background-color: @progress-bar-info-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-info-bg);
}
} }

View File

@ -9,26 +9,33 @@
// Grays // Grays
// ------------------------- // -------------------------
@grayDarker: #222; @grayDarker: #222;
@grayDark: #333; @grayDark: #333;
@gray: #555; @gray: #555;
@grayLight: #999; @grayLight: #999;
@grayLighter: #eee; @grayLighter: #eee;
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@body-background: #fff; @body-background: #fff;
@text-color: @grayDark; @text-color: @grayDark;
// Links // Links
// ------------------------- // -------------------------
@link-color: #428bca; @link-color: #428bca;
@link-color-hover: darken(@link-color, 15%); @link-color-hover: darken(@link-color, 15%);
// Typography // Typography
// ------------------------- // -------------------------
@ -78,19 +85,19 @@
@btn-background: #a7a9aa; @btn-background: #a7a9aa;
@btn-border: @btn-background; @btn-border: @btn-background;
@btn-background-primary: @link-color; @btn-background-primary: @brand-primary;
@btn-border-primary: @btn-background-primary; @btn-border-primary: @btn-background-primary;
@btn-background-success: #5cb85c; @btn-background-success: @brand-success;
@btn-border-success: @btn-background-success; @btn-border-success: @btn-background-success;
@btn-background-warning: #f0ad4e; @btn-background-warning: @brand-warning;
@btn-border-warning: @btn-background-warning; @btn-border-warning: @btn-background-warning;
@btn-background-danger: #d9534f; @btn-background-danger: @brand-danger;
@btn-border-danger: @btn-background-danger; @btn-border-danger: @btn-background-danger;
@btn-background-info: #5bc0de; @btn-background-info: @brand-info;
@btn-border-info: @btn-background-info; @btn-border-info: @btn-background-info;
@ -253,6 +260,16 @@
@popover-arrow-outer-color: rgba(0,0,0,.25); @popover-arrow-outer-color: rgba(0,0,0,.25);
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------