mention .invisible in docs per #10102
This commit is contained in:
parent
fd293be5a1
commit
2d1fa8cb5b
6
css.html
6
css.html
|
@ -2357,7 +2357,8 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
|
||||
<h3 id="helper-classes-show-hide">Showing and hiding content</h3>
|
||||
<p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
|
||||
<p><code>.hide</code> is also available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
|
||||
<p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
|
||||
<p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>
|
||||
{% highlight html %}
|
||||
<div class="show">...</div>
|
||||
<div class="hidden">...</div>
|
||||
|
@ -2371,6 +2372,9 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Usage as mixins
|
||||
.element {
|
||||
|
|
Loading…
Reference in New Issue