Less: Basic forms

forms.less

//
//
// Forms
// ====================================================================

form {
  margin: 0 0 @line-height-base;
}
label {
  display: block;
  margin-bottom: 5px;
}

// Form controls
// --------------------------------------------------------------------

select,
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"] {
  display: inline-block;
  vertical-align: middle;
  height: @line-height-base;
  margin-bottom: @line-height-base / 2;
  padding: 4px 6px;
}

// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
select {
  width: 140px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
  height: auto;
}
// Everything else
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"] {
  background-color: @white;
  border: 1px solid @gray-light;
  box-shadow: inset 0 1px 1px fade(@black,80);
  .transition(~"border linear .2s, box-shadow linear .2s");

  // Focus state
  &:focus {
    border-color: @gray-dark;
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    box-shadow: inset 0 1px 1px fade(@black,80), 0 0 8px rgba(82,168,236,.6);
  }
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9; /* IE8-9 */
  line-height: normal;
}

// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto; // Override of generic input selector
}

// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
  // height: @inputHeight;
  // line-height: @inputHeight;
}

// Make select elements obey height by applying a border
select {
  width: 155px; // default input width + 10px of padding that doesn't get applied
  // border: 1px solid @gray;
  // background-color: darken(@white,4); // Chrome on Linux and Mobile Safari need background-color
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}



// Layout (horizontal)
// --------------------------------------------------------------------

.control-group {
	.row(12); // Remember row resets!
	clear:both;
	overflow:hidden;
	.controls {
		overflow: hidden;
	}
	.control label {
		margin-bottom:0; // Reset above
	}
}

// Required fields
.required {
	.control-label {
		.column(6,12);
		padding-left: 30px; // nudge inline with header
		.box-sizing(border-box); // don't affect grid
	}
	.controls {
		.column(6,12);
		margin-bottom: @line-height-base / 3;
	}
}

// Area
// --------------------------------------------------------------------

.region {
	.row(12); // Row resets after it's been used already!
	.checkbox {
		.column(4,12);
	}
}

// Locations
// --------------------------------------------------------------------

.locations .controls {
	.checkbox {
		.column(2);
	}
}

// Submit form
// --------------------------------------------------------------------

.submit {
	text-align: center;
	padding: @line-height-base 0;
	box-shadow: 0 -3px 5px -3px fade(@black,80);
}