Foundation CSS Close Button Sass Reference
Last Updated :
06 Oct, 2022
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 |
1 |
| $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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...