diff options
| author | Mark Otto <[email protected]> | 2014-12-22 20:11:04 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-22 20:11:04 -0800 |
| commit | c59ba4995ca3994ece6ff21bed822898133a54e4 (patch) | |
| tree | d7bcd9520d087c9cd21c7fc13ebcf0858ea3c6ce | |
| parent | d44a1f24bfc6fd2c4233acccd8668c9ad1dd4e4d (diff) | |
| parent | 07ef67da20c800eb3afa51d2064549ed325cc145 (diff) | |
| download | bootstrap-c59ba4995ca3994ece6ff21bed822898133a54e4.tar.xz bootstrap-c59ba4995ca3994ece6ff21bed822898133a54e4.zip | |
Merge pull request #45 from twbs/bye-hidden
Remove .hidden and .show classes
| -rw-r--r-- | docs/components/helpers.md | 23 | ||||
| -rw-r--r-- | scss/_utilities.scss | 12 |
2 files changed, 5 insertions, 30 deletions
diff --git a/docs/components/helpers.md b/docs/components/helpers.md index fea487860..a5be35679 100644 --- a/docs/components/helpers.md +++ b/docs/components/helpers.md @@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} -### Showing and hiding content +### Making content invisible -Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins. - -Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. +The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. {% highlight html %} -<div class="show">...</div> -<div class="hidden">...</div> +<div class="invisible">...</div> {% endhighlight %} {% highlight scss %} // Classes -.show { - display: block !important; -} -.hidden { - display: none !important; - visibility: hidden !important; -} .invisible { visibility: hidden; } -// Usage as mixins +// Usage as mixin .element { - .show(); -} -.another-element { - .hidden(); + .invisible(); } {% endhighlight %} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6b82d2fc3..d33400125 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -48,9 +48,6 @@ // Toggling content -.show { - display: block !important; -} .invisible { visibility: hidden; } @@ -59,15 +56,6 @@ } -// Hide from screenreaders and browsers -// -// Credit: HTML5 Boilerplate -.hidden { - display: none !important; - visibility: hidden !important; -} - - // For Affix plugin .affix { position: fixed; |
