mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
namespace progress bars and labels classes
This commit is contained in:
Mark Otto
parent
59d9983ebc
commit
487dbfdda4
5 changed files with 58 additions and 66 deletions
20
docs/assets/css/bootstrap.css
vendored
20
docs/assets/css/bootstrap.css
vendored
|
|
@ -3003,16 +3003,16 @@ a.thumbnail:hover {
|
|||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.label.important {
|
||||
.label-important {
|
||||
background-color: #b94a48;
|
||||
}
|
||||
.label.warning {
|
||||
.label-warning {
|
||||
background-color: #f89406;
|
||||
}
|
||||
.label.success {
|
||||
.label-success {
|
||||
background-color: #468847;
|
||||
}
|
||||
.label.info {
|
||||
.label-info {
|
||||
background-color: #3a87ad;
|
||||
}
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
|
|
@ -3105,7 +3105,7 @@ a.thumbnail:hover {
|
|||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress.danger .bar {
|
||||
.progress-danger .bar {
|
||||
background-color: #dd514c;
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
|
|
@ -3116,7 +3116,7 @@ a.thumbnail:hover {
|
|||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
||||
}
|
||||
.progress.danger.striped .bar {
|
||||
.progress-danger.progress-striped .bar {
|
||||
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);
|
||||
|
|
@ -3125,7 +3125,7 @@ a.thumbnail:hover {
|
|||
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.success .bar {
|
||||
.progress-success .bar {
|
||||
background-color: #5eb95e;
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(top, #62c462, #57a957);
|
||||
|
|
@ -3136,7 +3136,7 @@ a.thumbnail:hover {
|
|||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
||||
}
|
||||
.progress.success.striped .bar {
|
||||
.progress-success.progress-striped .bar {
|
||||
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);
|
||||
|
|
@ -3145,7 +3145,7 @@ a.thumbnail:hover {
|
|||
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.info .bar {
|
||||
.progress-info .bar {
|
||||
background-color: #4bb1cf;
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
|
||||
|
|
@ -3156,7 +3156,7 @@ a.thumbnail:hover {
|
|||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
|
||||
}
|
||||
.progress.info.striped .bar {
|
||||
.progress-info.progress-striped .bar {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1007,34 +1007,34 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label success">New</span>
|
||||
<span class="label label-success">New</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label success">New</span></code>
|
||||
<code><span class="label label-success">New</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label warning">Warning</span>
|
||||
<span class="label label-warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label warning">Warning</span></code>
|
||||
<code><span class="label label-warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label important">Important</span>
|
||||
<span class="label label-important">Important</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label important">Important</span></code>
|
||||
<code><span class="label label-important">Important</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label info">Info</span>
|
||||
<span class="label label-info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label info">Info</span></code>
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -1307,12 +1307,12 @@
|
|||
<div class="span4">
|
||||
<h3>Striped</h3>
|
||||
<p>Uses a gradient to create a striped effect.</p>
|
||||
<div class="progress info striped">
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress info
|
||||
striped">
|
||||
<div class="progress progress-info
|
||||
progress-striped">
|
||||
<div class="bar"
|
||||
style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1321,12 +1321,12 @@
|
|||
<div class="span4">
|
||||
<h3>Animated</h3>
|
||||
<p>Takes the striped example and animates it.</p>
|
||||
<div class="progress danger active striped">
|
||||
<div class="progress progress-danger progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress danger
|
||||
striped active">
|
||||
<div class="progress progress-danger
|
||||
progress-striped active">
|
||||
<div class="bar"
|
||||
style="width: 40%;"></div>
|
||||
</div>
|
||||
|
|
@ -1338,18 +1338,18 @@
|
|||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Additional colors</h3>
|
||||
<p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
|
||||
<p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
|
||||
<ul>
|
||||
<li><code>.info</code></li>
|
||||
<li><code>.success</code></li>
|
||||
<li><code>.danger</code></li>
|
||||
<li><code>.progress-info</code></li>
|
||||
<li><code>.progress-success</code></li>
|
||||
<li><code>.progress-danger</code></li>
|
||||
</ul>
|
||||
<p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Behavior</h3>
|
||||
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
|
||||
<p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
|
||||
<p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Browser support</h3>
|
||||
|
|
@ -1398,10 +1398,6 @@
|
|||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
|
|
|
|||
42
docs/templates/pages/components.mustache
vendored
42
docs/templates/pages/components.mustache
vendored
|
|
@ -935,34 +935,34 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label success">{{_i}}New{{/i}}</span>
|
||||
<span class="label label-success">{{_i}}New{{/i}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label success">{{/_i}}New{{/i}}</span></code>
|
||||
<code><span class="label label-success">{{/_i}}New{{/i}}</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label warning">{{_i}}Warning{{/i}}</span>
|
||||
<span class="label label-warning">{{_i}}Warning{{/i}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label warning">{{_i}}Warning{{/i}}</span></code>
|
||||
<code><span class="label label-warning">{{_i}}Warning{{/i}}</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label important">{{_i}}Important{{/i}}</span>
|
||||
<span class="label label-important">{{_i}}Important{{/i}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label important">{{_i}}Important{{/i}}</span></code>
|
||||
<code><span class="label label-important">{{_i}}Important{{/i}}</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label info">{{_i}}Info{{/i}}</span>
|
||||
<span class="label label-info">{{_i}}Info{{/i}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label info">{{_i}}Info{{/i}}</span></code>
|
||||
<code><span class="label label-info">{{_i}}Info{{/i}}</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -1235,12 +1235,12 @@
|
|||
<div class="span4">
|
||||
<h3>{{_i}}Striped{{/i}}</h3>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
|
||||
<div class="progress info striped">
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress info
|
||||
striped">
|
||||
<div class="progress progress-info
|
||||
progress-striped">
|
||||
<div class="bar"
|
||||
style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1249,12 +1249,12 @@
|
|||
<div class="span4">
|
||||
<h3>{{_i}}Animated{{/i}}</h3>
|
||||
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
|
||||
<div class="progress danger active striped">
|
||||
<div class="progress progress-danger progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress danger
|
||||
striped active">
|
||||
<div class="progress progress-danger
|
||||
progress-striped active">
|
||||
<div class="bar"
|
||||
style="width: 40%;"></div>
|
||||
</div>
|
||||
|
|
@ -1266,18 +1266,18 @@
|
|||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Additional colors{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
|
||||
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
|
||||
<ul>
|
||||
<li><code>.info</code></li>
|
||||
<li><code>.success</code></li>
|
||||
<li><code>.danger</code></li>
|
||||
<li><code>.progress-info</code></li>
|
||||
<li><code>.progress-success</code></li>
|
||||
<li><code>.progress-danger</code></li>
|
||||
</ul>
|
||||
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Behavior{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
|
||||
<p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
|
||||
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Browser support{{/i}}</h3>
|
||||
|
|
@ -1324,7 +1324,3 @@
|
|||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
text-transform: uppercase;
|
||||
background-color: @grayLight;
|
||||
.border-radius(3px);
|
||||
&.important { background-color: @errorText; }
|
||||
&.warning { background-color: @orange; }
|
||||
&.success { background-color: @successText; }
|
||||
&.info { background-color: @infoText; }
|
||||
}
|
||||
.label-important { background-color: @errorText; }
|
||||
.label-warning { background-color: @orange; }
|
||||
.label-success { background-color: @successText; }
|
||||
.label-info { background-color: @infoText; }
|
||||
|
|
|
|||
|
|
@ -71,25 +71,25 @@
|
|||
// ------
|
||||
|
||||
// Danger (red)
|
||||
.progress.danger .bar {
|
||||
.progress-danger .bar {
|
||||
#gradient > .vertical(#ee5f5b, #c43c35);
|
||||
}
|
||||
.progress.danger.striped .bar {
|
||||
.progress-danger.progress-striped .bar {
|
||||
#gradient > .striped(#ee5f5b);
|
||||
}
|
||||
|
||||
// Success (green)
|
||||
.progress.success .bar {
|
||||
.progress-success .bar {
|
||||
#gradient > .vertical(#62c462, #57a957);
|
||||
}
|
||||
.progress.success.striped .bar {
|
||||
.progress-success.progress-striped .bar {
|
||||
#gradient > .striped(#62c462);
|
||||
}
|
||||
|
||||
// Info (teal)
|
||||
.progress.info .bar {
|
||||
.progress-info .bar {
|
||||
#gradient > .vertical(#5bc0de, #339bb9);
|
||||
}
|
||||
.progress.info.striped .bar {
|
||||
.progress-info.progress-striped .bar {
|
||||
#gradient > .striped(#5bc0de);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue