Skip to content

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

clearing up progress bar docs and resetting the striped one to match default... 

clearing up progress bar docs and resetting the striped one to match default bar (blue instead of green)
parent d98a2e92
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 36 deletions
docs/assets/css/bootstrap.css
View file @ bcd9294c
......@@ -3480,7 +3480,7 @@ a.thumbnail:hover {
transition: width 0.6s ease;
}
.progress-striped .bar {
background-color: #62c462;
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-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: -moz-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);
......
docs/components.html
View file @ bcd9294c
......@@ -1730,12 +1730,11 @@
<div class="span4">
<h3>Striped</h3>
<p>Uses a gradient to create a striped effect.</p>
<div class="progress progress-info progress-striped">
<div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-info
progress-striped"&gt;
&lt;div class="progress progress-striped"&gt;
&lt;div class="bar"
style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
......@@ -1744,12 +1743,12 @@
<div class="span4">
<h3>Animated</h3>
<p>Takes the striped example and animates it.</p>
<div class="progress progress-danger progress-striped active">
<div class="progress progress-striped active">
<div class="bar" style="width: 45%"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-danger
progress-striped active"&gt;
&lt;div class="progress progress-striped
active"&gt;
&lt;div class="bar"
style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
......@@ -1759,23 +1758,44 @@
<h2>Options and browser support</h2>
<div class="row">
<div class="span4">
<div class="span3">
<h3>Additional colors</h3>
<p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
<ul>
<li><code>.progress-info</code></li>
<li><code>.progress-success</code></li>
<li><code>.progress-warning</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>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="progress progress-info" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
<div class="span4">
<div class="span3">
<h3>Striped bars</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
<div class="span3">
<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>.progress-striped</code> progress bars will animate the stripes left to right.</p>
</div>
<div class="span4">
<div class="span3">
<h3>Browser support</h3>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
<p>Opera does not support animations at this time.</p>
......
docs/templates/pages/components.mustache
View file @ bcd9294c
......@@ -1654,12 +1654,11 @@
<div class="span4">
<h3>{{_i}}Striped{{/i}}</h3>
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
<div class="progress progress-info progress-striped">
<div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-info
progress-striped"&gt;
&lt;div class="progress progress-striped"&gt;
&lt;div class="bar"
style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
......@@ -1668,12 +1667,12 @@
<div class="span4">
<h3>{{_i}}Animated{{/i}}</h3>
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
<div class="progress progress-danger progress-striped active">
<div class="progress progress-striped active">
<div class="bar" style="width: 45%"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-danger
progress-striped active"&gt;
&lt;div class="progress progress-striped
active"&gt;
&lt;div class="bar"
style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
......@@ -1683,23 +1682,44 @@
<h2>{{_i}}Options and browser support{{/i}}</h2>
<div class="row">
<div class="span4">
<div class="span3">
<h3>{{_i}}Additional colors{{/i}}</h3>
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
<ul>
<li><code>.progress-info</code></li>
<li><code>.progress-success</code></li>
<li><code>.progress-warning</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>
<p>{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}</p>
<div class="progress progress-info" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
<div class="span4">
<div class="span3">
<h3>{{_i}}Striped bars{{/i}}</h3>
<p>{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}</p>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
<div class="span3">
<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>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
</div>
<div class="span4">
<div class="span3">
<h3>{{_i}}Browser support{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
......
less/progress-bars.less
View file @ bcd9294c
......@@ -54,7 +54,7 @@
// Striped bars
.progress-striped .bar {
#gradient > .striped(#62c462);
#gradient > .striped(#149bdf);
.background-size(40px 40px);
}
......
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