Sha256: c1a7f5e15afbbf7d0bd10134ec79669e9f18fe26b4102eb4b50f6003c5dcd756
Contents?: true
Size: 1.99 KB
Versions: 12
Compression:
Stored size: 1.99 KB
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%));
}
@if $media-query-legacy-support {
.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
12 entries across 12 versions & 1 rubygems