forms.less

/*
 * Forms.less
 * Base styles for various input types, form layouts, and states
 */


/* Global form styles
-------------------------------------------------- */

form {
  margin-bottom: @baseline;
  // Groups of fields with labels on top (legends)
  fieldset {
    margin-bottom: @baseline;
    padding-top: @baseline;
    legend {
      display: block;
      margin-left: 150px;
      font-size: 20px;
      line-height: 1;
      color: @grayDark;
    }
  }
  // Parent element that clears floats and wraps labels and fields together
  div.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: 13px;
    line-height: 18px;
    float: left;
    width: 130px;
    text-align: right;
    color: @grayDark;
  }
  // Shift over the inside div to align all label's relevant content
  div.input {
    margin-left: 150px;
  }
  // Checkboxs and radio buttons
  input[type=checkbox],
  input[type=radio] {
    cursor: pointer;
  }
  // Inputs, Textareas, Selects
  input[type=text],
  input[type=password],
  textarea,
  select,
  .uneditable-input {
    display: inline-block;
    width: 210px;
    margin: 0;
    padding: 4px;
    font-size: 13px;
    line-height: @baseline;
    height: @baseline;
    color: @gray;
    border: 1px solid #ccc;
    .border-radius(3px);
  }
  select,
  input[type=file] {
    height: @baseline * 1.5;
    line-height: @baseline * 1.5;
  }
  textarea {
    height: auto;
  }
  .uneditable-input {
    background-color: #eee;
    display: block;
    border-color: #ccc;
    .box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
  }
  // Placeholder text gets special styles; can't be bundled together though for some reason
  :-moz-placeholder {
    color: @grayLight;
  }
  ::-webkit-input-placeholder {
    color: @grayLight;
  }
  // Focus states
  input[type=text],
  input[type=password],
  select, textarea {
    @transition: border linear .2s, box-shadow linear .2s;
    .transition(@transition);
    .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
  }
  input[type=text]:focus,
  input[type=password]:focus,
  textarea:focus {
    outline: none;
    border-color: rgba(82,168,236,.8);
    @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
    .box-shadow(@shadow);
  }
  // Error styles
  div.error {
    background: lighten(@red, 57%);
    padding: 10px 0;
    margin: -10px 0 10px;
    .border-radius(4px);
    @error-text: desaturate(lighten(@red, 25%), 25%);
    > label,
    span.help-inline,
    span.help-block {
      color: @red;
    }
    input[type=text],
    input[type=password],
    textarea {
      border-color: @error-text;
      .box-shadow(0 0 3px rgba(171,41,32,.25));
      &:focus {
        border-color: darken(@error-text, 10%);
        .box-shadow(0 0 6px rgba(171,41,32,.5));
      }
    }
    div.input-prepend,
    div.input-append {
      span.add-on {
        background: lighten(@red, 50%);
        border-color: @error-text;
        color: darken(@error-text, 10%);
      }
    }
  }
  // Form element sizes
  .input-mini, input.mini, textarea.mini, select.mini {
    width: 60px;
  }
  .input-small, input.small, textarea.small, select.small {
    width: 90px;
  }
  .input-medium, input.medium, textarea.medium, select.medium {
    width: 150px;
  }
  .input-large, input.large, textarea.large, select.large {
    width: 210px;
  }
  .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
    width: 270px;
  }
  .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
    width: 530px;
  }
  textarea.xxlarge {
    overflow-y: scroll;
  }
  // Turn off focus for disabled (read-only) form elements
  input[readonly]:focus,
  textarea[readonly]:focus,
  input.disabled {
    background: #f5f5f5;
    border-color: #ddd;
    .box-shadow(none);
  }
}

// Actions (the buttons)
div.actions {
  background: #f5f5f5;
  margin-top: @baseline;
  margin-bottom: @baseline;
  padding: (@baseline - 1) 20px @baseline 150px;
  border-top: 1px solid #ddd;
  .border-radius(0 0 3px 3px);
  div.secondary-action {
    float: right;
    a {
      line-height: 30px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// Help Text
.help-inline,
.help-block {
  font-size: 12px;
  line-height: @baseline;
  color: @grayLight;
}
.help-inline {
  padding-left: 5px;
}
// Big blocks of help text
.help-block {
  display: block;
  max-width: 600px;
}

// Inline Fields (input fields that appear as inline objects
div.inline-inputs {
  color: @gray;
  span, input[type=text] {
    display: inline-block;
  }
  input.mini {
    width: 60px;
  }
  input.small {
    width: 90px;
  }
  span {
    padding: 0 2px 0 1px;
  }
}

// Allow us to put symbols and text within the input field for a cleaner look
div.input-prepend,
div.input-append {
  input[type=text] {
    .border-radius(0 3px 3px 0);
  }
  .add-on {
    background: #f5f5f5;
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    padding: 4px 4px 4px 5px;
    color: @grayLight;
    font-weight: normal;
    line-height: 18px;
    height: 18px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    border: 1px solid #ccc;
    border-right-width: 0;
    .border-radius(3px 0 0 3px);
  }
  .active {
    background: lighten(@green, 30);
    border-color: @green;
  }
}
div.input-append {
  input[type=text] {
    float: left;
    .border-radius(3px 0 0 3px);
  }
  .add-on {
    .border-radius(0 3px 3px 0);
    border-right-width: 1px;
    border-left-width: 0;
  }
}

// Stacked options for forms (radio buttons or checkboxes)
ul.inputs-list {
  margin: 0 0 5px;
  width: 100%;
  li {
    display: block;
    padding: 0;
    width: 100%;
    label {
      display: block;
      float: none;
      width: auto;
      padding: 0;
      line-height: @baseline;
      text-align: left;
      white-space: normal;
      strong {
        color: @gray;
      }
      small {
        font-size: 12px;
        font-weight: normal;
      }
    }
    ul.inputs-list {
      margin-left: 25px;
      margin-bottom: 10px;
      padding-top: 0;
    }
    &:first-child {
      padding-top: 5px;
    }
  }
  input[type=radio],
  input[type=checkbox] {
    margin-bottom: 0;
  }
}

// Stacked forms
form.form-stacked {
  padding-left: 20px;
  fieldset {
    padding-top: @baseline / 2;
  }
  legend {
    margin-left: 0;
  }
  label {
    display: block;
    float: none;
    width: auto;
    font-weight: bold;
    text-align: left;
    line-height: 20px;
    padding-top: 0;
  }
  div.clearfix {
    margin-bottom: @baseline / 2;
    div.input {
      margin-left: 0;
    }
  }
  ul.inputs-list {
    margin-bottom: 0;
    li {
      padding-top: 0;
      label {
        font-weight: normal;
        padding-top: 0;
      }
    }
  }
  div.actions {
    margin-left: -20px;
    padding-left: 20px;
  }
}