Move `[hidden]` style from _utilities.scss to _reboot.scss; fixes #18230

[skip sauce]

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 887cc32d41f8eb42e884d14ed772bdff428db4c3..788f1a3c8c7be6e29ecc53a5c339ce1335356952 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -318,19 +318,3 @@ Aspect ratios can be customized with modifier classes.
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
 {% endhighlight %}
-
-## HTML5 `[hidden]` attribute
-
-HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem.
-
-{% highlight html %}
-<input type="text" hidden>
-{% endhighlight %}
-
-{% callout warning %}
-#### jQuery incompatibility
-
-`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
-{% endcallout %}
-
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](#invisible-content) instead.

diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index 933df0e647635e3c20b5c1f848781baea6869273..fc708554e9b73c441fcf65293fcf272c4d50dae0 100644 (file)
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -285,3 +285,19 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
 <div class="bd-example">
   Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
 </div>
+
+## HTML5 `[hidden]` attribute
+
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem.
+
+{% highlight html %}
+<input type="text" hidden>
+{% endhighlight %}
+
+{% callout warning %}
+#### jQuery incompatibility
+
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{% endcallout %}
+
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 0da7e5ea6b60e5e2c74d68b0e85acebbae701d78..8a8609dd8dec78733b4107956445a26a33076985 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -298,3 +298,8 @@ output {
 //  line-height: $line-height;
 //  color: $input-color;
 }
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
+}

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index dd32a847ba8404ecd0fc7793b49762e3305c59a3..521d2f9874e69dc3bd2f6a8649bb97367b7c614e 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -31,11 +31,6 @@
   @include sr-only-focusable();
 }
 
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-[hidden] {
-  display: none !important;
-}
-
 .invisible {
   visibility: hidden !important;
 }