Gravity Forms styles for use with a Zurb Foundation 6 based theme.

_gravity-forms.scss

/*------------------------------------*\
    #GRAVITY-FORMS
\*------------------------------------*/

// GF styles don't play nice with Foundation, so this is to try and fix those things.





// Gravity Forms medium breakpoint will probably not be the same as Foundation's,
// so set GF's medium breakpoint here.
$gform-medium-bp: 641;





// Layout.

// If you want a border around your forms.
/*
.gform_wrapper {
    border: 5px solid $light-gray;
    padding:
        ( map-get($grid-margin-gutters, small) - 10px ) map-get($grid-margin-gutters, small) map-get($grid-margin-gutters, small);

    @include breakpoint(medium) {
        padding:
            ( map-get($grid-margin-gutters, medium) - 10px ) map-get($grid-margin-gutters, medium) map-get($grid-margin-gutters, medium);
    }

}
*/
@include breakpoint($gform-medium-bp) {
    .gform_wrapper ul.gform_fields {
        width: calc(100% + 16px);
    }

    .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container {
        margin-bottom: -12px;
    }

}

.gform_wrapper .gform_footer {
    padding: 0;
}





// Labels.

.gform_wrapper .gsection .gfield_label,
.gform_wrapper h2.gsection_title,
.gform_wrapper h3.gform_title
{
    font-weight: normal;
}

.gform_wrapper label.gfield_label {
    font-size: $form-label-font-size;
    font-weight: $form-label-font-weight;
}

.gform_wrapper .gfield_required {
    color: $alert-color;
}

.gform_wrapper .field_sublabel_above .ginput_complex.ginput_container label,
.gform_wrapper .field_sublabel_above div[class*=gfield_date_].ginput_container label,
.gform_wrapper .field_sublabel_above div[class*=gfield_time_].ginput_container label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label,
.gform_wrapper .field_sublabel_below div[class*=gfield_date_].ginput_container label,
.gform_wrapper .field_sublabel_below div[class*=gfield_time_].ginput_container label
{
    color: #333;
    font-size: $form-label-font-size - rem-calc(2);
    font-weight: $global-weight-normal;
}

.gform_wrapper .field_sublabel_below div[class*=gfield_time_].ginput_container label {
    margin-bottom: 0;
}

.gform_wrapper .description_above .gfield_description {
    padding-bottom: 0;
}

.gform_wrapper .field_description_below .gfield_description {
    padding-top: 0.5rem;
}





// Inputs.

.gform_wrapper .top_label div.ginput_container {
    margin-top: 0 !important;
}

.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea
{
    margin-bottom: 0;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    padding: $input-padding;
}





// Time Input.

.gform_wrapper .ginput_container_time input {
    display: inline-block;
}





// Recaptcha w/o label.

.gform_wrapper .top_label div.ginput_container.ginput_recaptcha {
    margin-top: -16px !important;
}





// Button.

@include breakpoint($gform-medium-bp down) {
    .gform_wrapper input.button,
    .gform_wrapper input[type=submit]
    {
        line-height: 1em !important;
    }
}





// Error.

.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning
{
    border: $callout-border;
    padding: 5px !important;
    background-color: rgba($alert-color,.05);
}

.gform_wrapper div.validation_error,
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message
{
    color: $alert-color;
}

.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper li.gfield_error select,
.gform_wrapper li.gfield_error textarea
{
    border: $input-border;
    border-color: $alert-color;
}

.gform_wrapper div.validation_error {
    @extend .callout;
    @extend .callout.alert;
}





// Success.

.gform_confirmation_message {
    @extend .callout;
    @extend .callout.success;
}





// Show For SR.

.gform_wrapper .screen-reader-text {
    @extend .show-for-sr;
}

functions.php

// Deregister Gravity Forms Browsers Stylesheet.
function meta13_deregister_gform_styles() {
	wp_deregister_style( 'gforms_browsers_css' );
}
add_action( 'gform_enqueue_scripts', 'meta13_deregister_gform_styles' );