rapido-css 0.0.1 → 0.0.2.1

data/stylesheets/components/_forms.scss

@@ -1,513 +1,351 @@
+// ====================================================================================================================
+// FORMS
+// ====================================================================================================================
+
 @if $forms {
 
-	// GENERICI
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	form {
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
+
+	.form {
+		@extend .clearfix;
 		margin: 0 0 em($base-line-height);
-	}
-	fieldset {
-		padding: 0;
-		margin: 0;
-		border: 0;
-	}
-	legend {
-		display: block;
-		width: 100%;
-		padding: 0;
-		@include adjust-font-size-to($h5-size);
-		font-weight: bold;
-		border: 0;
-		padding-bottom: rhythm(.5);
-		margin-bottom: rhythm(.5) - 1;
-		border-bottom: 1px solid #e5e5e5;
-		small {
-			font-size: em($base-font-size);
-			color: $grayLight;
+
+		fieldset {
+			padding: 0;
+			margin: 0;
+			border: 0;
 		}
-	}
-	label,
-	input,
-	button,
-	select,
-	textarea {
-		// @include adjust-font-size-to($base-font-size);
-		line-height: 1em;
-		// @include adjust-font-size-to($base-font-size);
-	}
-	input,
-	button,
-	select,
-	textarea {
-		font-family: $base-font-family;
-	}
-	label {
-		display: block;
-		margin-bottom: em($label-margin-bottom);
-		font-weight: bold;
-		cursor: auto;
-	}
-	textarea,
-	input[type="text"],
-	input[type="password"],
-	input[type="datetime"],
-	input[type="datetime-local"],
-	input[type="date"],
-	input[type="month"],
-	input[type="time"],
-	input[type="week"],
-	input[type="number"],
-	input[type="email"],
-	input[type="url"],
-	input[type="search"],
-	input[type="tel"],
-	input[type="color"],
-	.uneditable-input {
-		@include border-radius($base-border-radius);
-		display: inline-block;
-		// font-size: $base-font-size;
-		// line-height: $base-line-height;
-		// @include adjust-font-size-to($base-font-size);
-		padding: $input-padding;
-		// padding: 0 $input-padding-side;
-		vertical-align: middle;
-		height: $input-height;
-		// height: auto;
-		border-width: $input-border;
-		border-style: solid;
-		@extend %input !optional;
-		&:focus {
-			outline: 0;
+		legend {
+			display: block;
+			width: 100%;
+			padding: 0;
+			@include adjust-font-size-to($h5-size);
+			font-weight: bold;
+			border: 0;
+			padding-bottom: rhythm(.5);
+			margin-bottom: rhythm(.5) - 1;
+			border-bottom: 1px solid #e5e5e5;
+			small {
+				font-size: em($base-font-size);
+				color: $grayLight;
+			}
 		}
-	}
-	select {
-		color: $text-color;
-		display: inline-block;
-		// option:disabled {color: $gray;}
-	}
-	input,
-	textarea,
-	.uneditable-input {
-		width: 240px;
-	}
-	textarea {
-		height: auto;
-		line-height: rhythm(1);
-		padding: $input-padding;
-	}
-
-
-	input[type="radio"],
-	input[type="checkbox"] {
-		margin: em(2px) 0 0;
-		// *margin-top: 0; /* IE7 */
-		// margin-top: 1px \9; /* IE8-9 */
-		// line-height: normal;
-	}
-	input[type="file"],
-	input[type="image"],
-	input[type="submit"],
-	input[type="reset"],
-	input[type="button"],
-	input[type="radio"],
-	input[type="checkbox"] {
-		width: auto;
-	}
-	select,
-	input[type="file"] {
-		*margin-top: 4px; /* For IE7, add top margin to align select with labels */
-	}
-	select, .select {
-		width: 240px;
-	}
-	select[multiple],
-	select[size] {
-		height: auto;
-	}
-	select:focus,
-	input[type="file"]:focus,
-	input[type="radio"]:focus,
-	input[type="checkbox"]:focus {
-		// @include tab-focus(); // Bootstrap
-	}
-
-
-	// INPUT NON EDITABILE
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.uneditable-input,
-	.uneditable-textarea {
-		color: $grayLight;
-		cursor: not-allowed;
-	}
-	.uneditable-input {
-		overflow: hidden;
-		white-space: nowrap;
-	}
-	.uneditable-textarea {
-		width: auto;
-		height: auto;
-	}
-	input,
-	textarea {
-		@include placeholder(); // Bootstrap
-	}
+		label,
+		input,
+		button,
+		select,
+		textarea {
+			line-height: 1em;
+		}
+		input,
+		button,
+		select,
+		textarea {
+			font-family: $base-font-family;
+		}
+		label {
+			display: block;
+			margin-bottom: em($label-margin-bottom);
+			font-weight: bold;
+			cursor: auto;
+		}
+		textarea,
+		input[type="text"],
+		input[type="password"],
+		input[type="datetime"],
+		input[type="datetime-local"],
+		input[type="date"],
+		input[type="month"],
+		input[type="time"],
+		input[type="week"],
+		input[type="number"],
+		input[type="email"],
+		input[type="url"],
+		input[type="search"],
+		input[type="tel"],
+		input[type="color"] {
+			@include border-radius($base-border-radius);
+			display: inline-block;
+			padding: $input-padding;
+			vertical-align: middle;
+			height: $input-height;
+			border-width: $input-border;
+			border-style: solid;
+			@extend %input !optional;
 
+			&:focus {outline: 0;}
+		}
 
+		select {
+			color: $text-color;
+			display: inline-block;
+		}
 
-	// RADIO & CHECKBOX
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.radio,
-	.checkbox,
-	.select {
-		min-height: em($base-line-height);
-		padding-left: 20px;
-		margin-bottom: 0;
-		font-weight: normal;
-		cursor: pointer;
-		line-height: rhythm(1);
-	}
-	.select {padding-left: 0;}
+		input,
+		textarea {
+			width: 240px;
+		}
 
-	.radio input[type="radio"],
-	.checkbox input[type="checkbox"] {
-		float: left;
-		margin-left: -20px;
-	}
-	.controls > .radio:first-child,
-	.controls > .checkbox:first-child {
-	}
-	.radio.inline,
-	.checkbox.inline {
-		display: inline-block;
-		margin-bottom: 0;
-		vertical-align: middle;
-	}
-	.radio.inline + .radio.inline,
-	.checkbox.inline + .checkbox.inline {
-		margin-left: 20px;
-	}
+		textarea {
+			height: auto;
+			line-height: rhythm(1);
+			padding: $input-padding;
+		}
 
-	// SELECT
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-
-	span.select {
-		@extend %caret !optional;
-		@include border-radius(3px);
-		border-style: solid;
-		border-width: $input-border;
-		cursor: pointer;
-		display: inline-block;
-		height: $input-height;
-		line-height: 1em;
-		position: relative;
-		width: 240px;
 
-		select {
-			@include appearance(none);
-			background-color:transparent;
-			background-image:none;
-			border:none;
-			box-shadow:none;
-			cursor: pointer;
-			padding: $input-padding;
-			position: relative;
-			width:100%;
-			z-index: 3;
-			line-height: 1em;
+		input[type="radio"],
+		input[type="checkbox"] {
+			margin: em(2px) 0 0;
 		}
 
-		&:after {
-			position: absolute;
-			top: 50%;
-			right: em($input-padding-side);
-			content: "";
-			display: block;
+		input[type="file"],
+		input[type="image"],
+		input[type="submit"],
+		input[type="reset"],
+		input[type="button"],
+		input[type="radio"],
+		input[type="checkbox"] {
+			width: auto;
 		}
 
-	 	@extend %select !optional;
+		select, .select {
+			width: 240px;
+		}
+		select[multiple],
+		select[size] {
+			height: auto;
+		}
 
-	}
 
-	// INPUT DISABILITATI
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	input[disabled],
-	select[disabled],
-	textarea[disabled],
-	input[readonly],
-	select[readonly],
-	textarea[readonly] {
-		cursor: not-allowed;
-	}
-	input[type="radio"][disabled],
-	input[type="checkbox"][disabled],
-	input[type="radio"][readonly],
-	input[type="checkbox"][readonly] {
-		background-color: transparent;
-	}
-	input:focus:invalid,
-	textarea:focus:invalid,
-	select:focus:invalid {
-		color: #b94a48;
-		border-color: #ee5f5b;
-		&:focus {
-			border-color: darken(#ee5f5b, 10%);
+		input,
+		textarea {
+			@include placeholder();
 		}
-	}
-
-	// FORM ACTIONS
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.form-actions {
-		padding-top: rhythm(1);
-		margin-top: rhythm(1);
-		margin-bottom: rhythm(1);
-		border-top: 1px solid #e5e5e5;
-		clear: both;
-		@extend .clearfix;
-	}
 
 
-	// HELP BLOCKS
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.help-block,
-	.help-inline {
-		color: lighten($text-color, 15%);
-	}
-	.help-block {
-		display: block;
-		padding: rhythm(.5) 0 0;
-	}
-	.help-inline {
-		display: inline-block;
-		// @include ie7-inline-block();
-		@include inline-block();
-		vertical-align: middle;
-		padding-left: 5px;
-	}
 
-	@if $forms-append {
-		// APPEND & PREPEND
+		// RADIO & CHECKBOX
 		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		.controls {
-			@extend .clearfix;
-			// display: inline-block;
+		.radio,
+		.checkbox,
+		.select {
+			min-height: em($base-line-height);
+			padding-left: 20px;
+			margin-bottom: 0;
+			font-weight: normal;
+			cursor: pointer;
+			line-height: rhythm(1);
 		}
-		.input-append,
-		.input-prepend {
+		.select {padding-left: 0;}
+
+		.radio input[type="radio"],
+		.checkbox input[type="checkbox"] {
+			float: left;
+			margin-left: -20px;
+		}
+		.controls > .radio:first-child,
+		.controls > .checkbox:first-child {
+		}
+		.radio.inline,
+		.checkbox.inline {
 			display: inline-block;
+			margin-bottom: 0;
 			vertical-align: middle;
-			white-space: nowrap;
-			margin-left: -$input-border;
+		}
+		.radio.inline + .radio.inline,
+		.checkbox.inline + .checkbox.inline {
+			margin-left: 20px;
+		}
 
-			input,
-			select,
-			.uneditable-input,
-			.dropdown-menu,
-			.popover {
-				float: left;
-			}
 
-			input,
-			select,
-			.uneditable-input {
-				position: relative;
-				margin-bottom: 0;
-				*margin-left: 0;
-				vertical-align: top;
-				@include border-radius(0 $base-border-radius $base-border-radius 0);
-				&:focus {
-					z-index: 2;
-				}
-			}
-			.add-on {
-				display: inline-block;
-				width: auto;
-				min-width: em(16px);
+		// CUSTOM SELECT
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		span.select {
+			@extend %caret !optional;
+			@include border-radius(3px);
+			border-style: solid;
+			border-width: $input-border;
+			cursor: pointer;
+			display: inline-block;
+			height: $input-height;
+			line-height: 1em;
+			position: relative;
+			width: 240px;
+
+			select {
+				@include appearance(none);
+				background-color:transparent;
+				background-image:none;
+				border:none;
+				box-shadow:none;
+				cursor: pointer;
 				padding: $input-padding;
-				// padding: $input-padding-top 0;
-				line-height: 1em;
-				font-weight: normal;
-				float: left;
-				height: $input-height;
-				text-align: center;
-				border-width: $input-border;
-				border-style: solid;
-				@extend %input-addon !optional;
-			}
-			.btn-group {float: left;}
-			.add-on,
-			.btn,
-			.btn-group > .dropdown-toggle {
-				float: left;
-				vertical-align: top;
+				position: relative;
+				width:100%;
+				z-index: 3;
 				line-height: 1em;
-				@include border-radius(0);
-				height: $input-height;
 			}
-			.active {
+
+			&:after {
+				position: absolute;
+				top: 50%;
+				right: em($input-padding-side);
+				content: "";
+				display: block;
 			}
+
+		 	@extend %select !optional;
+
 		}
-		.input-prepend {
-			.add-on,
-			.btn {
-				margin-left: -$input-border;
-			}
-			.btn-group {margin-left: 1px;}
-			.add-on:first-child,
-			.btn:first-child {
-				@include border-radius($base-border-radius 0 0 $base-border-radius);
+
+		// DISABLED INPUTS
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		input[disabled],
+		select[disabled],
+		textarea[disabled],
+		input[readonly],
+		select[readonly],
+		textarea[readonly] {
+			cursor: not-allowed;
+		}
+		input[type="radio"][disabled],
+		input[type="checkbox"][disabled],
+		input[type="radio"][readonly],
+		input[type="checkbox"][readonly] {
+			background-color: transparent;
+		}
+		input:focus:invalid,
+		textarea:focus:invalid,
+		select:focus:invalid {
+			color: #b94a48;
+			border-color: #ee5f5b;
+			&:focus {
+				border-color: darken(#ee5f5b, 10%);
 			}
-			input,
-			select,
-			.uneditable-input {margin-left: -$input-border * 2}
 		}
-		.input-append {
-			input,
-			select,
-			.uneditable-input {
-				@include border-radius($base-border-radius 0 0 $base-border-radius);
 
-				+ .btn-group .btn:first-child {
-					@include border-radius(0);
-				}
+		// HELP BLOCKS
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		.help-block,
+		.help-inline {
+			color: lighten($text-color, 15%);
+		}
+		.help-block {
+			display: block;
+			padding: rhythm(.5) 0 0;
+		}
+		.help-inline {
+			@include inline-block();
+			vertical-align: middle;
+			padding-left: 5px;
+		}
 
-				+ .btn-group .btn:last-child {
-					@include border-radius(0 $base-border-radius $base-border-radius 0);
-				}
-			}
-			.add-on,
-			.btn,
-			.btn-group {
-				margin-left: -$input-border;
-			}
 
-			/*.add-on:first-child,
-			.btn:first-child {
-				@include border-radius( 0);
-			}*/
-			.add-on:last-child,
-			.btn:last-child,
-			.btn-group:last-child > .dropdown-toggle {
-				@include border-radius(0 $base-border-radius $base-border-radius 0);
-			}
-		}
-		.input-prepend.input-append {
-			input,
-			select,
-			.uneditable-input {
-				@include border-radius(0);
-				+ .btn-group .btn {
-					@include border-radius(0 $base-border-radius $base-border-radius 0);
-				}
-			}
-			.add-on:first-child,
-			.btn:first-child {
-				margin-right: -$input-border;
-				@include border-radius($base-border-radius 0 0 $base-border-radius);
-			}
-			.add-on:last-child,
-			.btn:last-child {
-				margin-left: -$input-border;
-				@include border-radius(0 $base-border-radius $base-border-radius 0);
-			}
-			.btn-group:first-child {
-				margin-left: 0;
-			}
+		// CONTROL GROUPS & CONTROLS
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		.control-group {
+			margin-bottom: em($control-margin-bottom);
+
+			.control { @extend .clearfix; }
 		}
+
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Form Actions
+// --------------------------------------------------------------------------------------------------------------------
 
-	// CONTROLS / CONTROL GROUPS
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.controls {
-		margin-bottom: em($control-margin-bottom);
+	.form__actions {
+		padding-top: rhythm(1);
+		margin-top: rhythm(1);
+		margin-bottom: rhythm(1);
+		border-top: 1px solid #e5e5e5;
+		clear: both;
 		@extend .clearfix;
-		// background-color: red;
-	}
-	legend + .control-group {
-		margin-top: em($base-line-height);
-		-webkit-margin-top-collapse: separate;
 	}
 
-	@if $forms-inline {
-		// INLINE
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		.form-inline {
-			@extend .clearfix;
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Form Inline
+// --------------------------------------------------------------------------------------------------------------------
+@if $forms-inline {
 
-			input,
-			textarea,
-			select,
-			.help-inline,
-			.uneditable-input,
-			.input-prepend,
-			.input-append {
-				// display: inline-block;
-				// @include ie7-inline-block();
-				// @include inline-block();
-				float: left;
-				margin-bottom: 0;
-				vertical-align: middle;
-				margin-right: em(8px);
-			}
-			.hide {
-				display: none;
-			}
+	.form--inline {
+
+		input,
+		textarea,
+		select,
+		.help-inline,
+		.uneditable-input,
+		.input-prepend,
+		.input-append {
+			float: left;
+			margin-bottom: 0;
+			vertical-align: middle;
+			margin-right: em(8px);
 		}
 
-		.form-inline label {
+		.hide {
+			display: none;
+		}
+
+		label {
 			padding-top: em($input-padding-top);
 			margin-right: em(8px);
 		}
 
-		.form-inline label,
-		.form-inline .btn-group {
+		label,
+		.btn-group {
 			display: inline-block;
 			float: left;
 		}
-		.form-inline .input-append,
-		.form-inline .input-prepend {
+
+		.input-append,
+		.input-prepend {
 			margin-bottom: 0;
 		}
-		.form-inline .radio,
-		.form-inline .checkbox {
+
+		.radio,
+		.checkbox {
 			padding-left: 0;
 			margin-bottom: 0;
 			vertical-align: middle;
 		}
-		.form-inline .radio input[type="radio"],
-		.form-inline .checkbox input[type="checkbox"] {
+
+		.radio input[type="radio"],
+		.checkbox input[type="checkbox"] {
 			float: left;
 			margin-right: 3px;
 			margin-left: 0;
 		}
 	}
+}
 
-	@if $forms-horizontal {
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Form Aligned
+// --------------------------------------------------------------------------------------------------------------------
 
-		// FORMS ORIZZONTALI
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		.form-horizontal {
+	@if $forms-aligned {
+
+		.form--aligned {
 			@extend .clearfix;
-			// .control-group {
-			// 	@include clearfix();
-			// }
+
 			.control-label {
 				float: left;
 				width: em($horizontal-offset) - em(20px);
 				padding-top: em($input-padding-top);
 				text-align: right;
 			}
+
 			.controls {
-				*display: inline-block;
-				*padding-left: 20px;
 				margin-left: em($horizontal-offset);
-				*margin-left: 0;
-				&:first-child {
-					*padding-left: em($horizontal-offset);
-				}
 			}
+
 			.help-block {
 				margin-bottom: 0;
 			}
+
 			input,
 			select,
 			textarea,
@@ -518,9 +356,11 @@
 				// 	margin: rhythm(.5) 0 0;
 				// }
 			}
+
 			select {
 				// margin-top: $input-padding-top;
 			}
+
 			.controls > .radio:first-child,
 			.controls > .checkbox:first-child {
 				padding-top: em($input-padding-top) - em(2px);
@@ -554,11 +394,14 @@
 		}
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Form Columns
+// --------------------------------------------------------------------------------------------------------------------
+
 	@if $forms-columns {
-		// FORM INCOLONNATI
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		.form-columns {
-			@extend .clearfix;
+
+		.form--columns {
+
 			.control-group {
 				min-height: $control-min-height;
 				.input-append,
@@ -569,11 +412,8 @@
 					}
 				}
 			}
-
-			.input-prepend {
-				// .btn-group {margin-right: (-$input-border);}
-			}
 		}
 	}
 
-}
+
+} // end IF $forms