Foundation CSS Switch Sass Reference
Last Updated :
31 Aug, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS Switch in general gives the user an option to select one of the two possibilities present.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $switch-background |
This variable is used to define the background color of a switch. |
Color |
$medium-gray
|
| $switch-background-active |
This variable is used to define the background active color of a switch. |
Color |
$primary-color
|
| $switch-height |
This variable is used to define the height of a switch, with no class applied. |
Number |
2rem |
| $switch-height-tiny |
This variable is used to define the height of a switch with .tiny class. |
Number |
1.5rem
|
| $switch-height-small |
This variable is used to define the height of a switch with .small class. |
Number |
1.75rem
|
| $switch-height-large |
This variable is used to define the height of a switch with .large class. |
Number |
2.5rem
|
| $switch-radius |
This variable is used to define the border radius of the switch |
Number |
$global-radius
|
| $switch-margin |
This variable is used to define the border around a modal. |
Number |
$global-margin
|
| $switch-paddle-background |
This variable is used to define the background color for the switch container and paddle. |
Color |
$white
|
| $switch-paddle-offset |
This variable is used to define the spacing between a switch paddle and the edge of the body. |
Number |
0.25rem
|
| $switch-paddle-radius |
This variable is used to define the border radius of the switch paddle |
Number |
$global-radius
|
| $switch-paddle-transition |
This variable is used to define the switch transition. |
Number |
all 0.25s ease-out
|
| $switch-opacity-disabled |
This variable is used to define the opacity of a disabled switch. |
Number |
0.5
|
| $switch-cursor-disabled |
This variable is used to define the cursor for a disabled switch. |
Cursor |
not-allowed
|
Example 1: In the above code, we will make use of the above variable to demonstrate the use of the switch.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin:20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<div class="switch">
<input class="switch-input" id="exampleSwitch"
type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">GeeksforGeeks</span>
</label>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
SASS Code:
$switch-height:2rem;
.switch {
height:$switch-height;
}
Compiled CSS Code:
.switch {
height: 2rem;
}
Output:
Example 2: In the above code, we will make use of the above variable to demonstrate the use of the switch.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin:20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<div class="switch">
<input class="switch-input" id="exampleSwitch"
type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">GeeksforGeeks</span>
</label>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
SASS Code:
$switch-height-large:2.5rem;
.switch {
height:$switch-height-large;
}
Compiled CSS Code:
.switch {
height: 2.5rem;
}
Output:
Reference: https://get.foundation/sites/docs/switch.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...