Sha256: 70cf10d76f0765e99256237d3fbd7c56ab7c96d185843428552c2e9870eab8d6
Contents?: true
Size: 1.99 KB
Versions: 8
Compression:
Stored size: 1.99 KB
Contents
// @page Pattern Library/Forms
// @name Fields
//
// @description
// This is the basic form field, `.us-field` wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with `.us-faux-label`
//
// #### Best practices
// * For text inputs that are optional, add "(optional)" to the `placeholder` attribute for the input. Not highlighting required fields makes the form look less intimidating.
//
// @state .us-field--blocked - Blocked label styling.
// @state .us-field--inline - Inline label styling.
//
// @markup
// <div class="us-field {$modifiers}">
// <label for="name">Name</label>
// <input class="us-form-input" id="name" name="name" placeholder="Please enter your name">
// </div>
$default-label-color: $c-typegrey !default;
$default-label-size: 18px !default;
$default-label-width: em(120px, $default-label-size) !default;
$default-label-margin: .25em !default;
$label-inline-breakpoint: tablet !default;
%base-block-label {
display: block;
margin-bottom: $default-label-margin;
}
.us-field {
@extend %clearfix;
margin-bottom: 1em;
> label,
> .us-faux-label {
@include heading-font;
margin-right: 1em;
font-size: em($default-label-size);
color: $default-label-color;
}
}
.us-field-blocked,
.us-field--blocked {
> label,
> .us-faux-label {
@extend %base-block-label;
}
}
// This is an inline field, for quick, easy to read forms
.us-field--inline {
> label,
> .us-faux-label {
@extend %base-block-label;
@include respond-to($label-inline-breakpoint, true) {
display: inline-block;
min-width: $default-label-width;
vertical-align: middle;
}
}
}
// The toggle field is for radios and checkboxes. It sits within the .us-field to allow
// styling for labels of radio/checkboxes
.us-field-toggle {
label {
@include normal-font;
padding: .35em .5em;
font-weight: normal;
line-height: 1.5em;
cursor: pointer;
}
}
Version data entries
8 entries across 8 versions & 1 rubygems