Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment