primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity
e396213d91
css/docs/content/utilities/details.md
Cole Bemis a03114d54f Rename gatsby-docs to docs
2019-08-12 15:33:06 -07:00

935 B
Raw Blame History

title path status source bundle
Details utilities/details Stable https://github.com/primer/css/blob/master/src/utilities/details.scss utilities

Details classes are created to enhance the native behaviors of <details>.

Fullscreen click area

Use .details-overlay to expand the click area of <summary> to cover the full screen, so user can click anywhere on a page to close <details>.

<details class="details-overlay">
  <summary class="btn">More</summary>
  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
</details>

Darkened fullscreen click area

Use .details-overlay-dark darken the click area overlay. Useful for modals.

<details class="details-overlay details-overlay-dark">
  <summary class="btn">More</summary>
  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
</details>