_forms.scss

/* ============================================================================
   @CORE -> BASE -> FORMS
   ========================================================================= */


/**
 * Settings.
 */

/**
 * Toggle on/off certain styles and treatments.
 */

// Turn styling on for inputs and `select`s
$apply-text-input-and-select-styles:                    true !default;

$apply-text-input-and-select-border:                    true !default;

$apply-text-input-and-select-rounded-corners:           false !default;

$apply-text-input-and-select-disabled-state:            true !default;

$apply-text-input-full-bleed:                           true !default;

$apply-text-input-placeholder-color:                    true !default;

// Remove the top inner shadow from iOS inputs
$apply-top-inner-shadow-for-ios-inputs:                 false !default;

// Remove the close button generated by IE 10+ for `input[type="search"]`
$apply-close-button-for-ie10plus-inputs:                false !default;

/**
 * Text inputs and `select`s styles.
 */

$text-input-and-select-text-color:                      $color-text-base !default;

$text-input-and-select-background-color:                $color-white !default;

$text-input-and-select-rounded-corners-size:            $border-radius !default;

$text-input-and-select-padding:                         $spacing-quarter !default;

$text-input-and-select-border-thickness:                1 !default;

$text-input-and-select-border-style:                    solid !default;

$text-input-and-select-border-color:                    lighten($color-black, 30%) !default;

$text-input-and-select-disabled-state-opacity-strength: 0.6 !default;

/**
 * The name of the class to target iOS so the top inner shadow from iOS inputs
 * can be removed.
 */

$remove-top-inner-shadow-from-ios-inputs-class:         ios !default;

/**
 * Box sizing.
 *
 * Here we set a variable assuming that `box-sizing: border-box;` is not set
 * globally. If it has been previously been defined, the following variable
 * will be overridden and will be set to `true`.
 */

$apply-friendly-box-model:                             false !default;


/**
 * Indicate that `label` will shift focus to the associated `input` element.
 */

label,
.faux-label {
  cursor: pointer;
}


/**
 * Disable `textarea`s from being resized horizontally.
 */

textarea {
  resize: vertical;
}


/**
 * Override `content-box` from normalize.css for search inputs.
 */

@if $apply-friendly-box-model {
  input[type="search"] {
    box-sizing: border-box;
  }
}


/**
 * Remove rounded corners from iOS search inputs by overriding
 * `appearance: textfield` from normalize.css.
 * See: https://github.com/necolas/normalize.css/issues/360.
 */

input[type="search"] {
  appearance: none;
}


/**
 * Remove rounded corners that iOS applies to all `input` buttons, see:
 * https://github.com/necolas/normalize.css/issues/178. And certain browsers
 * e.g. Chrome, apply rounded corners to `select` lists so if we haven't opted
 * in for rounded corners via the `$apply-text-input-and-select-styles` and
 * `$apply-text-input-and-select-rounded-corners` settings then turn them off.
 */

input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
select {
  border-radius: 0;
}


/**
 * Fix for IE and old versions of some other browsers not wrapping text within
 * a `legend`.
 *
 * 1. Enable line-wrapping in IE8+.
 * 2. Enable line-wrapping in old versions of some other browsers.
 *
 * @credit
 * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/
 */

legend {
  display: table; // [1]
  white-space: normal; // [2]
}


/**
 * Set whitespace for `legend`s via a class, we use `padding` over `margin` as
 * `padding` is the most cross-browser compatible for `legend`s.
 */

.form-heading {
  @include to-rem(padding-bottom, $spacing-base);
}


/**
 * Disabled state.
 *
 * N.B. it is okay to use `!important` here as we're doing it preemptively
 * i.e. you know you will always want the rule it's applied too to take
 * precedence.
 */

@if $apply-text-input-and-select-disabled-state {
  button[disabled],
  input[disabled],
  select[disabled],
  textarea[disabled],
  .is-disabled {
    cursor: not-allowed !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: $text-input-and-select-disabled-state-opacity-strength !important;
  }

  // Modifier: no hover; prevent common hover/focus states being applied
  .is-disabled--no-hover {
    cursor: inherit !important;
    color: inherit !important;
    background: inherit !important;
    text-decoration: none !important;
  }
}


/**
 * Required field indicator (asterisk).
 */

.required-field {
  color: $color-state-error;
  cursor: help;
}


/**
 * Text inputs via the `.text-input` class, `textarea`s, and `select` lists.
 */

@if $apply-text-input-and-select-styles {
  .text-input,
  textarea,
  select {
    @include to-rem(padding, $text-input-and-select-padding);
    color: $text-input-and-select-text-color;
    background: $text-input-and-select-background-color;

    // Apply a border but make it optional
    @if $apply-text-input-and-select-border {
      border: strip-unit($text-input-and-select-border-thickness) * 1px
              $text-input-and-select-border-style
              $text-input-and-select-border-color;
    }
    @else {
      border: 0;
    }

    // Apply rounded corners but make it optional
    @if $apply-text-input-and-select-rounded-corners {
      border-radius: strip-unit($text-input-and-select-rounded-corners-size) * 1px;
    }

    // Make 100% wide but make it optional
    @if $apply-text-input-full-bleed {
      width: 100%;

      // Need to apply `box-sizing: border-box` if it hasn't been set globally
      @if $apply-friendly-box-model == false {
        box-sizing: border-box;
      }
    }
  }
}


/**
 * Text input placeholder colour which uses the
 * `text-input-placeholder-color()` mixin.
 */

@if $apply-text-input-placeholder-color {
  @include text-input-placeholder-color();
}


/**
 * Remove the top inner shadow from iOS inputs.
 *
 * N.B. this needs to be isolated to iOS devices so user-agent sniffing needs
 * to happen and the most robust implementation of this is to apply the hook
 * to the `html` element e.g. `.ios`.
 */

@if $apply-top-inner-shadow-for-ios-inputs {
  .#{$remove-top-inner-shadow-from-ios-inputs-class} {
    .remove-top-inner-shadow-from-ios-inputs,
    .text-input,
    textarea {
      -webkit-appearance: caret;
    }
  }
}


/**
 * Hide the close button generated by IE 10+ for inputs.
 */

@if $apply-close-button-for-ie10plus-inputs {
  .hide-close-button-for-ie-inputs::-ms-clear,
  .text-input::-ms-clear {
    display: none;
  }
}