Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

In this article, we will be seeing Primer CSS Details Fullscreen Click Area. The details-overlay class is used to expand the area of the <summary> element to full screen so that the user can click anywhere on the screen to close the detail.

Primer CSS Details Fullscreen Click Area Classes:

• details-overlay: This class is used to expand the area of the <summary> to fullscreen.

Syntax:

<details class="details-overlay">
    ...
</details>

Example 1: This example shows the use of details-overlay class to make the detail component close when the user clicks anywhere on the screen.

Output:

 

Note: We can add the btn and button modifier classes to the summary element so that it can gain the style of the respective button. The example below illustrates how to do this.

Example 2: This example shows how to change the style of the summary element using the button classes. 

Output:

 

Reference: https://primer.style/css/utilities/details#fullscreen-click-area