BrewFans form SASS

form.scss

form{
	fieldset{
		padding:$baseline*2 0 0 0; margin:$baseline*2 $baseline*2 $baseline*3 0;
		border:0; border-top:1px solid rgba( 140, 140, 140, 0.35 );
		
		legend{ 
			position:relative; top:-2px; padding-right:$gutter;
			color:$light_grey; font-weight:bold; font-size:$fsize_large; line-height:$lsize_large;
		}
	}

	.field{
		clear:both; padding:$baseline 0 $baseline*2; position:relative;
	}
	
	.field_with_errors{
		display:inline;
		
		label, label.in_field{ color:$red_col; }
		
		input, textarea{
			border:1px solid $red_col;
			color:$red_col;
			
			&:focus{ border-color:#FFF; }
		}
	}
	
	label{
		display:inline-block; padding-right:$gutter;
		color:$faded_col; font-weight:bold; 
		font-size:$fsize_large; line-height:$lsize_large;

		&.radio{
			width:auto; margin-right:$gutter;
			color:$copy_col; font-size:14px; font-weight:bold;
		}
		
		&.in_field{
			position:absolute; top:$baseline*2.25; left:$baseline*1.5;
			color:$dark_grey; cursor:text;
		}
		
		&.invalid{ color:lighten( $red_col, 10% ); }
		
		&[for]:hover{ cursor:pointer; opacity:0.9; }
		&[generated]{ font-size:$fsize_small; line-height:$lsize_small; }
	}

	input{		
		&[type=text], &[type=password]{
			@include rounded;
			@include text_shadow( rgba(0,0,0,0.1) );
			@include inset_box_shadow( 12px, 3px, 0.1 );
		
			padding:4px $baseline 0; height:34px;
			color:$darker_grey; font-size:$fsize_large; line-height:$lsize_large+$baseline;
			background:white; border:1px solid rgba( 0, 0, 0, 0.2 );

			&:focus{ @include glow( 4px, $green_col ); }
			
			&.validated{ background:lighten( $green_col, 40% ); }
			&.invalid{   background:lighten( $red_col,   40% ); }
		}
		
		&[type=submit]{ cursor:pointer; }
	}
	
	textarea{ 
		@include rounded;
		@include inset_box_shadow( 12px, 3px, 0.1 );
		@include text_shadow( rgba(0,0,0,0.1) ); 
		
		padding:4px $baseline 0;
		color:$darker_grey; font-size:$fsize_large; line-height:$lsize_large+$baseline;
		font-family:$content_fonts;
		background:white; border:1px solid rgba( 0, 0, 0, 0.2 );

		&:focus{ @include glow( 4px, $green_col ); }
		&.validated{ background:lighten( $green_col, 40% ); }
		&.invalid{   background:lighten( $red_col,   40% ); }
	}

	input[type="file"]{ color:#FFF; font-weight:bold; }

	textarea{ clear:both; }
	
	.actions{ clear:both; padding:$baseline*3 0 $baseline; }
}