Last active
June 11, 2021 06:31
-
-
Save tahmid-ul/ab75d5d86df7589a44a57f71615e65d5 to your computer and use it in GitHub Desktop.
Clickable image for Radio or Checkbox field
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
/** | |
* Styles the Radio field as clickable image for Fluent Forms | |
* | |
* Use: Paste into Custom CSS Section of your Form | |
* Add class "fancy-input" to container of all inputs that need the fancy styling | |
* | |
* Forked version of Sebastian Berger from inital post Fluent Forms FB Group - https://bit.ly/37BBpet | |
* FB Post - https://bit.ly/2ZEn2BG | |
* | |
* Full Links at bottom | |
**/ | |
.fluent_form_FF_ID .ff-el-form-check label.ff-el-form-check-label { | |
text-align: center!important; | |
padding:5px!important; | |
} | |
.fluent_form_FF_ID .fancy-input label.ff-el-image-input-src { | |
width: 60%!important; | |
background-size:contain!important; | |
/* background-color: #e2e2e2; */ | |
} | |
.fluent_form_FF_ID .fancy-input .ff-el-image-holder{ | |
display: flex!important; | |
margin: 1%!important; | |
border-width: 2px; | |
border-color: #e2e2e2; | |
flex-direction:column; | |
border-style: solid; | |
border-radius: 9px; | |
} | |
.fluent_form_FF_ID .fancy-input .ff-el-form-check-label .ff-el-form-check-input { | |
display: none; | |
} | |
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders { | |
display: grid!important; | |
padding-top: 50px!important; | |
padding-bottom: 50px!important; | |
grid-template-columns: 1fr 1fr 1fr 1fr; | |
gap: 15px 15px; | |
} | |
@media only screen and (max-width: 818px){ | |
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{ | |
grid-template-columns: 1fr 1fr 1fr; | |
}} | |
@media only screen and (max-width: 618px){ | |
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{ | |
grid-template-columns: 1fr 1fr; | |
}} | |
@media only screen and (max-width: 386px){ | |
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{ | |
grid-template-columns: 1fr; | |
}} | |
.fluent_form_FF_ID .fancy-input .ff-el-image-holder:hover { | |
color: #f4a52c; | |
transform: scale(1.0.4); | |
box-shadow: | |
0 0.8px 1.4px rgba(0, 0, 0, 0.02), | |
0 2px 3.3px rgba(0, 0, 0, 0.028), | |
0 3.8px 6.3px rgba(0, 0, 0, 0.035), | |
0 6.7px 11.2px rgba(0, 0, 0, 0.042), | |
0 12.5px 20.9px rgba(0, 0, 0, 0.05), | |
0 30px 50px rgba(0, 0, 0, 0.07); | |
} | |
.fluent_form_FF_ID .fancy-input .ff-el-image-holder { | |
align-items: center; | |
justify-content: space-around!important; | |
transition: all .3s ease-in-out; | |
padding: 0px!important; | |
} | |
.fluent_form_FF_ID .fancy-input .ff-el-form-check { | |
width:95% !important; | |
} | |
.fluent_form_FF_ID .fancy-input .ff_item_selected{ | |
border:red 2px solid !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment