/*/////////////////// | |
JetSloth.com | |
Display your Collapsible Sections in tabs with this CSS updates | |
Full article at https://jetsloth.com/labs/display-your-form-with-tabs-using-collapsible-sections/ | |
////////////////////*/ | |
/* /////////////////// Form wrapper /////////////////// */ | |
.form-has-collapsible-sections_wrapper { | |
margin: 0 auto; | |
text-align: left; | |
max-width: 100%; | |
margin-top: 0px; | |
padding: 160px 100px; | |
background:url('https://jetsloth.com/wp-content/uploads/2017/03/Gravity-forms-image-choices-label-8.jpg'); | |
border-radius:5px; | |
background-size: 1200px; | |
overflow:hidden; | |
} | |
/* /////////////////// Tabs setup /////////////////// */ | |
.collapsible-sections-field .gsection_title:after { | |
color: #dbe1ec; | |
font: 400 17px/1 slothicons !important; | |
} | |
.collapsible-sections-open h2.gsection_title { | |
color:white | |
} | |
.collapsible-sections-field h2.gsection_title { | |
font-size:15px | |
} | |
.gform_fields { | |
position: relative!important; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open { | |
background: #867aff!important; | |
transition:all 0.3s ease-in-out; | |
position: absolute!important; | |
} | |
.gfield.collapsible-sections-field { | |
width: calc(33.333% - 1px); | |
height: 50px; | |
position: absolute!important; | |
top: -43px; | |
background:white!important; | |
border:none!important; | |
transition:all 0.3s ease-in-out; | |
position: absolute; | |
} | |
.gfield.collapsible-sections-field:hover { | |
background:#f9f9f9!important; | |
} | |
.form-has-collapsible-sections .collapsible-sections-collapsible-body { | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
border: none; | |
background-color: #fff; | |
position: relative; | |
z-index: 2; | |
border-top: 2px solid #f9f9f9; | |
box-shadow: | |
0 5.1px 4.7px rgba(0, 0, 0, 0.065), | |
0 12.4px 11.3px rgba(0, 0, 0, 0.093), | |
0 23.3px 21.3px rgba(0, 0, 0, 0.115), | |
0 41.5px 38px rgba(0, 0, 0, 0.137), | |
0 77.7px 71px rgba(0, 0, 0, 0.165), | |
0 186px 170px rgba(0, 0, 0, 0.23); | |
} | |
/* /////////////////// Tab Positions /////////////////// */ | |
.gfield.collapsible-sections-field:nth-child(1) { | |
left: 0; | |
border:none!important; | |
margin: 0px!important; | |
padding: 14px 20px 0px 20px!important; | |
border-top-left-radius: 5px; | |
} | |
.gfield.collapsible-sections-field:nth-child(5) { | |
right: 0; | |
border:none!important; | |
margin: 0px!important; | |
padding: 14px 20px 0px 20px!important; | |
border-top-right-radius: 5px; | |
} | |
.gfield.collapsible-sections-field:nth-child(3) { | |
left: 50%; | |
transform:translateX(-50%); | |
padding: 14px 20px 0px 20px!important; | |
border:none!important; | |
margin: 0px!important; | |
} | |
.collapsible-tabs-form .gform_fields { | |
position: relative; | |
width: 100%; | |
padding-top: 50px!important; | |
} | |
/* Position each tab across the top */ | |
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(1) { | |
left: 0; | |
} | |
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(3) { | |
left: 50%; | |
transform: translateX(-50%); | |
} | |
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(5) { | |
right: 0; | |
} | |
/* /////////////////// Tab title styles /////////////////// */ | |
.gsection_title { | |
font-size: 18px; | |
background: none; | |
padding: 0px; | |
border-radius: 0px; | |
color: #3e4a5b; | |
margin-top: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment