Gravity Forms SCSS Styling

gfstyling.scss

// Gravity Forms Reset Styles
// https://gist.github.com/forgeandsmith/8048759
//
// Some fields have been removed, as they were not needed.
// See the above link for future reference

.gfield_required {
    display: none;
}

.gform_wrapper {
    width: 100%;
    font-size: 1rem;
}

.gform_heading,
.gform_body {
	clear: both;
}

.gform_button {
    margin: 0;
}

////----- Fields Container
.gform_fields {
	list-style: none;
	padding: 0;
}

////----- Field Containers and their Contents
.gfield {
	margin: 0 0 0.5em 0;
    width: 100%;
}

.gfield_label,
.gfield label {
    display: inline-block;
    color: $fox_brand_red;
    font-weight: 500;
}

// Add "optional" text after optional field label
.gfield:not(.gfield_contains_required) > label:after {
    content: " (optional).";
    font-weight: 400;
}

// Add fullstop after required label
.gfield > label:after {
    content: ".";
}

.ginput_container {
    display: inline-block;
    width: 100%;

    input[type=text],
    input[type=email],
    select {
        width: 100%;
        border: 0.0625em solid $fox_brand_red;
        padding: 0.25em 0.5em;
        color: $fox_brand_red;
    }

    input[type=text]:hover,
    input[type=text]:focus,
    input[type=email]:hover,
    input[type=email]:focus,
    select:hover,
    select:focus {
        background-color: darken( #fff, 10% );
    }

}


////----- Validation and Errors

.gform_wrapper {
    .validation_error {
        color: $fox_brand_red;
    	padding-bottom: 0.625em;
        font-size: 1.25em;
    }
}

.gfield {
	.validation_message {
        background: $fox_brand_red;
		padding: 0.25em 0.5em;
        color: #fff;
        font-size: 0.9em;
	}
}

.gform_validation_container {
	display: none;
}

.gform_confirmation_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gform_confirmation_message {
    font-size: 1.25em;
    color: #fff;
}

// General radio button and checkbox styling

input[type=checkbox],
input[type=radio] {
    opacity: 0;
    position: absolute;
}

.gfield_checkbox li label,
.gfield_radio li label,
.checkbox label,
.radio label  {
    position: relative;
    display: inline-block;
    padding-left: 1.25em;
}

.gfield_checkbox li label:before,
.gfield_checkbox li label:after,
.gfield_radio li label:before,
.gfield_radio li label:after,
.checkbox label:before,
.checkbox label:after,
.radio label:before,
.radio label:after {
    content: "";
    display: inline-block;
    position: absolute;
}

/*Outer box of the fake checkbox*/
.gfield_checkbox li label:before,
.gfield_radio li label:before,
.checkbox label:before,
.radio label:before {
    border: 1px solid $fox_brand_red;
    height: 1em;
    width: 1em;
    left: 0px;
    top: 0.25em;
}

/*Checkmark of the fake checkbox*/
.gfield_checkbox li label:after,
.gfield_radio li label:after,
.checkbox label:after,
.radio label:after {
    background-color: $fox_brand_red;
    height: 0.6em;
    width: 0.6em;
    left: 0.2em;
    top: 0.45em;
}

.gfield_radio li label:before,
.gfield_radio li label:after,
.radio label:before,
.radio label:after {
    border-radius: 50%;
}

/*Hide the checkmark by default*/
.gfield_checkbox li input[type="checkbox"] + label::after,
.gfield_radio li input[type="radio"] + label::after,
.checkbox input[type="checkbox"] + label::after,
.radio input[type="radio"] + label::after {
    content: none;
}

/*Unhide on the checked state*/
.gfield_checkbox li input[type="checkbox"]:checked + label:after,
.gfield_radio li input[type="radio"]:checked + label:after,
.checkbox input[type="checkbox"]:checked + label:after,
.radio input[type="radio"]:checked + label:after {
    content: "";
}


// Styling for red-backed forms

.back-red {
    .gform_wrapper {
        input[type=text],
        input[type=email],
        select {
            color:#fff;
            background-color: $fox_brand_red;
            border: 0.0625em solid #fff;
        }

        input[type=text]:hover,
        input[type=text]:focus,
        input[type=email]:hover,
        input[type=email]:focus,
        select:hover,
        select:focus {
            background-color: darken( $fox_brand_red, 10% );
        }

        .validation_error {
            color: #fff;
        }

    }

    .gfield_label {
        display: inline-block;
        color: #fff;
    }

    .gfield {
    	.validation_message {
            background: #fff;
            color: $fox_brand_red;
    	}
    }

    .gform_confirmation_message {
        color: $fox_brand_red;
    }

}

@media only screen and (min-width: em(1000px)) {

    .gfield.half {
        width: calc(50% - 1em);
    }

    .gfield.half:nth-of-type(odd) {
        margin-right: 1em;
    }

}

Based off https://gist.github.com/forgeandsmith/8048759. Revised to be smaller and more concise.