/
_fields.scss
79 lines (71 loc) · 2.33 KB
/
_fields.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// @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
// * All form inputs must have a corresponding label, linked to the input
// * The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context
// * For text inputs that are optional, add "(optional)" to the input label
// * Add `aria-required` to any input field that must to be filled in
// * See our best practices for [writing form labels](../language/microcopy.html#Form text, form labels)
//
// @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;
}
}