Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gravity Forms SCSS reset styles for easy style editing and management
///////////////////////////////////////////////
////// GRAVITY FORMS RESET STYLES //////
///////////////////////////////////////////////
// These styles are made in mind to be used with SCSS or LESS
// If you use these styles, you must go to the Gravity Forms settings in the WordPress back end and set Output CSS to No.
////----- Core Containers
.gform_heading,
.gform_body,
.gform_footer {
clear: both;
padding-bottom: 20px;
}
////----- Fields Container
ul.gform_fields {
list-style: none;
margin: 0 -15px;
padding: 0;
}
////----- Field Containers and their Contents
li.gfield {
clear: both;
overflow: auto;
padding: 0 15px 20px;
}
.ginput_container {
span {
margin-bottom: 10px;
}
input,
select,
textarea {
&.large {
width: 100%;
}
&.medium {
width: 66%;
}
&.small {
width: 33%;
}
}
input,
textarea {
margin: 2px;
}
}
label.gfield_label {
display: inline-block;
padding-bottom: 10px;
.left_label & {
float: left;
width: 25%;
}
.right_label & {
float: right;
width: 25%;
}
}
.gfield_required {
padding-left: 5px;
}
////----- Checkboxes and Radios
ul.gfield_checkbox,
ul.gfield_radio {
list-style: none;
padding: 0;
input {
margin-right: 10px;
position: relative;
top: -1px;
}
}
ul.gfield_radio {
input {
margin-left: 2px;
}
}
////----- Section Break
.gsection {
h2 {
border-bottom: 3px solid black;
padding-bottom: 15px;
}
}
////----- Page Break
.gf_progressbar_wrapper {
padding-bottom: 15px;
}
.gf_progressbar {
background: gray;
}
.gf_progressbar_percentage {
background: red;
padding: 5px 10px;
text-align: right;
}
////----- Time Field
.gfield_time_hour, .gfield_time_minute, .gfield_time_ampm {
display: inline;
display: inline-block;
}
.gfield_time_hour, .gfield_time_minute {
label {
display: block;
}
}
.gfield_time_ampm {
vertical-align: top;
}
////----- Validation and Errors
.validation_error {
font-size: 1.2em;
font-weight: bold;
padding-bottom: 15px;
}
li.gfield {
&.gfield_error {
background: #FFDFE0;
margin-bottom: 15px;
padding-top: 15px;
label.gfield_label {
font-weight: bold;
}
}
&.gfield_contains_required {
}
.validation_message {
font-weight: bold;
margin-top: 10px;
}
}
.gform_validation_container {
display: none;
}
////----- CSS Ready Classes
.ginput_full {
display: block;
input, select, textarea {
margin-bottom: 5px;
width: 100%;
}
label {
display: block;
}
}
.ginput_left {
float: left;
padding-right: 10px;
width: 50%;
input, select, textarea {
margin-bottom: 5px;
width: 100%;
}
label {
display: block;
}
}
.ginput_right {
float: right;
width: 50%;
input, select, textarea {
margin-bottom: 5px;
width: 100%;
}
label {
display: block;
}
}
.ginput_right {
float: right;
width: 50%;
}
//----- Layout Columns
li.gf_left_half {
clear: none;
float: left;
padding-right: 10px;
padding-bottom: 10px;
width: 50%;
}
li.gf_right_half {
clear: none;
float: right;
padding-bottom: 10px;
width: 50%;
}
li.gf_left_third {
clear: none;
float: left;
padding-right: 10px;
padding-bottom: 10px;
width: 33%;
}
li.gf_middle_third {
clear: none;
float: left;
padding-right: 10px;
padding-bottom: 10px;
width: 34%;
}
li.gf_right_third {
clear: none;
float: right;
padding-bottom: 10px;
width: 33%;
}
li.gf_first_quarter {
clear: none;
float: left;
padding-right: 10px;
padding-bottom: 10px;
width: 25%;
}
li.gf_second_quarter {
clear: none;
float: left;
padding-right: 10px;
padding-bottom: 10px;
width: 25%;
}
li.gf_third_quarter {
clear: none;
float: left;
padding-bottom: 10px;
width: 25%;
}
li.gf_fourth_quarter {
clear: none;
float: right;
padding-bottom: 10px;
width: 25%;
}
@media screen and (max-width:480px){
li {
&.gf_left_half,
&.gf_right_half,
&.gf_left_third,
&.gf_middle_third,
&.gf_right_third,
&.gf_first_quarter,
&.gf_second_quarter,
&.gf_third_quarter,
&.gf_fourth_quarter {
width: 100%;
}
}
}
//----- List Columns
.gf_list_2col {
ul.gfield_checkbox,
ul.gfield_radio {
li {
float: left;
padding-bottom: 10px;
width: 50%;
}
}
}
.gf_list_3col {
ul.gfield_checkbox,
ul.gfield_radio {
li {
float: left;
padding-bottom: 10px;
width: 33%;
}
}
}
.gf_list_4col {
ul.gfield_checkbox,
ul.gfield_radio {
li {
float: left;
padding-bottom: 10px;
width: 25%;
}
}
}
.gf_list_5col {
ul.gfield_checkbox,
ul.gfield_radio {
li {
float: left;
padding-bottom: 10px;
width: 20%;
}
}
}
.gf_list_inline {
ul.gfield_checkbox,
ul.gfield_radio {
li {
display: inline-block;
padding-right: 10px;
padding-bottom: 10px;
}
}
}
@media screen and (max-width:480px){
.gf_list_2col,
.gf_list_3col,
.gf_list_4col,
.gf_list_5col {
ul.gfield_checkbox,
ul.gfield_radio {
li {
width: 100%;
}
}
}
}
@elielkiiskinen

This comment has been minimized.

Copy link

@elielkiiskinen elielkiiskinen commented Feb 12, 2016

Saved my day!

@cstrouse

This comment has been minimized.

Copy link

@cstrouse cstrouse commented Aug 3, 2020

Thanks a bunch for this! Any reason why you haven't added defaults for hidden labels?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment