Last active
July 20, 2017 07:06
-
-
Save jetsloth/a97d0dc4eacdd3a5db6f4e87df9520a1 to your computer and use it in GitHub Desktop.
Gravity Forms Collapsible Sections - Custom Styles 2
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
.form-has-collapsible-sections_wrapper { | |
margin: 0 auto; | |
text-align: left; | |
width: 460px; | |
max-width: 100%; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field { | |
background-color: #fff; | |
border-color: #ededed !important; | |
padding: 14px 20px 14px 20px !important; | |
margin-top: 14px !important; | |
border-radius: 3px; | |
transition: border-color 0.3s, background-color 0.3s, color 0.3s; | |
box-shadow: 0 0 8px 0 rgba(0,0,0,.1); | |
position: relative; | |
z-index: 1; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open { | |
border-color: #847efc !important; | |
background-color: #847efc; | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field:nth-child(1) { | |
margin-top: 0 !important; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title { | |
font-size: 14px; | |
background: transparent; | |
padding: 0; | |
border-radius: 0; | |
margin-top: 0; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title { | |
color: #fff; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title:after { | |
content: "\f132"; | |
top: 60%; | |
color: #d8d8d8; | |
transition: color 0.3s; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title:after { | |
content: "\f460" !important; | |
color: #fff; | |
} | |
.form-has-collapsible-sections .collapsible-sections-collapsible-body { | |
border-radius: 3px; | |
border-color: #ededed; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
background-color: #fff; | |
box-shadow: 0 0 8px 0 rgba(0,0,0,.1); | |
position: relative; | |
z-index: 2; | |
} | |
.form-has-collapsible-sections .validation_error { | |
margin-bottom: 0; | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
background: #b3304c; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error { | |
border-color: #b3304c !important; | |
background-color: #fff; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error input, | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error textarea, | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error select { | |
border-color: #b3304c; | |
color: #b3304c; | |
} | |
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error .gfield_label { | |
color: #790000; | |
} | |
/* | |
Find out more at | |
https://jetsloth.com/gravity-forms-collapsible-sections/ | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment