diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-10 19:50:21 +0300 |
---|---|---|
committer | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-10 19:50:21 +0300 |
commit | d9c3e5f3ad28a55102a6c880324ef8ac80ddf276 (patch) | |
tree | deb3ead2e8dff34cd9a26803852e33b523361e2e /docs | |
parent | 7c228b3cfab854bf43b0ba8aa4899fdabf62467a (diff) |
Fix/merge advice on low percentage progress bars
- actually add the ``min-width`` extra style (and use ``em`` rather than
``px``) to the 0% and 2% example
- remove the unnecessarily redundant sentence in the "With labels"
section
- remove the unnecessary heading/section specifically for low percentage
case, make it flow naturally as part of the "With labels" section
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> |