diff options
| author | Andres Galante <agalante@gmail.com> | 2017-12-28 05:08:10 +0300 |
|---|---|---|
| committer | Patrick H. Lauke <redux@splintered.co.uk> | 2017-12-28 05:08:10 +0300 |
| commit | a5232abefc257fcbe71f69d22b4027fe6b2ce299 (patch) | |
| tree | 43d57542882bd379e65c57a673834b2bbe083204 | |
| parent | 1a4a94bfd90626bdd48cea0c0d4bf0293f052edb (diff) | |
Set `cursor:pointer` for `<summary>`
| -rw-r--r-- | docs/4.0/content/reboot.md | 16 | ||||
| -rw-r--r-- | scss/_reboot.scss | 1 |
2 files changed, 17 insertions, 0 deletions
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index d89e73da7d..309391fd6b 100644 --- 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 62b3a66650..5393413114 100644 --- 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 { |