Last active
September 25, 2023 14:58
-
-
Save kjtolsma/1f088ae70c09819108cdd38ab903bdda to your computer and use it in GitHub Desktop.
CSS3 toggle switch for Gravity Forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} | |
} | |
} | |
} | |
} |
Hi, any guidance on how we can use this?
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
Would you please tell me where to put this snippet? Thank you.