Instantly share code, notes, and snippets.

Embed
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;
}
}
}
}
}
}
@oga23

This comment has been minimized.

Show comment
Hide comment
@oga23

oga23 May 31, 2018

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

oga23 commented May 31, 2018

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

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