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
parent
2553d74b54
commit
d53af49afe
|
|
@ -4102,7 +4102,7 @@ a.counter:hover {
|
|||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progress .bar {
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
|
@ -4110,9 +4110,7 @@ a.counter:hover {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #149bdf;
|
||||
/*#gradient > .vertical(#149bdf, #0480be);*/
|
||||
|
||||
background-color: #428bca;
|
||||
-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);
|
||||
-webkit-box-sizing: border-box;
|
||||
|
|
@ -4124,8 +4122,8 @@ a.counter:hover {
|
|||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.progress-striped .bar {
|
||||
background-color: #149bdf;
|
||||
.progress-striped .progress-bar {
|
||||
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-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;
|
||||
}
|
||||
|
||||
.progress.active .bar {
|
||||
.progress.active .progress-bar {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-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;
|
||||
}
|
||||
|
||||
.progress-danger .bar,
|
||||
.progress .bar-danger {
|
||||
background-color: #ee5f5b;
|
||||
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.progress-danger.progress-striped .bar,
|
||||
.progress-striped .bar-danger {
|
||||
background-color: #ee5f5b;
|
||||
.progress-striped .progress-bar-danger {
|
||||
background-color: #d9534f;
|
||||
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);
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
.progress-success .bar,
|
||||
.progress .bar-success {
|
||||
background-color: #62c462;
|
||||
/*#gradient > .vertical(#62c462, #57a957);*/
|
||||
|
||||
.progress-bar-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.progress-success.progress-striped .bar,
|
||||
.progress-striped .bar-success {
|
||||
background-color: #62c462;
|
||||
.progress-striped .progress-bar-success {
|
||||
background-color: #5cb85c;
|
||||
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);
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
.progress-info .bar,
|
||||
.progress .bar-info {
|
||||
.progress-bar-warning {
|
||||
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;
|
||||
/*#gradient > .vertical(#5bc0de, #339bb9);*/
|
||||
|
||||
}
|
||||
|
||||
.progress-info.progress-striped .bar,
|
||||
.progress-striped .bar-info {
|
||||
.progress-striped .progress-bar-info {
|
||||
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-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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1614,7 +1614,7 @@
|
|||
================================================== -->
|
||||
<section id="progress">
|
||||
<div class="page-header">
|
||||
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
|
||||
<h1>Progress bars</h1>
|
||||
</div>
|
||||
|
||||
<h2>Examples and markup</h2>
|
||||
|
|
@ -1623,12 +1623,12 @@
|
|||
<p>Default progress bar with a vertical gradient.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress">
|
||||
<div class="bar" style="width: 60%;"></div>
|
||||
<div class="progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress">
|
||||
<div class="bar" style="width: 60%;"></div>
|
||||
<div class="progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1636,12 +1636,12 @@
|
|||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
<div class="progress-bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
<div class="progress-bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
<div class="progress-bar" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 40%;"></div>
|
||||
<div class="progress-bar" style="width: 40%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1662,16 +1662,16 @@
|
|||
<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 bar-success" style="width: 35%"></div>
|
||||
<div class="bar bar-warning" style="width: 20%"></div>
|
||||
<div class="bar bar-danger" style="width: 10%"></div>
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
||||
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress">
|
||||
<div class="bar bar-success" style="width: 35%;"></div>
|
||||
<div class="bar bar-warning" style="width: 20%;"></div>
|
||||
<div class="bar bar-danger" style="width: 10%;"></div>
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%;"></div>
|
||||
<div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1684,62 +1684,62 @@
|
|||
<h3>Additional colors</h3>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Striped bars</h3>
|
||||
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -1546,7 +1546,7 @@
|
|||
================================================== -->
|
||||
<section id="progress">
|
||||
<div class="page-header">
|
||||
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
|
||||
<h1>Progress bars</h1>
|
||||
</div>
|
||||
|
||||
<h2>Examples and markup</h2>
|
||||
|
|
@ -1555,12 +1555,12 @@
|
|||
<p>Default progress bar with a vertical gradient.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress">
|
||||
<div class="bar" style="width: 60%;"></div>
|
||||
<div class="progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress">
|
||||
<div class="bar" style="width: 60%;"></div>
|
||||
<div class="progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1568,12 +1568,12 @@
|
|||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
<div class="progress-bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
<div class="progress-bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
<div class="progress-bar" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 40%;"></div>
|
||||
<div class="progress-bar" style="width: 40%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1594,16 +1594,16 @@
|
|||
<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 bar-success" style="width: 35%"></div>
|
||||
<div class="bar bar-warning" style="width: 20%"></div>
|
||||
<div class="bar bar-danger" style="width: 10%"></div>
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
||||
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress">
|
||||
<div class="bar bar-success" style="width: 35%;"></div>
|
||||
<div class="bar bar-warning" style="width: 20%;"></div>
|
||||
<div class="bar bar-danger" style="width: 10%;"></div>
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%;"></div>
|
||||
<div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
@ -1616,62 +1616,62 @@
|
|||
<h3>Additional colors</h3>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Striped bars</h3>
|
||||
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
<div class="progress progress-striped">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ----------
|
||||
// Bar animations
|
||||
// -------------------------
|
||||
|
||||
// Webkit
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
|
|
@ -38,21 +38,21 @@
|
|||
|
||||
|
||||
|
||||
// THE BARS
|
||||
// --------
|
||||
// Bar itself
|
||||
// -------------------------
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: @line-height-base;
|
||||
margin-bottom: @line-height-base;
|
||||
background-color: #f5f5f5;
|
||||
background-color: @progress-bg;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
.progress .bar {
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
|
|
@ -60,21 +60,20 @@
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: #149bdf;
|
||||
/*#gradient > .vertical(#149bdf, #0480be);*/
|
||||
background-color: @progress-bar-bg;
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
.box-sizing(border-box);
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
|
||||
// Striped bars
|
||||
.progress-striped .bar {
|
||||
#gradient > .striped(#149bdf);
|
||||
.progress-striped .progress-bar {
|
||||
#gradient > .striped(@progress-bar-bg);
|
||||
.background-size(40px 40px);
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
.progress.active .bar {
|
||||
.progress.active .progress-bar {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
-ms-animation: progress-bar-stripes 2s linear infinite;
|
||||
|
|
@ -84,41 +83,37 @@
|
|||
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------
|
||||
// Variations
|
||||
// -------------------------
|
||||
|
||||
// Danger (red)
|
||||
.progress-danger .bar, .progress .bar-danger {
|
||||
background-color: #ee5f5b;
|
||||
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
|
||||
}
|
||||
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
|
||||
#gradient > .striped(#ee5f5b);
|
||||
.progress-bar-danger {
|
||||
background-color: @progress-bar-danger-bg;
|
||||
.progress-striped & {
|
||||
#gradient > .striped(@progress-bar-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Success (green)
|
||||
.progress-success .bar, .progress .bar-success {
|
||||
background-color: #62c462;
|
||||
/*#gradient > .vertical(#62c462, #57a957);*/
|
||||
}
|
||||
.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);
|
||||
.progress-bar-success {
|
||||
background-color: @progress-bar-success-bg;
|
||||
.progress-striped & {
|
||||
#gradient > .striped(@progress-bar-success-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Warning (orange)
|
||||
.progress-warning .bar, .progress .bar-warning {
|
||||
background-color: lighten(#f89406, 15%);
|
||||
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
|
||||
.progress-bar-warning {
|
||||
background-color: @progress-bar-warning-bg;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,26 +9,33 @@
|
|||
|
||||
// Grays
|
||||
// -------------------------
|
||||
|
||||
@grayDarker: #222;
|
||||
@grayDark: #333;
|
||||
@gray: #555;
|
||||
@grayLight: #999;
|
||||
@grayLighter: #eee;
|
||||
|
||||
// Brand colors
|
||||
// -------------------------
|
||||
|
||||
@brand-primary: #428bca;
|
||||
@brand-success: #5cb85c;
|
||||
@brand-warning: #f0ad4e;
|
||||
@brand-danger: #d9534f;
|
||||
@brand-info: #5bc0de;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
|
||||
@body-background: #fff;
|
||||
@text-color: @grayDark;
|
||||
|
||||
@body-background: #fff;
|
||||
@text-color: @grayDark;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
|
||||
@link-color: #428bca;
|
||||
@link-color-hover: darken(@link-color, 15%);
|
||||
|
||||
@link-color: #428bca;
|
||||
@link-color-hover: darken(@link-color, 15%);
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
|
@ -78,19 +85,19 @@
|
|||
@btn-background: #a7a9aa;
|
||||
@btn-border: @btn-background;
|
||||
|
||||
@btn-background-primary: @link-color;
|
||||
@btn-background-primary: @brand-primary;
|
||||
@btn-border-primary: @btn-background-primary;
|
||||
|
||||
@btn-background-success: #5cb85c;
|
||||
@btn-background-success: @brand-success;
|
||||
@btn-border-success: @btn-background-success;
|
||||
|
||||
@btn-background-warning: #f0ad4e;
|
||||
@btn-background-warning: @brand-warning;
|
||||
@btn-border-warning: @btn-background-warning;
|
||||
|
||||
@btn-background-danger: #d9534f;
|
||||
@btn-background-danger: @brand-danger;
|
||||
@btn-border-danger: @btn-background-danger;
|
||||
|
||||
@btn-background-info: #5bc0de;
|
||||
@btn-background-info: @brand-info;
|
||||
@btn-border-info: @btn-background-info;
|
||||
|
||||
|
||||
|
|
@ -253,6 +260,16 @@
|
|||
@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
|
||||
// -------------------------
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue