Primer CSS Details Fullscreen Click Area

Last Updated : 24 Apr, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Primer CSS Details Fullscreen Click Area</title> 
    <link href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h4>Primer CSS Details Fullscreen Click Area</h4> 
    </div> 
  
    <div class="d-flex flex-items-center flex-column mt-5"> 
        <details class="details-overlay"> 
            <summary class="btn">More</summary> 
            <div class="border p-2"> 
                <h3>GeeksforGeeks is awesome :)</h3> 
                <p>I love computer science.</p> 
            </div> 
        </details> 
    </div> 
</body> 
</html>

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Primer CSS Details Fullscreen Click Area</title> 
    <link href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h4>Primer CSS Details Fullscreen Click Area</h4> 
    </div> 
  
    <div class="d-flex flex-items-center flex-column mt-5"> 
        <details class="details-overlay"> 
            <summary class="btn btn-danger">Expand</summary> 
            <div class="border p-2"> 
                <h3>GeeksforGeeks is awesome :)</h3> 
                <p>I love computer science.</p> 
            </div> 
        </details> 
    </div> 
</body> 
  
</html>