/*doc
---
title: Forms
name: forms
category: CSS
---

```html_example_table
<form>
  <div class="form-group">
    <label for="to">Default</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
  </div>
  <div class="form-group has-success">
    <label for="to">Success</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="to">Success</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
    <span class="fa fa-icon fa-check form-control-feedback"></span>
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group has-warning">
    <label for="to">Warning</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group has-error">
    <label for="to">Error</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="to">Error</label>
    <input type="email" class="form-control" id="to" placeholder="Enter email">
    <span class="fa fa-icon fa-close form-control-feedback"></span>
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group">
    <label for="to">addonBefore</label>
    <div class="input-group">
      <div class="input-group-addon">poptype.co/</div>
      <input type="email" class="form-control" id="to" placeholder="your-name-here">
    </div>
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group">
    <label for="to">Disabled input</label>
    <input type="email" class="form-control" id="to" placeholder=":disabled" disabled>
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group">
    <label for="message">Textarea</label>
    <textarea class="form-control" id="subject" placeholder="Enter message"></textarea>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" name="samecheck"> Check me out
      </label>
      <br>
      <label>
        <input type="checkbox" name="samecheck"> Check me out again
      </label>
    </div>
  </div>

  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="sameradio"> Check me out
      </label>
      <br>
      <label>
        <input type="radio" name="sameradio"> Check me out again
      </label>
    </div>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
      <option>option 4</option>
    </select>
  </div>

  <h3>Input button</h3>
  <div class="input-group">
    <input class="form-control" type="text">
    <span class="input-group-btn">
      <div class="btn-group">
        <button class="btn btn-default" type="button">Show</button>
      </div>
    </span>
  </div>
  <div class="form-group text-right form-actions">
    <button type="reset" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>

  <div class="form-group">
    <label for="formControlsEmail" class="control-label">Locked field</label>
    <span class="input-group">
      <input disabled type="text" id="formControlsEmail" class="fake-field-text form-control" value="locked-field@example.org">
      <span class="input-group-addon fake-field-addon"><i name="lock" class="fa fa-lock"></i></span>
    </span>
  </div>
</form>

<form>
  <div class="form-group">
    <label for="form-links">Form links example</label>
    <input type="text" class="form-control" id="form-links" placeholder="Organization name">
  </div>
  <button type="submit" class="btn btn-primary pull-right">Submit</button>
  <div class="form-group form-links">
    <a href="#" class="pull-left">Link one</a>
    <a href="#" class="pull-left">Link two</a>
    <a href="#" class="pull-right">Link three</a>
  </div>
</form>
```
*/
$form-border-width: 1px;

.form-group {
  margin-bottom: $gutter-vertical;

  &.has-error label {
    color: $brand-danger;
  }

  .help-block {
    font-size: $font-size-small;
    margin-top: $gutter-vertical-half;
  }
}

.form-actions {
  padding-top: $space-large;
}

.input-group-addon {
  border: $form-border-width solid $gray-lighten;
}

.form-control {
  background: $white;
  border: $form-border-width solid $gray-lighten;
  box-shadow: none;
  padding: 7px  15px 8px;

  @include placeholder {
    color: $gray-light;
    font-style: italic;
  }

  &:hover {
    border-color: #aaa;
  }

  &:focus {
    border-color: $color-poptype-blue;
    box-shadow: 0px 0px 3px 0px rgba(33,115,210,0.3);
  }

  &[disabled] {
    background-color: $gray-lightestest;
    border-color: $input-border-disabled;
  }
}

.has-error .form-control,
.has-warning .form-control,
.has-success .form-control {
  box-shadow: none;

  &:focus {
    border-color: $color-poptype-blue;
    box-shadow: 0px 0px 3px 0px rgba(33,115,210,0.3);
  }
}

.has-feedback .form-control-feedback {
  line-height: $input-height-base;
}

.has-feedback label ~ .form-control-feedback {
  // offset top by the full height of the label if present
  top: $input-height-base - $padding-base-vertical;
}

label {
  color: $gray;
  font-weight: 600;
  margin-bottom: $gutter-vertical-half;
}

.checkbox label,
.radio label {
  color: $text-color;
  font-size: $font-size-base;
  margin-bottom: 0;
  text-transform: none;
}

textarea {
  resize: vertical;
}

.form-links {
  text-align: left;

  a {
    padding: ($padding-base-vertical + 1) ($padding-base-horizontal + 1);

    &.pull-left:first-child {
      padding-left: 0;
    }
  }
}

.input-group-btn {
  .btn {
    background: $gray-lightest;
    border-radius: $border-radius-base;
    padding: 13px 15px 12px;
  }
}

.fake-field {
  border: 0;

  &-text {
    background: $ui-color-lighter;
    border: 0;
    color: $text-color-dark;
  }

  &-addon {
    background-color: $gray-lightest;
    border-color: $gray-lightest;
  }
}