@newjersey/njwds 2.0.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/css/button.css +1 -1
- package/dist/css/button.css.map +1 -1
- package/dist/css/icon.css +3 -0
- package/dist/css/icon.css.map +1 -0
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/package.json +1 -1
- package/src/components/07-form/controls/error-states.config.yml +2 -0
- package/src/components/07-form/controls/error-states.njk +385 -0
- package/src/sass/_uswds-theme-custom-styles.scss +28 -0
- package/src/sass/icon.scss +72 -0
package/package.json
CHANGED
|
@@ -0,0 +1,385 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
{# text input #}
|
|
3
|
+
<div class="usa-form-group usa-form-group--error">
|
|
4
|
+
<label class="usa-label usa-label--error" for="input-error">
|
|
5
|
+
Text input label
|
|
6
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
7
|
+
</label>
|
|
8
|
+
<span id="with-hint-input-hint" class="usa-hint"> Helper text </span>
|
|
9
|
+
|
|
10
|
+
<div class="usa-character-count">
|
|
11
|
+
<input
|
|
12
|
+
required
|
|
13
|
+
class="usa-input usa-input--error usa-character-count__field"
|
|
14
|
+
id="input-error"
|
|
15
|
+
maxlength="25"
|
|
16
|
+
name="input-error"
|
|
17
|
+
type="text"
|
|
18
|
+
aria-describedby="with-hint-input-hint input-error-message"
|
|
19
|
+
/>
|
|
20
|
+
<span id="with-hint-input-info" class="usa-character-count__message">
|
|
21
|
+
You can enter up to 25 characters
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="nj-error-message-container">
|
|
25
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
26
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
27
|
+
</svg>
|
|
28
|
+
<span class="usa-error-message" id="input-error-message" role="alert"
|
|
29
|
+
>Helpful error message</span
|
|
30
|
+
>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
{# text area #}
|
|
35
|
+
<div class="usa-form-group usa-form-group--error">
|
|
36
|
+
<label class="usa-label usa-label--error" for="area-error">
|
|
37
|
+
Text area label
|
|
38
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
39
|
+
</label>
|
|
40
|
+
<span id="with-hint-area-hint" class="usa-hint"> Helper text </span>
|
|
41
|
+
|
|
42
|
+
<div class="usa-character-count">
|
|
43
|
+
<textarea
|
|
44
|
+
required
|
|
45
|
+
class="usa-textarea usa-input--error usa-character-count__field"
|
|
46
|
+
id="area-error"
|
|
47
|
+
maxlength="25"
|
|
48
|
+
name="area-error"
|
|
49
|
+
type="text"
|
|
50
|
+
aria-describedby="with-hint-area-hint area-error-message"
|
|
51
|
+
></textarea>
|
|
52
|
+
<span id="with-hint-area-info" class="usa-character-count__message">
|
|
53
|
+
You can enter up to 25 characters
|
|
54
|
+
</span>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="nj-error-message-container">
|
|
57
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
58
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
59
|
+
</svg>
|
|
60
|
+
<span class="usa-error-message" id="area-error-message" role="alert"
|
|
61
|
+
>Helpful error message</span
|
|
62
|
+
>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
{# dropdown select #}
|
|
67
|
+
<div class="usa-form-group usa-form-group--error">
|
|
68
|
+
<label class="usa-label usa-label--error" for="options"
|
|
69
|
+
>Dropdown label
|
|
70
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
71
|
+
</label>
|
|
72
|
+
<span id="with-hint-options-hint" class="usa-hint"> Helper text </span>
|
|
73
|
+
<select
|
|
74
|
+
class="usa-select usa-input--error"
|
|
75
|
+
name="options"
|
|
76
|
+
id="options"
|
|
77
|
+
aria-describedby="with-hint-options-hint options-error-message"
|
|
78
|
+
>
|
|
79
|
+
<option value>- Select -</option>
|
|
80
|
+
<option value="value1">Option A</option>
|
|
81
|
+
<option value="value2">Option B</option>
|
|
82
|
+
<option value="value3">Option C</option>
|
|
83
|
+
</select>
|
|
84
|
+
<div class="nj-error-message-container">
|
|
85
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
86
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
87
|
+
</svg>
|
|
88
|
+
<span class="usa-error-message" id="options-error-message" role="alert"
|
|
89
|
+
>Helpful error message</span
|
|
90
|
+
>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
{# date picker #}
|
|
95
|
+
<div class="usa-form-group usa-form-group--error">
|
|
96
|
+
<label
|
|
97
|
+
class="usa-label usa-label--error"
|
|
98
|
+
id="appointment-date-label"
|
|
99
|
+
for="appointment-date"
|
|
100
|
+
>Appointment date
|
|
101
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
102
|
+
</label>
|
|
103
|
+
<div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
|
|
104
|
+
<div class="usa-date-picker">
|
|
105
|
+
<input
|
|
106
|
+
class="usa-input usa-input--error"
|
|
107
|
+
id="appointment-date"
|
|
108
|
+
name="appointment-date"
|
|
109
|
+
aria-labelledby="appointment-date-label"
|
|
110
|
+
aria-describedby="appointment-date-hint date-error-message"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="nj-error-message-container">
|
|
114
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
115
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
116
|
+
</svg>
|
|
117
|
+
<span class="usa-error-message" id="date-error-message" role="alert"
|
|
118
|
+
>Helpful error message</span
|
|
119
|
+
>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
{# memorable date #}
|
|
124
|
+
<div class="usa-form-group usa-form-group--error">
|
|
125
|
+
<fieldset
|
|
126
|
+
class="usa-fieldset"
|
|
127
|
+
aria-describedby="memorable-date-error-message"
|
|
128
|
+
>
|
|
129
|
+
<legend class="usa-legend usa-label--error">
|
|
130
|
+
Date of birth
|
|
131
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
132
|
+
</legend>
|
|
133
|
+
<span class="usa-hint" id="mdHint">For example: January 19 2000</span>
|
|
134
|
+
<div class="usa-memorable-date">
|
|
135
|
+
<div
|
|
136
|
+
class="usa-form-group usa-form-group--month usa-form-group--select"
|
|
137
|
+
>
|
|
138
|
+
<label class="usa-label usa-label--error" for="date_of_birth_month"
|
|
139
|
+
>Month</label
|
|
140
|
+
>
|
|
141
|
+
<select
|
|
142
|
+
class="usa-select usa-input--error"
|
|
143
|
+
id="date_of_birth_month"
|
|
144
|
+
name="date_of_birth_month"
|
|
145
|
+
aria-describedby="mdHint"
|
|
146
|
+
>
|
|
147
|
+
<option value>- Select -</option>
|
|
148
|
+
<option value="1">January</option>
|
|
149
|
+
<option value="2">February</option>
|
|
150
|
+
<option value="3">March</option>
|
|
151
|
+
<option value="4">April</option>
|
|
152
|
+
<option value="5">May</option>
|
|
153
|
+
<option value="6">June</option>
|
|
154
|
+
<option value="7">July</option>
|
|
155
|
+
<option value="8">August</option>
|
|
156
|
+
<option value="9">September</option>
|
|
157
|
+
<option value="10">October</option>
|
|
158
|
+
<option value="11">November</option>
|
|
159
|
+
<option value="12">December</option>
|
|
160
|
+
</select>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="usa-form-group usa-form-group--day">
|
|
163
|
+
<label class="usa-label usa-label--error" for="date_of_birth_day"
|
|
164
|
+
>Day</label
|
|
165
|
+
>
|
|
166
|
+
<input
|
|
167
|
+
class="usa-input usa-input--error"
|
|
168
|
+
aria-describedby="mdHint"
|
|
169
|
+
id="date_of_birth_day"
|
|
170
|
+
name="date_of_birth_day"
|
|
171
|
+
maxlength="2"
|
|
172
|
+
pattern="[0-9]*"
|
|
173
|
+
inputmode="numeric"
|
|
174
|
+
value=""
|
|
175
|
+
/>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="usa-form-group usa-form-group--year">
|
|
178
|
+
<label class="usa-label usa-label--error" for="date_of_birth_year"
|
|
179
|
+
>Year</label
|
|
180
|
+
>
|
|
181
|
+
<input
|
|
182
|
+
class="usa-input usa-input--error"
|
|
183
|
+
aria-describedby="mdHint"
|
|
184
|
+
id="date_of_birth_year"
|
|
185
|
+
name="date_of_birth_year"
|
|
186
|
+
minlength="4"
|
|
187
|
+
maxlength="4"
|
|
188
|
+
pattern="[0-9]*"
|
|
189
|
+
inputmode="numeric"
|
|
190
|
+
value=""
|
|
191
|
+
/>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</fieldset>
|
|
195
|
+
<div class="nj-error-message-container">
|
|
196
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
197
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
198
|
+
</svg>
|
|
199
|
+
<span
|
|
200
|
+
class="usa-error-message"
|
|
201
|
+
id="memorable-date-error-message"
|
|
202
|
+
role="alert"
|
|
203
|
+
>Helpful error message</span
|
|
204
|
+
>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
{# checkboxes #}
|
|
209
|
+
<div class="usa-form-group usa-form-group--error">
|
|
210
|
+
<fieldset
|
|
211
|
+
class="usa-fieldset"
|
|
212
|
+
aria-describedby="checkboxes-hint checkboxes-error-message"
|
|
213
|
+
>
|
|
214
|
+
<legend class="usa-legend usa-label--error">
|
|
215
|
+
Select any historical figure
|
|
216
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
217
|
+
</legend>
|
|
218
|
+
<span class="usa-hint" id="checkboxes-hint">Helper text</span>
|
|
219
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
220
|
+
<input
|
|
221
|
+
class="usa-checkbox__input"
|
|
222
|
+
id="check-historical-truth"
|
|
223
|
+
type="checkbox"
|
|
224
|
+
name="historical-figures"
|
|
225
|
+
value="sojourner-truth"
|
|
226
|
+
checked="checked"
|
|
227
|
+
/>
|
|
228
|
+
<label class="usa-checkbox__label" for="check-historical-truth"
|
|
229
|
+
>Sojourner Truth</label
|
|
230
|
+
>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
233
|
+
<input
|
|
234
|
+
class="usa-checkbox__input"
|
|
235
|
+
id="check-historical-douglass"
|
|
236
|
+
type="checkbox"
|
|
237
|
+
name="historical-figures"
|
|
238
|
+
value="frederick-douglass"
|
|
239
|
+
/>
|
|
240
|
+
<label class="usa-checkbox__label" for="check-historical-douglass"
|
|
241
|
+
>Frederick Douglass</label
|
|
242
|
+
>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
245
|
+
<input
|
|
246
|
+
class="usa-checkbox__input"
|
|
247
|
+
id="check-historical-washington"
|
|
248
|
+
type="checkbox"
|
|
249
|
+
name="historical-figures"
|
|
250
|
+
value="booker-t-washington"
|
|
251
|
+
/>
|
|
252
|
+
<label class="usa-checkbox__label" for="check-historical-washington"
|
|
253
|
+
>Booker T. Washington</label
|
|
254
|
+
>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
257
|
+
<input
|
|
258
|
+
class="usa-checkbox__input"
|
|
259
|
+
id="check-historical-carver"
|
|
260
|
+
type="checkbox"
|
|
261
|
+
name="historical-figures"
|
|
262
|
+
value="george-washington-carver"
|
|
263
|
+
/>
|
|
264
|
+
<label class="usa-checkbox__label" for="check-historical-carver"
|
|
265
|
+
>George Washington Carver</label
|
|
266
|
+
>
|
|
267
|
+
</div>
|
|
268
|
+
</fieldset>
|
|
269
|
+
<div class="nj-error-message-container">
|
|
270
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
271
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
272
|
+
</svg>
|
|
273
|
+
<span class="usa-error-message" id="checkboxes-error-message" role="alert"
|
|
274
|
+
>Helpful error message</span
|
|
275
|
+
>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
{# checkbox tile list #}
|
|
280
|
+
<div class="usa-form-group usa-form-group--error">
|
|
281
|
+
<fieldset class="usa-fieldset" aria-describedby="checkboxes-hint--tile checkboxes-error-message--tile">
|
|
282
|
+
<legend class="usa-legend usa-label--error">
|
|
283
|
+
Select any historical figure
|
|
284
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
285
|
+
</legend>
|
|
286
|
+
<span class="usa-hint" id="checkboxes-hint--tile">Helper text</span>
|
|
287
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
288
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2--tile" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
|
|
289
|
+
<label class="usa-checkbox__label" for="check-historical-truth-2--tile">
|
|
290
|
+
Sojourner Truth
|
|
291
|
+
</label>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
294
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2--tile" type="checkbox" name="historical-figures-2" value="frederick-douglass">
|
|
295
|
+
<label class="usa-checkbox__label" for="check-historical-douglass-2--tile">Frederick Douglass</label>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
298
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2--tile" type="checkbox" name="historical-figures-2" value="booker-t-washington">
|
|
299
|
+
<label class="usa-checkbox__label" for="check-historical-washington-2--tile">Booker T. Washington</label>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
302
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2--tile" type="checkbox" name="historical-figures-2" value="george-washington-carver">
|
|
303
|
+
<label class="usa-checkbox__label" for="check-historical-carver-2--tile">George Washington Carver</label>
|
|
304
|
+
</div>
|
|
305
|
+
</fieldset>
|
|
306
|
+
<div class="nj-error-message-container">
|
|
307
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
308
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
309
|
+
</svg>
|
|
310
|
+
<span class="usa-error-message" id="checkboxes-error-message--tile" role="alert">
|
|
311
|
+
Helpful error message
|
|
312
|
+
</span>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
|
|
316
|
+
{# radio buttons #}
|
|
317
|
+
<div class="usa-form-group usa-form-group--error">
|
|
318
|
+
<fieldset class="usa-fieldset" aria-describedby="radio-hint radio-error-message">
|
|
319
|
+
<legend class="usa-legend usa-label--error">
|
|
320
|
+
Select one historical figure
|
|
321
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
322
|
+
</legend>
|
|
323
|
+
<span class="usa-hint" id="radio-hint">Helper text</span>
|
|
324
|
+
<div class="usa-radio nj-radio--error">
|
|
325
|
+
<input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth" checked>
|
|
326
|
+
<label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="usa-radio nj-radio--error">
|
|
329
|
+
<input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
|
|
330
|
+
<label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
|
|
331
|
+
</div>
|
|
332
|
+
<div class="usa-radio nj-radio--error">
|
|
333
|
+
<input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
|
|
334
|
+
<label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="usa-radio nj-radio--error">
|
|
337
|
+
<input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver">
|
|
338
|
+
<label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
|
|
339
|
+
</div>
|
|
340
|
+
</fieldset>
|
|
341
|
+
<div class="nj-error-message-container">
|
|
342
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
343
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
344
|
+
</svg>
|
|
345
|
+
<span class="usa-error-message" id="radio-error-message" role="alert">
|
|
346
|
+
Helpful error message
|
|
347
|
+
</span>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
{# radio tile list #}
|
|
352
|
+
<div class="usa-form-group usa-form-group--error">
|
|
353
|
+
<fieldset class="usa-fieldset" aria-describedby="radio-hint--tile radio-error-message--tile">
|
|
354
|
+
<legend class="usa-legend usa-label--error">
|
|
355
|
+
Select one historical figure
|
|
356
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
357
|
+
</legend>
|
|
358
|
+
<span class="usa-hint" id="radio-hint--tile">Helper text</span>
|
|
359
|
+
<div class="usa-radio nj-radio--error">
|
|
360
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-truth--tile" type="radio" name="historical-figures" value="sojourner-truth" checked>
|
|
361
|
+
<label class="usa-radio__label" for="historical-truth--tile">Sojourner Truth</label>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="usa-radio nj-radio--error">
|
|
364
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-douglass--tile" type="radio" name="historical-figures" value="frederick-douglass">
|
|
365
|
+
<label class="usa-radio__label" for="historical-douglass--tile">Frederick Douglass</label>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="usa-radio nj-radio--error">
|
|
368
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-washington--tile" type="radio" name="historical-figures" value="booker-t-washington">
|
|
369
|
+
<label class="usa-radio__label" for="historical-washington--tile">Booker T. Washington</label>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="usa-radio nj-radio--error">
|
|
372
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-carver--tile" type="radio" name="historical-figures" value="george-washington-carver">
|
|
373
|
+
<label class="usa-radio__label" for="historical-carver--tile">George Washington Carver</label>
|
|
374
|
+
</div>
|
|
375
|
+
</fieldset>
|
|
376
|
+
<div class="nj-error-message-container">
|
|
377
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
378
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
379
|
+
</svg>
|
|
380
|
+
<span class="usa-error-message" id="radio-error-message--tile" role="alert">
|
|
381
|
+
Helpful error message
|
|
382
|
+
</span>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
</form>
|
|
@@ -290,3 +290,31 @@ i.e.
|
|
|
290
290
|
.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before {
|
|
291
291
|
box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #cfe8ff;
|
|
292
292
|
}
|
|
293
|
+
|
|
294
|
+
.nj-error-message-container {
|
|
295
|
+
margin-top: units(1.5);
|
|
296
|
+
display: flex;
|
|
297
|
+
align-items: flex-start;
|
|
298
|
+
color: color($theme-color-error-dark);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.nj-error-message-container > svg {
|
|
302
|
+
flex-shrink: 0;
|
|
303
|
+
margin-right: units(1);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.usa-error-message {
|
|
307
|
+
padding: units(0);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.usa-form-group--error {
|
|
311
|
+
padding-left: units(2.5);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.nj-checkbox--error > .usa-checkbox__label::before {
|
|
315
|
+
box-shadow: 0 0 0 2px color($theme-color-error-dark);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.nj-radio--error > .usa-radio__label::before {
|
|
319
|
+
box-shadow: 0 0 0 2px color($theme-color-error-dark);
|
|
320
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* * * * * ==============================
|
|
3
|
+
* * * * * ==============================
|
|
4
|
+
* * * * * ==============================
|
|
5
|
+
* * * * * ==============================
|
|
6
|
+
========================================
|
|
7
|
+
========================================
|
|
8
|
+
========================================
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
// -------------------------------------
|
|
12
|
+
// Import individual theme settings
|
|
13
|
+
@forward "uswds-theme";
|
|
14
|
+
|
|
15
|
+
// -------------------------------------
|
|
16
|
+
// Import individual USWDS packages...
|
|
17
|
+
// See https://designsystem.digital.gov/components/
|
|
18
|
+
|
|
19
|
+
// First import required and global packages...
|
|
20
|
+
// @forward "packages/required";
|
|
21
|
+
// @forward "packages/global";
|
|
22
|
+
@forward "packages/uswds-global";
|
|
23
|
+
// @forward "packages/uswds-utilities";
|
|
24
|
+
// @forward "packages/uswds-helpers";
|
|
25
|
+
|
|
26
|
+
// Then import individual component packages...
|
|
27
|
+
@forward "packages/usa-icon";
|
|
28
|
+
// @forward 'packages/form-controls';
|
|
29
|
+
// @forward 'packages/form-templates';
|
|
30
|
+
// @forward 'packages/layout-grid';
|
|
31
|
+
// @forward 'packages/typography';
|
|
32
|
+
// @forward 'packages/validation';
|
|
33
|
+
// @forward 'packages/usa-accordion';
|
|
34
|
+
// @forward 'packages/usa-alert';
|
|
35
|
+
// @forward 'packages/usa-identifier';
|
|
36
|
+
// @forward 'packages/usa-banner';
|
|
37
|
+
// @forward 'packages/usa-breadcrumb';
|
|
38
|
+
// @forward "packages/usa-button";
|
|
39
|
+
// @forward 'packages/usa-button-group';
|
|
40
|
+
// @forward 'packages/usa-card';
|
|
41
|
+
// @forward 'packages/usa-checklist';
|
|
42
|
+
// @forward 'packages/usa-footer';
|
|
43
|
+
// @forward 'packages/usa-header';
|
|
44
|
+
// @forward 'packages/usa-hero';
|
|
45
|
+
// @forward 'packages/usa-identifier';
|
|
46
|
+
// @forward 'packages/usa-layout';
|
|
47
|
+
// @forward 'packages/usa-media-block';
|
|
48
|
+
// @forward 'packages/usa-megamenu';
|
|
49
|
+
// @forward 'packages/usa-nav-container';
|
|
50
|
+
// @forward 'packages/usa-nav';
|
|
51
|
+
// @forward 'packages/usa-navbar';
|
|
52
|
+
// @forward 'packages/usa-search';
|
|
53
|
+
// @forward 'packages/usa-section';
|
|
54
|
+
// @forward 'packages/usa-sidenav';
|
|
55
|
+
// @forward 'packages/usa-skipnav';
|
|
56
|
+
// @forward 'packages/usa-step-indicator';
|
|
57
|
+
// @forward 'packages/usa-table';
|
|
58
|
+
// @forward 'packages/usa-tag';
|
|
59
|
+
|
|
60
|
+
// or package sets...
|
|
61
|
+
// @forward 'packages/uswds-components';
|
|
62
|
+
// @forward 'packages/uswds-utilities';
|
|
63
|
+
|
|
64
|
+
// -------------------------------------
|
|
65
|
+
// ...or import the complete USWDS kit
|
|
66
|
+
|
|
67
|
+
// @forward "uswds";
|
|
68
|
+
|
|
69
|
+
// -------------------------------------
|
|
70
|
+
// Import theme custom styles
|
|
71
|
+
|
|
72
|
+
@forward "uswds-theme-custom-styles";
|