Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Choices + Page Transitions CSS
/* Style form wrapper max width 900px */
.gppt-has-page-transitions_wrapper {
background: #FFFFFF;
border: 1px solid #EBEBEB;
box-shadow: 2px 3px 4px 0 rgba(33,39,47,0.05);
border-radius: 8px;
max-width:900px;
min-height: 560px;
margin:0 auto;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
/*Style inputs*/
.gppt-has-page-transitions_wrapper .gform_fields input[type="text"],
.gppt-has-page-transitions_wrapper .gform_fields input[type="email"],
.gppt-has-page-transitions_wrapper .gform_fields textarea{
border: 1px solid #EBEBEB;
box-shadow: 2px 3px 4px 0 rgba(33,39,47,0.05);
max-width:500px;
}
/* Heading Form heading */
.gppt-has-page-transitions_wrapper .gform_title {
display:none;
}
.gppt-has-page-transitions_wrapper .gform_heading {
padding: 0;
}
.gppt-has-page-transitions_wrapper img.logo {
float: left;
margin-left: 50px;
margin-top: 6px;
}
/* Form logo and description */
.gppt-has-page-transitions_wrapper .gform_description {
display: block;
padding-top: 40px;
padding-right: 50px;
width: 100%;
text-align: right;
font-weight:normal;
color: #8297a7;
font-size:15px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.gppt-has-page-transitions_wrapper .image-choices-use-images label {
display:none;
}
/* Remove progress bar margins */
.gf_progressbar_wrapper {
margin:0px;
padding:0px;
}
/* Hide page steps title */
.gppt-has-page-transitions_wrapper .gf_progressbar_title {
display:none;
}
/* Remove progress bar margins */
.gppt-has-page-transitions_wrapper .gf_progressbar_wrapper {
margin: 0;
padding: 30px 50px 0 50px;
}
/* Hide page steps title */
.gppt-has-page-transitions_wrapper .gf_progressbar_title {
display:none;
}
/* Style pgress bar */
.gppt-has-page-transitions_wrapper .gf_progressbar {
background: #F3F3F3;
height: 5px;
overflow: hidden;
border: none;
border-radius: 3px;
padding: 0px;
margin: 0px;
}
.gppt-has-page-transitions_wrapper .gf_progressbar_percentage {
background: #0076FF;
height: 5px;
margin: 0;
border-radius: 3px;
}
.gform_wrapper.gravity-theme .gf_progressbar_percentage {
height: 5px;
}
/* Style Footer */
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer {
min-height: unset;
border-top: 1px solid #EBEBEB;
padding: 20px 50px;
margin:0;
}
/* Remove padding from fields group */
.gppt-has-page-transitions_wrapper .gform_page_fields {
padding: 30px 50px 0 50px;
margin: 0;
}
/* Hide field lables */
.gppt-has-page-transitions_wrapper .image-choices-choice label.gfield_label {
display:none;
}
/* Style content in HTML field */
.gppt-has-page-transitions_wrapper .gfield_html h2 {
font-size: 20px;
color: #1D1D1F;
letter-spacing: -0.44px;
line-height: 28px;
margin: 0;
font-weight:bold;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.gppt-has-page-transitions_wrapper .gfield_html p {
font-size: 15px;
color: #4C6A85;
line-height: 29px;
text-align: left;
font-weight:normal;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
/*Next Button style*/
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
border: none;
color:white;
margin:0;
border-radius:5px;
font-size: 16px;
font-weight:700;
color: #FFFFFF;
letter-spacing: -0.36px;
text-align: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 20px 35px;
}
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
background:#0076FF;
}
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button {
background:#B1C0CF;
}
/* Image Choices styles */
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice label {
border: none;
border-radius: 5px;
padding: 0px!important;
overflow: hidden;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice {
display: inline-block;
margin: 0 !important;
border: none;
vertical-align: top;
text-align: center;
width: 100%;
border-radius: 5px;
margin-right: 10px!important;
margin-bottom: 30px!important;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice-image-wrap {
width: 100%;
height: 200px;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice:after {
content: "\2714" !important;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
border:none;
opacity: 0;
transition: all .3s;
text-align: center;
line-height: 50px;
color: #fff;
display: block;
position: absolute;
left: 50%;
margin: -20px 0 0 -20px;
top: auto;
bottom: -30px;
background-color: #0076FF;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected:after {
color: #fff;
opacity: 1;
border:none;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-image-wrap:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
background-image: linear-gradient(188deg, rgba(0,0,0,0.00) 59%, rgba(0,0,0,0.7) 100%);
height: 210px;
width: 190px;
overflow: hidden;
border-radius: 5px;
}
/* Mobile Styles */
@media (max-width: 640px) {
/*Mobile Form Styles*/
.gppt-has-page-transitions_wrapper {
min-height:unset;
}
.gppt-has-page-transitions_wrapper .gform_body.gform-body {
overflow: visible!important;
}
.gppt-has-page-transitions_wrapper span.gform_description {
text-align: left;
padding-right: unset;
padding-left: 10px;
width: 100%;
padding-top: unset;
}
.gppt-has-page-transitions_wrapper .gform_description img.logo {
margin: 0 0 20px 0;
margin-top: 0;
display: block;
float: unset;
}
.gppt-has-page-transitions_wrapper {
border:none;
background:none;
box-shadow:none;
}
.gppt-has-page-transitions_wrapper .gform_page_fields {
padding: 10px;
}
.gppt-has-page-transitions_wrapper .gf_progressbar_wrapper {
padding: 10px 10px 0 10px;
}
/*Image Choices mobile styles*/
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice:after {
bottom: -20px;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-image-wrap:before {
width: 100%;
}
/*Footer styles*/
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer {
border-top: none;
position: relative;
display: block;
padding: 0 10px;
margin: -10px 0;
}
/*Button styles*/
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
width:100%;
display:block;
margin: 0!important;
}
.gform_wrapper.gravity-theme .gform_previous_button.button {
-webkit-appearance: none !important;
background-color: #ebe9eb;
margin-bottom: 10px!important;
}
/*Input mobile styles*/
.gform_wrapper.gravity-theme .gfield input.medium, .gform_wrapper.gravity-theme .gfield select.medium {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment