Set `cursor:pointer` for `<summary>`

diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index d89e73da7daaa299e3cd428154a870bfa1923262..309391fd6b834631e51dc2764fb2e1f4231ca5b7 100644 (file)
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -333,6 +333,22 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
   Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
 </div>
 
+### Summary
+
+The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
+
+<div class="bd-example">
+  <details>
+    <summary>Some details</summary>
+    <p>More info about the details.</p>
+  </details>
+
+  <details open>
+    <summary>Even more details</summary>
+    <p>Here are even more details about the details.</p>
+  </details>
+</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](https://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 IE10, the explicit declaration in our CSS gets around that problem.

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 62b3a666506a2702b7daa24824d6cdd1dca6d44d..539341311497da875e953232d6f0859e038ba29e 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -491,6 +491,7 @@ output {
 
 summary {
   display: list-item; // Add the correct display in all browsers
+  cursor: pointer;
 }
 
 template {