Skip to content

B
bootstrap
Commit 99f176e7 authored by Mark Otto's avatar Mark Otto
Browse files
Options

rewrite striped and active to deprecate the parent selectors, change the docs

parent d4eb5552
Expand all Show whitespace changes
Inline Side-by-side
Showing with 41 additions and 29 deletions
dist/css/bootstrap-theme.css.map
View file @ 99f176e7
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.css
View file @ 99f176e7
...@@ -4718,14 +4718,16 @@ a.thumbnail.active { ...@@ -4718,14 +4718,16 @@ a.thumbnail.active {
-o-transition: width .6s ease; -o-transition: width .6s ease;
transition: width .6s ease; transition: width .6s ease;
} }
.progress-striped .progress-bar { .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: -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: -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-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; -webkit-background-size: 40px 40px;
background-size: 40px 40px; background-size: 40px 40px;
} }
.progress.active .progress-bar { .progress.active .progress-bar,
.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
......
dist/css/bootstrap.css.map
View file @ 99f176e7
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 99f176e7
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_includes/components/progress-bars.html
View file @ 99f176e7
...@@ -120,60 +120,60 @@ ...@@ -120,60 +120,60 @@
<h3 id="progress-striped">Striped</h3> <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. Not available in IE8.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped" > <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <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> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <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> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <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> <span class="sr-only">60% Complete (warning)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <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> <span class="sr-only">80% Complete (danger)</span>
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <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> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <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> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <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> <span class="sr-only">60% Complete (warning)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <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> <span class="sr-only">80% Complete (danger)</span>
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="progress-animated">Animated</h3> <h3 id="progress-animated">Animated</h3>
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> <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>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped active"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div> <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> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped active"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <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> <span class="sr-only">45% Complete</span>
</div> </div>
</div> </div>
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%"> <div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span> <span class="sr-only">35% Complete (success)</span>
</div> </div>
<div class="progress-bar progress-bar-warning" style="width: 20%"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span> <span class="sr-only">20% Complete (warning)</span>
</div> </div>
<div class="progress-bar progress-bar-danger" style="width: 10%"> <div class="progress-bar progress-bar-danger" style="width: 10%">
...@@ -199,7 +199,7 @@ ...@@ -199,7 +199,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%"> <div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span> <span class="sr-only">35% Complete (success)</span>
</div> </div>
<div class="progress-bar progress-bar-warning" style="width: 20%"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span> <span class="sr-only">20% Complete (warning)</span>
</div> </div>
<div class="progress-bar progress-bar-danger" style="width: 10%"> <div class="progress-bar progress-bar-danger" style="width: 10%">
......
docs/assets/js/customize.min.js
View file @ 99f176e7
This diff is collapsed.
docs/dist/css/bootstrap-theme.css.map
View file @ 99f176e7
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.css.map
View file @ 99f176e7
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 99f176e7
This source diff could not be displayed because it is too large. You can view the blob instead.
less/mixins/progress-bar.less
View file @ 99f176e7
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
.progress-bar-variant(@color) { .progress-bar-variant(@color) {
background-color: @color; background-color: @color;
// Depcreated parent class requirement as of v3.2
.progress-striped & { .progress-striped & {
#gradient > .striped(); #gradient > .striped();
} }
......
less/progress-bars.less
View file @ 99f176e7
...@@ -41,6 +41,10 @@ ...@@ -41,6 +41,10 @@
} }
// Striped bars // Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar, .progress-striped .progress-bar,
.progress-bar-striped { .progress-bar-striped {
#gradient > .striped(); #gradient > .striped();
...@@ -48,7 +52,11 @@ ...@@ -48,7 +52,11 @@
} }
// Call animation for the active one // Call animation for the active one
.progress.active .progress-bar { //
// `.progress.active .progress-bar` is deprecated as of v3.2 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
.animation(progress-bar-stripes 2s linear infinite); .animation(progress-bar-stripes 2s linear infinite);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment