Last active
March 10, 2020 00:44
-
-
Save jetsloth/752912bdb4e927e1e9f600c4373bf32d to your computer and use it in GitHub Desktop.
This file contains hidden or 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 Image Choices - Custom Style - Floating | |
Find out more at | |
https://jetsloth.com/support/gravity-forms-image-choices/custom-styles-floating/ | |
*/ | |
.gform_wrapper .image-choices-field { | |
display: block; | |
max-width: 640px; | |
width: 100%; | |
} | |
.gform_wrapper .image-choices-field .gfield_label { | |
font-size: 2em; | |
margin-bottom: 1em; | |
display: block; | |
text-align: center; | |
} | |
.gform_wrapper .image-choices-field, | |
.gform_wrapper .gform_wrapper .gfield.image-choices-field { | |
margin-right: -10%; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice, | |
.gform_wrapper .gform_wrapper .gfield.image-choices-field li.image-choices-choice { | |
position: relative; | |
text-align: center; | |
padding: 20px 20px 70px !important; | |
margin-bottom: 50px !important; | |
vertical-align: middle; | |
transition: all 0.3s; | |
border-radius: 6px; | |
border: 1px solid transparent !important; | |
width: 48%; | |
overflow: visible; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-focus { | |
border-color: #ff584c !important; | |
} | |
.gform_wrapper .image-choices-field .gfield_radio .image-choices-choice.image-choices-choice-focus.image-choices-choice-selected { | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice label, | |
.gform_wrapper .gform_wrapper .gfield.image-choices-field li.image-choices-choice label { | |
padding: 0 !important; | |
display: block; | |
border: none !important; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice:after { | |
content: "\2714" !important; | |
width: 40px; | |
height: 40px; | |
overflow: hidden; | |
border-radius: 50%; | |
pointer-events: none; | |
opacity: 0; | |
transition: all .3s; | |
text-align: center; | |
line-height: 40px; | |
color: #fff; | |
display: block; | |
position: absolute; | |
left: 50%; | |
margin: -20px 0 0 -20px; | |
top: auto; | |
bottom: -40px; | |
background-color: #ff584c; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected { | |
transform: scale(1.1); | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected:after { | |
color: #fff; | |
opacity: 1; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice, | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-hover, | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected { | |
border-color: transparent !important; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-hover .image-choices-choice-image-wrap{ | |
box-shadow: -20px -20px 50px rgba(0,0,0,.2); | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected { | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-text { | |
color: #ff584c; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected:after { | |
bottom: -20px; | |
} | |
.gform_wrapper .image-choices-field .image-choices-choice-image-wrap { | |
border: none; | |
width: 100%; | |
height: auto; | |
padding-bottom: 100%; | |
background-color: transparent; | |
background-size: cover; | |
border-radius: 5px; | |
box-shadow: 20px 20px 50px rgba(0,0,0,0.2); | |
} | |
.gform_wrapper .image-choices-field.image-choices-show-labels .image-choices-choice-text { | |
font-size: inherit; | |
position: absolute; | |
left: 50%; | |
transform: translateX(-50%); | |
bottom: 30px; | |
width: 100%; | |
transition: all 0.3s; | |
} | |
@media only screen and (max-width: 736px) { | |
.gform_wrapper .image-choices-field .image-choices-choice, | |
.gform_wrapper .gfield.image-choices-field li.image-choices-choice { | |
width: 48%; | |
margin-right: 2% !important; | |
} | |
} | |
@media only screen and (max-width: 480px) { | |
.gform_wrapper .image-choices-field .image-choices-choice, | |
.gform_wrapper .gfield.image-choices-field li.image-choices-choice { | |
width: 98%; | |
margin-right: 2% !important; | |
} | |
} | |
.image-choices-lightbox-btn { | |
background-color: #FF584C; | |
border-radius: 100%; | |
padding: 25px; | |
top:0px; | |
right:0px; | |
} | |
/* | |
Find out more at | |
Gravity Forms Image Choices | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment