Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@kjtolsma
Last active September 25, 2023 14:58
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • 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;
}
}
}
}
}
}
@oga23
Copy link

oga23 commented May 31, 2018

Would you please tell me where to put this snippet? Thank you.

@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