rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-10 02:02:26 +02:00
Code Issues Actions 12 Packages Releases Activity

Merge pull request #45 from twbs/bye-hidden

Browse Source 
Remove .hidden and .show classes
This commit is contained in:
Mark Otto 2014-12-22 20:11:04 -08:00
commit c59ba4995c
2 changed files with 5 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/components/helpers.md
View File

@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
} }
{% endhighlight %} {% 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. 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.
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.
{% highlight html %} {% highlight html %}
<div class="show">...</div> <div class="invisible">...</div>
<div class="hidden">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight scss %} {% highlight scss %}
// Classes // Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
// Usage as mixins // Usage as mixin
.element { .element {
.show(); .invisible();
}
.another-element {
.hidden();
} }
{% endhighlight %} {% endhighlight %}

12
scss/_utilities.scss
View File

@ -48,9 +48,6 @@
// Toggling content // Toggling content
.show {
display: block !important;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
@ -59,15 +56,6 @@
} }
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// For Affix plugin // For Affix plugin
.affix { .affix {
position: fixed; position: fixed;