bump up height of progress bars, give some extra depth with stacking bars, and then make the stacked bars actually work
This commit is contained in:
parent
47697c5f35
commit
2fda6a45aa
|
@ -5254,8 +5254,8 @@ a.badge:hover {
|
|||
}
|
||||
|
||||
.progress {
|
||||
height: 18px;
|
||||
margin-bottom: 18px;
|
||||
height: 20px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
|
@ -5274,6 +5274,7 @@ a.badge:hover {
|
|||
}
|
||||
|
||||
.progress .bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
|
@ -5281,11 +5282,11 @@ a.badge:hover {
|
|||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #0e90d2;
|
||||
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
|
||||
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: -o-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(to bottom, #149bdf, #0480be);
|
||||
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
|
@ -5300,6 +5301,12 @@ a.badge:hover {
|
|||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.progress .bar + .bar {
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.progress-striped .bar {
|
||||
background-color: #149bdf;
|
||||
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));
|
||||
|
@ -5321,7 +5328,8 @@ a.badge:hover {
|
|||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
.progress-danger .bar {
|
||||
.progress-danger .bar,
|
||||
.progress .bar-danger {
|
||||
background-color: #dd514c;
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
|
||||
|
@ -5332,7 +5340,8 @@ a.badge:hover {
|
|||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
|
||||
}
|
||||
|
||||
.progress-danger.progress-striped .bar {
|
||||
.progress-danger.progress-striped .bar,
|
||||
.progress-striped .bar-danger {
|
||||
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-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);
|
||||
|
@ -5341,7 +5350,8 @@ a.badge: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-success .bar,
|
||||
.progress .bar-success {
|
||||
background-color: #5eb95e;
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
|
||||
|
@ -5352,7 +5362,8 @@ a.badge:hover {
|
|||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
|
||||
}
|
||||
|
||||
.progress-success.progress-striped .bar {
|
||||
.progress-success.progress-striped .bar,
|
||||
.progress-striped .bar-success {
|
||||
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-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);
|
||||
|
@ -5361,7 +5372,8 @@ a.badge: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-info .bar,
|
||||
.progress .bar-info {
|
||||
background-color: #4bb1cf;
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
|
||||
|
@ -5372,7 +5384,8 @@ a.badge:hover {
|
|||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
|
||||
}
|
||||
|
||||
.progress-info.progress-striped .bar {
|
||||
.progress-info.progress-striped .bar,
|
||||
.progress-striped .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);
|
||||
|
@ -5381,7 +5394,8 @@ a.badge: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-warning .bar,
|
||||
.progress .bar-warning {
|
||||
background-color: #faa732;
|
||||
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
||||
|
@ -5392,7 +5406,8 @@ a.badge:hover {
|
|||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
|
||||
}
|
||||
|
||||
.progress-warning.progress-striped .bar {
|
||||
.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);
|
||||
|
|
|
@ -2071,19 +2071,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-success" style="width: 35%"></div>
|
||||
<div class="bar-warning" style="width: 20%"></div>
|
||||
<div class="bar-danger" style="width: 10%"></div>
|
||||
<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>
|
||||
</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 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>
|
||||
</pre>
|
||||
|
||||
|
|
|
@ -1996,6 +1996,23 @@
|
|||
</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 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>
|
||||
</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>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
|
|
@ -44,8 +44,8 @@
|
|||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: 18px;
|
||||
margin-bottom: 18px;
|
||||
height: @baseLineHeight;
|
||||
margin-bottom: @baseLineHeight;
|
||||
#gradient > .vertical(#f5f5f5, #f9f9f9);
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
.border-radius(4px);
|
||||
|
@ -65,6 +65,9 @@
|
|||
.box-sizing(border-box);
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
.progress .bar + .bar {
|
||||
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
|
||||
}
|
||||
|
||||
// Striped bars
|
||||
.progress-striped .bar {
|
||||
|
|
Loading…
Reference in New Issue