Skip to content
Related Articles

Related Articles

Foundation CSS Close Button Sass Reference

Improve Article
Save Article
  • Last Updated : 06 Oct, 2022
Improve Article
Save Article

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011. It makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on Bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

The Close Button is used to provide an option to dismiss or close the component. It is a <button> element with the class close-button. The multiplication symbol (×) is the graphical icon(X). This icon is declared inside the <span> element with the attribute aria-hidden=” true”.

Variable Used:

Variable-Name Description Type Default-Value
$closebutton-position  This variable is used to define the default position of the close button.  List right top 
$closebutton-z-index  This variable is used to define the default z-index for a close button. Number  10
$closebutton-default-size  This variable is used to define the button size to use as the default String medium
$closebutton-offset-horizontal  This variable is used to define the right (or left) offset(s) for a close button. Number or Map  small: 0.66rem
medium: 1rem
$closebutton-offset-vertical  This variable is used to define the top (or bottom) offset(s) for a close button. Number or Map  small: 0.33em
medium: 0.5rem
$closebutton-size  This variable is used to define the size(s) of the close button. Number or Map  small: 1.5em
medium: 2em
$closebutton-lineheight  This variable is used to define the line height of the close button Number
$closebutton-color  This variable is used to define the default color of the close button. Color $dark-gray 
$closebutton-color-hover  This variable is used to define the default color of the close button when being hovered on. Color $black 

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the close button.

HTML




<html>
 
<head>
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
</head>
 
<body margin="15px">
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3>
            A computer science portal for geeks
        </h3>
    </center>
 
    <ul>
        <div class="callout">
            <button class="close-button"
                    aria-label="Close alert"
                    type="button">
            <span aria-hidden="true">×</span>
            </button>
            <p>
                This is an example of close button!
            </p>
        </div>
    </ul>
 
    <script>
        var closebtns =
            document.getElementsByClassName("close-button");
        var i;
        for(i = 0; i < closebtns.length; i++) {
            closebtns[i].addEventListener("click", function() {
                this.parentElement.style.display = "none";
            });
        }
    </script>
</body>
</html>


SASS Code:

$closebutton-position: right top;
.close-button {
    position:$closebutton-position;
}

Compiled CSS Code:

.close-button {
    position: right top;
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the Close Button.

HTML




<html>
 
<head>
    <title>
        Foundation CSS Close Button
    </title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
</head>
 
<body margin="15px">
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3>
            A computer science portal for geeks
        </h3>
    </center>
 
    <ul>
        <div class="callout">
            <button class="close-button"
                    aria-label="Close alert"
                    type="button">
            <span aria-hidden="true">×</span>
            </button>
            <p>
                This is an example of close button!
            </p>
        </div>
    </ul>
 
    <script>
        var closebtns =
            document.getElementsByClassName("close-button");
        var i;
        for(i = 0; i < closebtns.length; i++) {
            closebtns[i].addEventListener("click", function() {
                this.parentElement.style.display = "none";
            });
        }
    </script>
</body>
</html>


SASS Code:

$closebutton-color: darkgrey;
.close-button {
    color:$closebutton-color;
}

Compiled CSS Code:

.close-button {
   color: darkgrey;
}

Output:

 

Reference: https://get.foundation/sites/docs/close-button.html#sass-reference


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!