Contents

// @page Pattern Library/Forms
// @name Inputs
//
// @description
//   Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.
//
//   #### Best practices
//   * Specifying an appropriate [type attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type) (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
//   * Where appropriate use the [autocomplete attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete) to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
//
// @state .us-form-input--large - Larger input style
// @state .us-form-input--blocked - Fluid input style
// @state .us-form-input--error - Visual feedback for when the input has an error
// @state .us-form-input--success - Visual feedback for when success needs to be communicated to the user
// @state .us-form-input--disabled - Inactive state for form inputs that can't be interacted with
//
// @markup
//   <input class="us-form-input {$modifiers}" type="text" placeholder="Placeholder">

$input-placeholder-color: $c-inputgrey !default;

.us-form-input {
  @extend %base-form-element;
  @extend %input-background--normalise;
  @include placeholder($input-placeholder-color);
  @include input-sizing();
  outline: 0;
  box-shadow: none;

  &:focus {
    @include placeholder(darken($input-placeholder-color, 15%));
  }

  .ie8 & {
    height: auto;
  }
}

.us-form-input.large,
.us-form-input--large {
  @include input-sizing(large);
}

.us-form-input--blocked {
  width: 100%;
}

.us-form-input--error {
  @extend %base-form-element--error;
}

.us-form-input--success {
  @extend %base-form-element--success;
}

.us-form-input:disabled,
.us-form-input--disabled {
  @include form-element-disabled;
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
ustyle-1.7.0	vendor/assets/stylesheets/ustyle/forms/_input.scss