kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

bump up height of progress bars, give some extra depth with stacking bars, and then make the stacked bars actually work

Browse source
This commit is contained in:
Mark Otto 2012-08-20 11:22:37 -07:00
parent 47697c5f35
commit 2fda6a45aa
4 changed files with 54 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
docs/assets/css/bootstrap.css vendored
View file

@ -5254,8 +5254,8 @@ a.badge:hover {
} }
.progress { .progress {
height: 18px; height: 20px;
margin-bottom: 18px; margin-bottom: 20px;
overflow: hidden; overflow: hidden;
background-color: #f7f7f7; background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
@ -5274,6 +5274,7 @@ a.badge:hover {
} }
.progress .bar { .progress .bar {
float: left;
width: 0; width: 0;
height: 100%; height: 100%;
font-size: 12px; font-size: 12px;
@ -5281,11 +5282,11 @@ a.badge:hover {
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: #0e90d2; 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-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-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);
@ -5300,6 +5301,12 @@ a.badge:hover {
transition: width 0.6s ease; 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 { .progress-striped .bar {
background-color: #149bdf; 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)); 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; animation: progress-bar-stripes 2s linear infinite;
} }
.progress-danger .bar { .progress-danger .bar,
.progress .bar-danger {
background-color: #dd514c; background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#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); 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-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);
@ -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); 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-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#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); 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-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);
@ -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); 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-color: #4bb1cf;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#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); 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-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);
@ -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); 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-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#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); 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-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-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);

15
docs/components.html
View file

@ -2071,19 +2071,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-success" style="width: 35%"></div> <div class="bar bar-success" style="width: 35%"></div>
<div class="bar-warning" style="width: 20%"></div> <div class="bar bar-warning" style="width: 20%"></div>
<div class="bar-danger" style="width: 10%"></div> <div class="bar 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-success" &lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt;
style="width: 35%;"&gt;&lt;/div&gt; &lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="bar-warning" &lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="bar-danger"
style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

17
docs/templates/pages/components.mustache vendored
View file

@ -1996,6 +1996,23 @@
&lt;/div&gt; &lt;/div&gt;
</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 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">
&lt;div class="progress"&gt;
&lt;div class="bar 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="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">

7
less/progress-bars.less
View file

@ -44,8 +44,8 @@
// Outer container // Outer container
.progress { .progress {
overflow: hidden; overflow: hidden;
height: 18px; height: @baseLineHeight;
margin-bottom: 18px; margin-bottom: @baseLineHeight;
#gradient > .vertical(#f5f5f5, #f9f9f9); #gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.border-radius(4px); .border-radius(4px);
@ -65,6 +65,9 @@
.box-sizing(border-box); .box-sizing(border-box);
.transition(width .6s ease); .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 // Striped bars
.progress-striped .bar { .progress-striped .bar {