_form.scss

/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-eng.txt / wet-boew.github.io/wet-boew/Licence-fra.txt
 */
@import "compass/css3/appearance";
@import "compass/css3/box-sizing";
@import "mixins";

@mixin forms {

	@include form-layout;
	@include form-element;
	@include form-style;

}

@mixin form-layout {

	form {

		padding-bottom: 1px;
		@if $legacy-support-for-ie7 {
			*padding-bottom: $margin-medium;
		}
		padding-top: 1px;

		legend {
			color: $dark;
			display: block;
			padding: 0;
		}

		#{headings(2, 6)} {
			margin-left: 0;
			margin-right: 0;
		}

		&.background-light {
			background: none;
			@include colorize-border(lighten($light, 3%), "outline");
			@include colorize-base(lighten($light, 3%));
			padding-top: 10px;
			padding-bottom: 10px;

			> {
				* {
					margin-left: 10px;
					margin-right: 10px;
				}
				fieldset {
					margin-left: 0;
					margin-right: 0;
				}
			}

			fieldset > {
				* {
					margin-left: 10px;
					margin-right: 10px;
				}
			}

			legend {
				padding-left: 10px;
				padding-right: 10px;
				margin: 0;
				@include box-sizing(border-box);
			}

			#{headings(2, 6)} {
				margin-left: 10px;
				margin-right: 10px;
			}
		}

		&.form-horizontal {
			padding: 1px 0 0;
		}

	}

	fieldset {
		padding: 0;
		margin: 0 0 $margin-medium;
		border: 0;
		vertical-align: middle;
	}

	label, input, button, select, textarea {
		font-weight: $font-weight-normal;
	}

	input, textarea, select, .form-uneditable-input {

		border-style: solid;
		border-width: 1px;
		min-height: 18px !important;
		margin-top: 0;
		margin-bottom: $margin-medium;
		padding: $default-border-radius;
		@include border-radius;

		&[class*="span"] {
			float: none;
			margin-left: 0;
			margin-right: 0;
		}
		.form-horizontal & {
			margin-bottom: 0;
		}
	}

	input {
		&[type="image"], &[type="checkbox"], &[type="radio"] {
			margin: 1px 0;
			padding: 0;
			min-height: 0;
			@include border-radius(0);
			+ label {
				@include inline-block;
			}
		}

		&[type="image"] {
			border: 0;
		}

		&[type="button"], &[type="reset"], &[type="submit"] {
			display: block;
			.form-inline & {
				@include inline-block;
			}
		}

		&[type="search"] {
			@include appearance(textfield);
		}
		@include input-placeholder {
			 color: $medium;
		}
	}

	label {
		display: block;
		margin-bottom: $spacing-small;
		@if $legacy-support-for-ie7 {
			*min-width: 97%;
		}

		.form-inline & {
			@include inline-block;
		}
		.form-horizontal & {
			padding-top: 3px;
			text-align: right;
		}
	}
}

@mixin form-element {

	.form-radio, .form-checkbox {
		padding-left: $margin-large;
		padding-top: $margin-small;
		text-align: left !important;
		zoom: 1;

		input {
			&[type="radio"], &[type="checkbox"] {
				float: left;
				margin-left: -1 * $margin-large;
				border: none\9; //Divide by 9 IE Hack
			}
		}

		.form-inline & {
			margin-right: $margin-medium;
		}
		&.form-label-inline {
			@include inline-block;
			padding-top: 5px;
			margin-bottom: 0;
			vertical-align: middle;
			//Nested parent of matching class
			& + & {
				margin-left: 10px;
			}
		}
	}

	.form-text-inline {
		padding-left: 5px;
		vertical-align: middle;
		@include inline-block;
	}

	.form-input-prepend, .form-input-append {

		input, select, .form-uneditable-input, button {
			position: relative;
			vertical-align: middle;

			@include pseudo-focus {
				z-index: 2;
			}
		}

		button {
			@include border-left-radius(0);
		}

		.form-addon {
			@include inline-block;
			min-height: 18px;
			line-height: 18px;
			min-width: 16px;
			@if $legacy-support-for-ie7 {
				*min-width: auto;
			}
			padding: 4px;
			text-align: center;
			vertical-align: top;

			&:first-child {
				@include border-left-radius;
				margin-right: -1px;
			}
			&:last-child {
				@include border-right-radius;
				margin-left: -1px;
			}
		}

	}

	input, select, .form-uneditable-input, button {
		.form-input-prepend & {
			@include border-left-radius(0);
		}
		.form-input-append & {
			@include border-right-radius(0);
		}
	}

	.form-inline {
		padding-bottom: 0;
		> {
			* {
				margin-right: $margin-medium / 2;
			}
		}
	}
}

@mixin form-style {
	form {
		#{headings(2, 6)} {
			border-bottom: 1px solid darken($light, 10%);
			color: $dark !important;
		}
	}

	legend {
		font-size: $font-large;
		line-height: $font-xlarge;

		&:after {
			border-top: 1px solid $silver;
			content: "";
			display: block;
			width: 100%;
			height: $margin-medium;
			clear: both;
		}
	}

	input, textarea, select {
		border-color: darken($light, 15%);
		@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));

		@include pseudo-focus(false) {
			border-color: $accent;

			@include transition(border 0.2s linear 0s, box-shadow 0.2s linear 0s);
			@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05), lighten($accent, 40%) 0 0 8px);

		}

		&[disabled], &[readonly], &.form-uneditable-input {
			@include colorize($light, false, false);
			color: $medium;
			cursor: not-allowed;

			@include pseudo-focus(false) {
				@include box-shadow(none);
			}
		}

		&.form-uneditable-input {
			background-color: $white !important;
		}

		// apply color to the form element
		.form-confirm & {
			border-color: $summary;
			@include pseudo-focus(false) {
				@include single-box-shadow($summary);
			}
		}
		.form-attention & {
			border-color: $red;
			@include pseudo-focus(false) {
				@include single-box-shadow($red);
			}
		}
		.form-alert & {
			border-color: darken($alert, 37%);
			@include pseudo-focus(false) {
				@include single-box-shadow(darken($alert, 37%));
			}
		}
	}

	// apply color to form text elements
	.form-help-block, .form-text-inline, > label {
		.form-confirm & {
			color: darken($summary, 5%);
		}
		.form-attention & {
			color: darken($red, 5%);
		}
		.form-alert & {
			color: darken($alert, 42%);
		}
	}

	// format the prepend and append styles
	.form-input-prepend, .form-input-append {

		.form-addon {
			@include colorize-base($light);
			@include colorize-border($light);
		}

	}
}