/*///////////////////////////////////////*/ | |
/* Outter form wrapper */ | |
.gform_body { | |
background:#f6f6f6; | |
border-radius:10px; | |
margin-bottom:40px; | |
overflow:hidden; | |
padding:50px 0px; | |
} | |
/* Preview Area */ | |
.preview-area { | |
height: auto; | |
position: relative; | |
width: 100%; | |
display: block; | |
padding: 70px; | |
} | |
/* Preview Layer */ | |
.preview-area img { | |
transform: translate(-50%); | |
position: relative; | |
left: 50%; | |
} | |
/*Color picker selects*/ | |
li.color-picker-field { | |
margin: 0 auto; | |
padding: 0px 70px; | |
text-align: center; | |
} | |
li.color-options .ginput_container_radio ul { | |
width: 70%; | |
margin: 0 auto; | |
text-align: center; | |
} | |
.color-picker-style-circle .color-picker-swatch-color-wrap { | |
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.003), 0 6.7px 5.3px rgba(0, 0, 0, 0.004), 0 12.5px 10px rgba(0, 0, 0, 0.005), 0 22.3px 17.9px rgba(0, 0, 0, 0.006), 0 41.8px 33.4px rgba(0, 0, 0, 0.007), 0 100px 80px rgba(0, 0, 0, 0.01); | |
} | |
/* Gfield label */ | |
label.gfield_label { | |
font-weight:bold; | |
font-size: 12px; | |
color: #717F87; | |
letter-spacing: 8px; | |
text-transform: uppercase; | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
.preview-area img.demo-artwork { | |
transform: translate(-50%,-50%); | |
position: absolute; | |
left: 50%; | |
top: 44%; | |
width: 180px; | |
} | |
.image-choices-field { | |
display: block; | |
max-width: 100%; | |
width: 100%; | |
} | |
.image-choices-field .gfield_label { | |
font-size: 2em; | |
margin-bottom: 1em; | |
display: block; | |
text-align: center; | |
} | |
.image-choices-field, | |
.gform_wrapper .gfield.image-choices-field { | |
margin-right: -10%; | |
} | |
.image-choices-field .image-choices-choice, | |
.gform_wrapper .gfield.image-choices-field li.image-choices-choice { | |
position: relative; | |
text-align: center; | |
padding: 20px 20px 20px!important; | |
vertical-align: middle; | |
transition: all .3s; | |
border-radius: 6px; | |
border: 1px solid transparent!important; | |
width: 25%; | |
margin-right: 0%!important; | |
overflow: visible; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-other input[type="text"] { | |
top: 40%; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-focus { | |
border-color: #ff584c !important; | |
} | |
.image-choices-field .gfield_radio .image-choices-choice.image-choices-choice-focus.image-choices-choice-selected { | |
border-color: #fff !important; | |
} | |
.image-choices-field .image-choices-choice label, | |
.gform_wrapper .gfield.image-choices-field li.image-choices-choice label { | |
padding: 0 !important; | |
display: block; | |
border: none !important; | |
} | |
.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; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-selected { | |
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-selected:after { | |
color: #fff; | |
opacity: 1; | |
} | |
.image-choices-field .image-choices-choice, | |
.image-choices-field .image-choices-choice.image-choices-choice-hover, | |
.image-choices-field .image-choices-choice.image-choices-choice-selected { | |
border-color: transparent !important; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-hover { | |
background-color: transparent !important; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-selected { | |
background-color: #fff !important; | |
box-shadow: 0 0 40px 0 rgba(0,0,0,.1); | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-text { | |
color: #ff584c; | |
} | |
.image-choices-field .image-choices-choice.image-choices-choice-selected:after { | |
bottom: -20px; | |
} | |
.image-choices-field .image-choices-choice-image-wrap { | |
border: none; | |
width: 100%; | |
height: auto; | |
padding-bottom: 100%; | |
background-color: transparent; | |
background-size: contain; | |
} | |
.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) { | |
.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) { | |
.image-choices-field .image-choices-choice, | |
.gform_wrapper .gfield.image-choices-field li.image-choices-choice { | |
width: 98%; | |
margin-right: 2% !important; | |
} | |
} | |
/* | |
Find out more at | |
https://jetsloth.com/gravity-forms-image-choices/ | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment