SCSS Starter Stylesheet for Gravity Forms

GravityFormsStarterStylesheet-SCSS

/* ==========================================================================
Code:       SCSS Starter Stylesheet for Gravity Forms
Gist URI:   https://gist.github.com/danielsmcclintock/8997161 (on GitHub)
Version:    0.4.2
Author:     Daniel McClintock
Author URI: http://about.me/McClintock

Notes:
		This is coded for use in an SCSS file, using nested selectors
 		to limit the already-excruciating descendent selector hell,
 		being how ridiculously overqualified Gravity Forms' core
 		rulesets are.

SCSS Usage:
		Be sure to set a wrapper class in Gravity Forms' settings, and
 		reference that as the key selector in the first line.

Resources:
		http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
		http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/
		http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
		http://www.gravityhelp.com/resources/cssguide/css_guide.html
		http://www.gravityhelp.com/gravity-forms-css-visual-guide/
		https://github.com/csswizardry/CSS-Guidelines
   ========================================================================== */

/* Change to match form wrapper class set in Gravity Forms settings. */
.gform_wrapper form.MY_FORM_WRAPPER {

	/* Default form width set by Gravity */
	// max-width: 98%;
	max-width: 100%;

	/*==========  Default Classes  ==========*/

	input[type=text],
	input[type=url],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=password],
	textarea {
		border: 0px none;
		margin-top: 10px;
		padding:10px;
		// Bootstrap
		// background: lighten($brand-sup1, 30%);
	}
	ul li.gfield {
		margin-bottom: 10px;
	}
	.top_label {
		.gfield_label {
			font-weight: 700;
		}
		li.gfield.gf_left_half,
		li.gfield.gf_right_half {
			input.medium,
			input.large,
			select.medium,
			select.large {
				width: 97%;
			}
		}
		.gfield_error {
			width: 100%;
		}
		li.gfield.gfield_error.gf_left_half,
		li.gfield.gfield_error.gf_right_half [
			width: 49%;
			margin-right: 0;
		]
	}
	.gform_footer {
		input.button,
		input[type=submit] {
			border: 0px none;
			padding: 10px;
			width: 50%;
			margin-left: auto;
			margin-right: auto;
			// Bootstrap
			// @include btn-pseudo-states($brand-sup2, $brand-logoPrim, $brand-sup2)
		}
	}
	label {
		font-weight: inherit;
	}
	.gsection {
		border-bottom: 0px none;
		margin: 30px 0;
	}
	div.validation_error {
		// Bootstrap
		// color: $text-danger;
		color: #ff0000;
		font-weight: 500;
	}
	li.gfield.gfield_error {
		background: none;
		border-top: 0px none;
		border-bottom: 0px none;
		padding: 0 !important;
	li.gfield.gfield_error.gfield_contains_required {
		margin-bottom: 8px !important;
		padding-left: 0 !important;
		&.gfield_creditcard_warning {
			@extend li.gfield.gfield_error;
		}
		label.gfield_label {
			margin-top: 10px;
		}
		div.ginput_container {
			margin-top: 0;
		}
	}
	.gfield_error .gfield_label {
		// Bootstrap
		// color: darken($text-color, 5%);
		font-weight: 500;
	}
	.ginput_container + .gfield_description.validation_message {
		margin-top: 0;
	}
	li.gfield_error {
		input[type=text],
		input[type=url],
		input[type=email],
		input[type=tel],
		input[type=number],
		input[type=password],
		textarea {
			border: 0px none;
			// Bootstrap
			// border-bottom: 2px solid $text-danger;
		}
		div.ginput_complex.ginput_container label,
		ul.gfield_checkbox,
		ul.gfield_radio {
			color: inherit;
		}
	}
	.validation_message {
		// Bootstrap
		// font-weight: 500;
		// color: $text-danger;
	}

	/* Selector override to fix clipped radio inputs */
	ul.gfield_radio li,
	ul.gfield_checkbox li {
		// Option 1:
		overflow: inherit;
		// Option 2:
		// padding-left: 1px !important;
	}
}