mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Refactor: drop all custom .progress-bar styles and replace with <progress> element
This commit is contained in:
Mark Otto
parent
79f56dbea9
commit
54537b500e
202
dist/css/bootstrap.css
vendored
202
dist/css/bootstrap.css
vendored
@ -4062,7 +4062,7 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
@ -4070,7 +4070,7 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@-o-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
@ -4078,89 +4078,175 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.progress[value] {
|
||||
color: #0074d9;
|
||||
border: 0;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
-webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: .85rem;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #027de7;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
-webkit-transition: width .6s ease;
|
||||
-o-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
.progress[value]::-webkit-progress-value::before {
|
||||
content: attr(value);
|
||||
}
|
||||
.progress-striped .progress-bar,
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress.active .progress-bar,
|
||||
.progress-bar.active {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-bar[aria-valuenow="0"] {
|
||||
min-width: 30px;
|
||||
.progress[value="0"]::-webkit-progress-value {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.progress-bar-success {
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.progress[value] {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress[value="0"]::-moz-progress-bar {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
text-indent: -999rem;
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress[width^="0"] {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[width="100%"] {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
.progress-striped[value]::-webkit-progress-value {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 24px 24px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.progress-striped[value]::-moz-progress-bar {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 24px 24px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
}
|
||||
.progress-animated[value]::-webkit-progress-value {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-animated .progress-bar-striped {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
.progress-success[value]::-webkit-progress-value {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.progress-striped .progress-bar-success {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-success[value]::-moz-progress-bar {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.progress-bar-info {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-success .progress-bar {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
}
|
||||
.progress-info[value]::-webkit-progress-value {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.progress-striped .progress-bar-info {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-info[value]::-moz-progress-bar {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.progress-bar-warning {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-info .progress-bar {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
}
|
||||
.progress-warning[value]::-webkit-progress-value {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.progress-striped .progress-bar-warning {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-warning[value]::-moz-progress-bar {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.progress-bar-danger {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-warning .progress-bar {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
}
|
||||
.progress-danger[value]::-webkit-progress-value {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.progress-striped .progress-bar-danger {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-danger[value]::-moz-progress-bar {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-danger .progress-bar {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
}
|
||||
.media,
|
||||
.media-body {
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,182 +1,79 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="progress" class="page-header">Progress bars</h1>
|
||||
|
||||
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
|
||||
</div>
|
||||
<p class="lead">Stylize the HTML5 <code><progress></code> element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.</p>
|
||||
|
||||
<h3 id="progress-basic">Basic example</h3>
|
||||
<p>Default progress bar.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
||||
<span class="sr-only">60% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress" value="0" max="100">0%</progress>
|
||||
<progress class="progress" value="25" max="100">25%</progress>
|
||||
<progress class="progress" value="50" max="100">50%</progress>
|
||||
<progress class="progress" value="75" max="100">75%</progress>
|
||||
<progress class="progress" value="100" max="100">100%</progress>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
||||
<span class="sr-only">60% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress" value="0" max="100">0%</progress>
|
||||
<progress class="progress" value="25" max="100">25%</progress>
|
||||
<progress class="progress" value="50" max="100">50%</progress>
|
||||
<progress class="progress" value="75" max="100">75%</progress>
|
||||
<progress class="progress" value="100" max="100">100%</progress>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-label">With label</h3>
|
||||
<p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
|
||||
<h3 id="progress-ie9">Internet Explorer 9 support</h3>
|
||||
<p>IE9 doesn't support the HTML5 <code><progress></code> element, but we can work around that.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
||||
60%
|
||||
<progress class="progress" value="25" max="100">
|
||||
<div class="progress">
|
||||
<span class="progress-bar" style="width: 25%;">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
</progress>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
||||
60%
|
||||
<progress class="progress" value="25" max="100">
|
||||
<div class="progress">
|
||||
<span class="progress-bar" style="width: 25%;">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
</progress>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-alternatives">Contextual alternatives</h3>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
|
||||
<span class="sr-only">40% Complete (success)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
|
||||
<span class="sr-only">60% Complete (warning)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="sr-only">80% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-danger" value="100" max="100">100%</progress>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
|
||||
<span class="sr-only">40% Complete (success)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
|
||||
<span class="sr-only">60% Complete (warning)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="sr-only">80% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-danger" value="100" max="100">100%</progress>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-striped">Striped</h3>
|
||||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||
<p>Uses a gradient to create a striped effect.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
|
||||
<span class="sr-only">40% Complete (success)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
|
||||
<span class="sr-only">60% Complete (warning)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="sr-only">80% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress progress-striped" value="10" max="100">10%</progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
|
||||
<span class="sr-only">40% Complete (success)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
|
||||
<span class="sr-only">60% Complete (warning)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="sr-only">80% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress progress-striped" value="10" max="100">10%</progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-animated">Animated</h3>
|
||||
<p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
|
||||
<p>Add <code>.progress-animated</code> to <code>.progress</code> to animate the stripes right to left via CSS3 animations. Animated progress bars do not work in IE9, older versions of Firefox, and Opera 12 as they don't support CSS3 animations.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
|
||||
</div>
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
|
||||
<span class="sr-only">45% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-stacked">Stacked</h3>
|
||||
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%">
|
||||
<span class="sr-only">35% Complete (success)</span>
|
||||
</div>
|
||||
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
|
||||
<span class="sr-only">20% Complete (warning)</span>
|
||||
</div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%">
|
||||
<span class="sr-only">10% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%">
|
||||
<span class="sr-only">35% Complete (success)</span>
|
||||
</div>
|
||||
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
|
||||
<span class="sr-only">20% Complete (warning)</span>
|
||||
</div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%">
|
||||
<span class="sr-only">10% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/assets/js/docs.min.js
vendored
2
docs/assets/js/docs.min.js
vendored
@ -21,4 +21,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()})(function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
202
docs/dist/css/bootstrap.css
vendored
202
docs/dist/css/bootstrap.css
vendored
@ -4062,7 +4062,7 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
@ -4070,7 +4070,7 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@-o-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
@ -4078,89 +4078,175 @@ a.list-group-item.active > .badge,
|
||||
}
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
background-position: 24px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.progress[value] {
|
||||
color: #0074d9;
|
||||
border: 0;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
-webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: .85rem;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #027de7;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
-webkit-transition: width .6s ease;
|
||||
-o-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
.progress[value]::-webkit-progress-value::before {
|
||||
content: attr(value);
|
||||
}
|
||||
.progress-striped .progress-bar,
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress.active .progress-bar,
|
||||
.progress-bar.active {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-bar[aria-valuenow="0"] {
|
||||
min-width: 30px;
|
||||
.progress[value="0"]::-webkit-progress-value {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.progress-bar-success {
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.progress[value] {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress[value="0"]::-moz-progress-bar {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
text-indent: -999rem;
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
.progress[width^="0"] {
|
||||
min-width: 2rem;
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[width="100%"] {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
.progress-striped[value]::-webkit-progress-value {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 24px 24px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.progress-striped[value]::-moz-progress-bar {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 24px 24px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
}
|
||||
.progress-animated[value]::-webkit-progress-value {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-animated .progress-bar-striped {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
.progress-success[value]::-webkit-progress-value {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.progress-striped .progress-bar-success {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-success[value]::-moz-progress-bar {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.progress-bar-info {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-success .progress-bar {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
}
|
||||
.progress-info[value]::-webkit-progress-value {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.progress-striped .progress-bar-info {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-info[value]::-moz-progress-bar {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.progress-bar-warning {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-info .progress-bar {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
}
|
||||
.progress-warning[value]::-webkit-progress-value {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.progress-striped .progress-bar-warning {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-warning[value]::-moz-progress-bar {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.progress-bar-danger {
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-warning .progress-bar {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
}
|
||||
.progress-danger[value]::-webkit-progress-value {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.progress-striped .progress-bar-danger {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
.progress-danger[value]::-moz-progress-bar {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-danger .progress-bar {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
}
|
||||
.media,
|
||||
.media-body {
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,10 +1,15 @@
|
||||
// Progress bars
|
||||
|
||||
.progress-bar-variant(@color) {
|
||||
background-color: @color;
|
||||
|
||||
// Deprecated parent class requirement as of v3.2.0
|
||||
.progress-striped & {
|
||||
#gradient > .striped();
|
||||
.progress-variant(@color) {
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: @color;
|
||||
}
|
||||
&[value]::-moz-progress-bar {
|
||||
background-color: @color;
|
||||
}
|
||||
@media screen and (~"min-width:0\0") {
|
||||
.progress-bar {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,98 +3,165 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Bar animations
|
||||
// -------------------------
|
||||
//
|
||||
// Progress animations
|
||||
//
|
||||
|
||||
// WebKit
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from { background-position: 40px 0; }
|
||||
from { background-position: @line-height-computed 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
// Spec and IE10+
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: 40px 0; }
|
||||
from { background-position: @line-height-computed 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Basic progress bar
|
||||
//
|
||||
|
||||
// Bar itself
|
||||
// -------------------------
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
background-color: @progress-bg;
|
||||
}
|
||||
.progress[value] {
|
||||
// Reset the default appearance
|
||||
appearance: none;
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: #0074d9;
|
||||
}
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #eee;
|
||||
.border-radius(@border-radius-base);
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
|
||||
}
|
||||
.progress[value]::-webkit-progress-value::before {
|
||||
content: attr(value);
|
||||
}
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
.progress[value="0"]::-webkit-progress-value {
|
||||
color: @gray-light;
|
||||
min-width: 2rem;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-computed;
|
||||
color: @progress-bar-color;
|
||||
text-align: center;
|
||||
background-color: @progress-bar-bg;
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
transition: width .6s ease;
|
||||
}
|
||||
|
||||
// Striped bars
|
||||
//
|
||||
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
|
||||
// `.progress-bar-striped` class, which you just add to an existing
|
||||
// `.progress-bar`.
|
||||
.progress-striped .progress-bar,
|
||||
.progress-bar-striped {
|
||||
#gradient > .striped();
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
//
|
||||
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
|
||||
// `.progress-bar.active` approach.
|
||||
.progress.active .progress-bar,
|
||||
.progress-bar.active {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
// Account for lower percentages
|
||||
.progress-bar {
|
||||
&[aria-valuenow="0"] {
|
||||
// Firefox styles must be entirely separate or it busts Webkit styles.
|
||||
@-moz-document url-prefix() {
|
||||
.progress[value] {
|
||||
background-color: #eee;
|
||||
.border-radius(@border-radius-base);
|
||||
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
.progress[value="0"]::-moz-progress-bar {
|
||||
color: @gray-light;
|
||||
min-width: 30px;
|
||||
min-width: 2rem;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
.box-shadow(none);
|
||||
}
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
|
||||
@media screen and (~"min-width:0\0") {
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
.border-radius(@border-radius-base);
|
||||
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: @line-height-computed;
|
||||
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
.progress[width^="0"] {
|
||||
color: @gray-light;
|
||||
min-width: 2rem;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress[width="100%"] {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Striped
|
||||
//
|
||||
|
||||
.progress-striped[value]::-webkit-progress-value {
|
||||
#gradient > .striped();
|
||||
background-size: @line-height-computed @line-height-computed;
|
||||
}
|
||||
.progress-striped[value]::-moz-progress-bar {
|
||||
#gradient > .striped();
|
||||
background-size: @line-height-computed @line-height-computed;
|
||||
}
|
||||
@media screen and (~"min-width:0\0") {
|
||||
.progress-bar-striped {
|
||||
#gradient > .striped();
|
||||
background-size: @line-height-computed @line-height-computed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animated
|
||||
//
|
||||
|
||||
.progress-animated[value]::-webkit-progress-value {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
@media screen and (~"min-width:0\0") {
|
||||
.progress-animated .progress-bar-striped {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Variations
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
.progress-bar-success {
|
||||
.progress-bar-variant(@progress-bar-success-bg);
|
||||
.progress-success {
|
||||
.progress-variant(@progress-bar-success-bg);
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
.progress-bar-variant(@progress-bar-info-bg);
|
||||
.progress-info {
|
||||
.progress-variant(@progress-bar-info-bg);
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
.progress-bar-variant(@progress-bar-warning-bg);
|
||||
.progress-warning {
|
||||
.progress-variant(@progress-bar-warning-bg);
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
.progress-bar-variant(@progress-bar-danger-bg);
|
||||
.progress-danger {
|
||||
.progress-variant(@progress-bar-danger-bg);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user