forms.less 7.43 KiB
/* Forms.less
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */
// FORM STYLES
// -----------
form {
  margin-bottom: @baseline;
// Groups of fields with labels on top (legends)
fieldset {
  margin-bottom: @baseline;
  padding-top: @baseline;
  legend {
    display: block;
    padding-left: 150px;
    font-size: @basefont * 1.5;
    line-height: 1;
    color: @grayDark;
    *padding: 0 0 5px 145px; /* IE6-7 */
    *line-height: 1.5; /* IE6-7 */
// Parent element that clears floats and wraps labels and fields together
form .clearfix {
  margin-bottom: @baseline;
// Set font for forms
label,
input,
select,
textarea {
  #font > .sans-serif(normal,13px,normal);
// Float labels left
label {
  padding-top: 6px;
  font-size: @basefont;
  line-height: @baseline;
  float: left;
  width: 130px;
  text-align: right;
  color: @grayDark;
// Shift over the inside div to align all label's relevant content
form .input {
  margin-left: 150px;
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
  cursor: pointer;
// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
  display: inline-block;
  width: 210px;
  height: @baseline;