amazeui/less/form.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                       Forms
//
// Description:                Define style for form elements
//
// Component:                 `.am-form`
//
// Modifiers:                  ``
//
// =============================================================================

/* ==========================================================================
   Component: Form
 ============================================================================ */

/* Normalize */

// Restyle and baseline non-control form elements.

fieldset {
  border: none;
}

legend {
  display: block;
  width: 100%;
  margin-bottom: @line-height-computed;
  font-size: (@form-font-size * 1.25);
  line-height: inherit;
  color: @legend-color;
  border-bottom: 1px solid @legend-border-color;
  padding-bottom: 0.5rem;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}

// Normalize form controls

// Override content-box in Normalize
input[type="search"] {
  box-sizing: border-box;
}

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

// Set the height of select and file controls to match text inputs
input[type="file"] {
  display: block;
}

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

// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
select optgroup {
  font-size: inherit;
  font-style: inherit;
  font-family: inherit;
}

// Focus for select, file, radio, and checkbox

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

// Fix for Chrome number input
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
// See https://github.com/twbs/bootstrap/issues/8350 for more.

input[type="number"] {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    height: auto;
  }
}

// Adjust output element
output {
  display: block;
  padding-top: @global-spacing;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  vertical-align: middle;
}

/* Common form controls */

.@{ns}form select,
.@{ns}form textarea,
.@{ns}form input[type="text"],
.@{ns}form input[type="password"],
// `datetime` has been removed from WHATWG HTML
// https://github.com/whatwg/html/issues/336
.@{ns}form input[type="datetime"],
.@{ns}form input[type="datetime-local"],
.@{ns}form input[type="date"],
.@{ns}form input[type="month"],
.@{ns}form input[type="time"],
.@{ns}form input[type="week"],
.@{ns}form input[type="number"],
.@{ns}form input[type="email"],
.@{ns}form input[type="url"],
.@{ns}form input[type="search"],
.@{ns}form input[type="tel"],
.@{ns}form input[type="color"],
.@{ns}form-field {
  display: block;
  width: 100%;
  padding: @input-padding;
  font-size: @form-font-size;
  line-height: @form-line-height;
  color: @input-color;
  vertical-align: middle;
  background-color: @input-bg;
  background-image: none;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  -webkit-appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  .hook-form;

  // `:focus` state
  &:focus {
    outline: 0;
  }
  .form-field-focus(@input-border-focus);

  &::placeholder {
    color: @input-color-placeholder;
  }

  &::-moz-placeholder {
    opacity: 1;
  }

  // Disabled and read-only inputs
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    cursor: not-allowed;
    background-color: @input-bg-disabled;

    .hook-form-disabled;
  }

  &.@{ns}radius {
    border-radius: @radius-normal;
  }

  &.@{ns}round {
    border-radius: @global-rounded;
  }
}

.@{ns}form {
  // Reset height for block field
  textarea,
  select[multiple],
  select[size] {
    height: auto;
  }

  select {
    // via Foundation
    -webkit-appearance: none !important;
    -moz-appearance: none !important; // since Firefox 31 ?
    -webkit-border-radius: @global-radius;
    background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+') no-repeat 100% center;

    &[multiple="multiple"] {
      background-image: none;
    }
  }
}

// #868
// fixes datetime input height on old webkit browsers
// @see http://stackoverflow.com/questions/18967852/input-type-date-in-ios-7
input[type="datetime-local"],
input[type="date"] {
  .datetime-height(@font-size) {
    @rem-height: @font-size * (unit(@input-padding) * 2 + @form-line-height);
    height: floor(unit(@rem-height) * 10 + 2) * 1px;
  }

  .@{ns}form &,
  &.@{ns}form-field {
    .datetime-height(@form-font-size);

    &.@{ns}input-sm {
      .datetime-height(@form-font-size-sm);
    }

    .@{ns}input-lg {
      .datetime-height(@form-font-size-lg);
    }
  }
}


/* help text */

.@{ns}form-help {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: @gray-light;
  font-size: 1.3rem;
}

/* form group */

.@{ns}form-group {
  margin-bottom: 1.5rem;
}

/* file field */

.@{ns}form-file {
  position: relative;
  overflow: hidden;

  input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 50rem;
  }
}

/**
 * Checkboxes and radios
 * Indent the labels to position radios/checkboxes as hanging controls.
*/

.@{ns}radio,
.@{ns}checkbox {
  display: block;
  min-height: @form-font-size * @form-line-height;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  vertical-align: middle;
  label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
}

.@{ns}radio input[type="radio"],
.@{ns}radio-inline input[type="radio"],
.@{ns}checkbox input[type="checkbox"],
.@{ns}checkbox-inline input[type="checkbox"] {
  float: left;
  margin-left: -20px;
  outline: none;
}

.@{ns}radio + .@{ns}radio,
.@{ns}checkbox + .@{ns}checkbox {
  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

/* Radios and checkboxes inline */

.@{ns}radio-inline,
.@{ns}checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}

.@{ns}radio-inline + .@{ns}radio-inline,
.@{ns}checkbox-inline + .@{ns}checkbox-inline {
  margin-top: 0;
  margin-left: 10px; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"],
.@{ns}radio,
.@{ns}radio-inline,
.@{ns}checkbox,
.@{ns}checkbox-inline {
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    .hook-form-disabled;
  }
}

/* Form field feedback states */

// Warning
.@{ns}form-warning {
  .form-field-validation(@state-warning-text; @state-warning-text);
  .@{ns}form-field {
    .form-field-validation-filed(@state-warning-text; @state-warning-text);
  }
  .hook-form-warning;
}

// Error
.@{ns}form-error {
  .form-field-validation(@state-danger-text; @state-danger-text);
  .hook-form-error;
}

.@{ns}form-error .@{ns}form-field,
.@{ns}field-error {
  .form-field-validation-filed(@state-danger-text; @state-danger-text);
}

// Success
.@{ns}form-success {
  .form-field-validation(@state-success-text; @state-success-text);
  .hook-form-success;
}

.@{ns}form-success .@{ns}form-field,
.@{ns}field-valid {
  .form-field-validation-filed(@state-success-text; @state-success-text);
}

/* Horizontal forms */

.@{ns}form-horizontal {
  .@{ns}form-label,
  .@{ns}radio,
  .@{ns}checkbox,
  .@{ns}radio-inline,
  .@{ns}checkbox-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.6em;
  }

  .@{ns}form-group {
    .clearfix();
  }

  @media @medium-up {
    .@{ns}form-label {
      text-align: right;
    }
  }

  .hook-form-horizontal;
}

/* Inline form elements */

.@{ns}form-inline {
  @media @medium-up {
    .@{ns}form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    .@{ns}form-field {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }

    .@{ns}input-group {
      display: inline-table;
      vertical-align: middle;

      .@{ns}input-group-label,
      .@{ns}input-group-btn,
      .@{ns}form-label {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .@{ns}input-group > .@{ns}form-field {
      width: 100%;
    }

    .@{ns}form-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match (which also avoids
    .@{ns}radio,
    .@{ns}checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 0;
      vertical-align: middle;
    }

    .@{ns}radio input[type="radio"],
    .@{ns}checkbox input[type="checkbox"] {
      float: none;
      margin-left: 0;
    }
  }

  .hook-form-inline;
}


/* Form field size */

.@{ns}input-sm {
  font-size: @form-font-size-sm !important;
}

.@{ns}input-lg {
  font-size: @form-font-size-lg !important;
}

.@{ns}form-group-sm {
  .@{ns}checkbox,
  .@{ns}radio,
  .@{ns}form-label,
  .@{ns}form-field {
    font-size: @form-font-size-sm !important;
  }
}

.@{ns}form-group-lg {
  .@{ns}checkbox,
  .@{ns}radio,
  .@{ns}form-label,
  .@{ns}form-field {
    font-size: @form-font-size-lg !important;
  }

  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 7px;
  }
}

/* Form field feedback states */

.@{ns}form-icon {
  position: relative;

  .@{ns}form-field {
    padding-left: @input-padding + 1.25 !important;
  }

  // form-group without label
  [class*='@{ns}icon-'] {
    position: absolute;
    left: @input-padding;
    top: 50%;
    display: block;
    margin-top: -@input-padding;
    line-height: 1;
    z-index: 2;
  }

  // form-group with label
  label ~ [class*='@{ns}icon-'] {
    top: 70%;
  }

  .hook-form-icon;
}


/* Feedback Icon */

.@{ns}form-feedback {
  position: relative;

  .@{ns}form-field {
    padding-left: @input-padding !important;
    padding-right: @input-padding + 1.25 !important;
  }

  [class*='@{ns}icon-'] {
    right: @input-padding;
    left: auto;

    // with label & horizontal mode
    .@{ns}form-horizontal & {
      right: @input-padding + 1.1;
    }
  }

  .hook-form-feedback;
}


/* Form set */

.@{ns}form-set {
  margin-bottom: 1.5rem;
  padding: 0;
  > input {
    position: relative;
    top: -1px;
    border-radius: 0 !important;
    &:focus {
      z-index: 2;
    }

    &:first-child {
      top: 1px;
      .border-top-radius(~"@{input-border-radius} !important");
    }

    &:last-child {
      top: -2px;
      .border-bottom-radius(~"@{input-border-radius} !important");
    }
  }
  .hook-form-set;
}


// Hooks
// =============================================================================

.hook-form() {}
.hook-form-disabled() {}
.hook-form-horizontal() {}
.hook-form-inline() {}
.hook-form-icon() {}
.hook-form-feedback() {}
.hook-form-set() {}
.hook-form-error() {}
.hook-form-warning() {}
.hook-form-success() {}