diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-10 23:59:41 +0300 |
|---|---|---|
| committer | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-10 23:59:41 +0300 |
| commit | 69332cbb6806a69a12d9f869cb3db1c1f98c1226 (patch) | |
| tree | 73f9e73612e09b3b650f9445ee55aa05ec12ace8 /docs | |
| parent | a9d92a5e419fd8b8c7d4136dc8214b06bf8721b7 (diff) | |
| parent | d9c3e5f3ad28a55102a6c880324ef8ac80ddf276 (diff) | |
Merge pull request #15334 from patrickhlauke/progress-low-percentages
Fix/merge advice on low percentage progress bars
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/components/progress-bars.html | 14 | ||||
| -rw-r--r-- | docs/_includes/nav/components.html | 1 |
2 files changed, 6 insertions, 9 deletions
diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html index 88340105b5..68d87e090b 100644 --- a/docs/_includes/components/progress-bars.html +++ b/docs/_includes/components/progress-bars.html @@ -26,7 +26,7 @@ {% 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> + <p>Remove the <code><span></code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p> <div class="bs-example" data-example-id="progress-bar-with-label"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> @@ -41,29 +41,27 @@ </div> </div> {% endhighlight %} - - <h3 id="progress-low-percentages">Low percentages</h3> - <p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p> + <p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p> <div class="bs-example" data-example-id="progress-bar-at-low-percentage"> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div> </div> {% highlight html %} <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 9c5f5126fc..49c8040c53 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -105,7 +105,6 @@ <ul class="nav"> <li><a href="#progress-basic">Basic example</a></li> <li><a href="#progress-label">With label</a></li> - <li><a href="#progress-low-percentages">Low percentages</a></li> <li><a href="#progress-alternatives">Contextual alternatives</a></li> <li><a href="#progress-striped">Striped</a></li> <li><a href="#progress-animated">Animated</a></li> |