Skip to content

Instantly share code, notes, and snippets.

@kjtolsma
Last active September 25, 2023 14:58
Show Gist options
  • Save kjtolsma/1f088ae70c09819108cdd38ab903bdda to your computer and use it in GitHub Desktop.
Save kjtolsma/1f088ae70c09819108cdd38ab903bdda to your computer and use it in GitHub Desktop.
CSS3 toggle switch for Gravity Forms
// Gravity Forms checkbox toggle
// @use .pt-toggle
$pt-toggle-height: 32px;
$pt-toggle-border: 4px;
$pt-toggle-radius: 60px;
$pt-color-grey: #ddd;
$pt-color-white: #fff;
$pt-color-primary: #5cb85c;
.gform_wrapper {
.pt-toggle .gfield_checkbox {
input[type=checkbox] {
margin-left: -9999px;
position: absolute;
visibility: hidden;
+ label {
background-color: $pt-color-grey;
border-radius: $pt-toggle-radius;
cursor: pointer;
display: block;
padding: $pt-toggle-border;
outline: none;
position: relative;
transition: background .4s;
user-select: none;
width: $pt-toggle-height * 2;
height: $pt-toggle-height;
&::before,
&::after {
content: '';
display: block;
position: absolute;
}
&::before {
background-color: $pt-color-grey;
border-radius: $pt-toggle-radius;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: background .4s;
}
&::after {
@include fa-icon;
background-color: $pt-color-white;
border-radius: $pt-toggle-radius;
content: $fa-var-check;
color: $pt-color-white;
line-height: $pt-toggle-height - ($pt-toggle-border * 2);
top: $pt-toggle-border;
bottom: $pt-toggle-border;
left: $pt-toggle-border;
width: $pt-toggle-height - ($pt-toggle-border * 2);
text-align: center;
transition: margin .4s, background .4s;
}
}
&:checked {
+ label {
background-color: $pt-color-primary;
&::before {
background-color: $pt-color-primary;
}
&::after {
background-color: $pt-color-white;
color: $pt-color-primary;
margin-left: $pt-toggle-height;
}
}
}
}
}
}
@spatialy
Copy link

spatialy commented Oct 2, 2021

Hi, any guidance on how we can use this?

@kjtolsma
Copy link
Author

kjtolsma commented Oct 6, 2021

You need to "compile" this from a SASS (https://sass-lang.com/) file. So just put this in a SASS file, generate your CSS from that and you are off to go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment