@utahdts/utah-design-system-header 0.1.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.
Files changed (15) hide show
  1. package/README.md +73 -0
  2. package/dist/style.css +1 -0
  3. package/dist/utah-design-system-header.es.js +2317 -0
  4. package/dist/utah-design-system-header.umd.js +124 -0
  5. package/package.json +41 -0
  6. package/src/css/_action-items.scss +44 -0
  7. package/src/css/_badge.scss +34 -0
  8. package/src/css/_citizen-experience.scss +13 -0
  9. package/src/css/_logos.scss +64 -0
  10. package/src/css/_popup.scss +1 -0
  11. package/src/css/_utah-header-wrapper.scss +21 -0
  12. package/src/css/_vertical-menu.scss +2 -0
  13. package/src/css/build/utah-design-system-header.css +973 -0
  14. package/src/css/index.scss +7 -0
  15. package/src/css/media-queries.css +25 -0
package/src/css/build/utah-design-system-header.css ADDED
@@ -0,0 +1,973 @@
1
+ .utds-citizen-experience-wrapper {
2
+ display: flex;
3
+ justify-content: flex-end;
4
+ flex: 1;
5
+ }
6
+
7
+ .utds-action-items-wrapper {
8
+ display: flex;
9
+ gap: var(--spacing);
10
+ margin-right: var(--spacing);
11
+ }
12
+ .utds-header-action-item {
13
+ display: flex;
14
+ align-items: center;
15
+ position: relative;
16
+ }
17
+ .utds-header-action-item__icon-button.icon-button {
18
+ border: 2px solid transparent;
19
+ position: relative;
20
+ }
21
+ .utds-header-action-item__icon-button.icon-button:hover {
22
+ background: var(--hover-gray-color);
23
+ color: black;
24
+ }
25
+ .utds-header-action-item__icon-button.icon-button:hover svg {
26
+ fill: black;
27
+ }
28
+ .utds-header-action-item__icon-button--has-title .icon-button {
29
+ padding: 0 var(--spacing-s);
30
+ flex-direction: row-reverse;
31
+ }
32
+ .utds-header-action-item__icon-button svg {
33
+ width: 20px;
34
+ height: 20px;
35
+ fill: var(--gray-color);
36
+ }
37
+ .utds-header-action-item__icon-button.icon-waffle .utds-icon-before-waffle::before {
38
+ font-size: 17px;
39
+ }
40
+ .utds-header-action-item__title {
41
+ margin-left: var(--spacing-xs);
42
+ }
43
+
44
+ /*
45
+ ############ _settings-index.scss ############
46
+ CSS Class Variables
47
+ */
48
+ /*
49
+ ############ _spacing.scss ############
50
+ 8px horizontal spacing
51
+ */
52
+ .utah-design-system {
53
+ --spacing-3xs: 2px;
54
+ --spacing-2xs: 4px;
55
+ --spacing-xs: 8px;
56
+ --spacing-s: 12px;
57
+ --spacing: 16px;
58
+ --spacing-l: 24px;
59
+ --spacing-xl: 32px;
60
+ --spacing-2xl: 40px;
61
+ --spacing-3xl: 48px;
62
+ --spacing-4xl: 64px;
63
+ --spacing-5xl: 80px;
64
+ --spacing-6xl: 96px;
65
+ }
66
+
67
+ .utah-design-system .m-spacing {
68
+ margin: var(--spacing);
69
+ }
70
+ .utah-design-system .mt-spacing {
71
+ margin-top: var(--spacing);
72
+ }
73
+ .utah-design-system .mr-spacing {
74
+ margin-right: var(--spacing);
75
+ }
76
+ .utah-design-system .mb-spacing {
77
+ margin-bottom: var(--spacing);
78
+ }
79
+ .utah-design-system .ml-spacing {
80
+ margin-left: var(--spacing);
81
+ }
82
+ .utah-design-system .mx-spacing {
83
+ margin-left: var(--spacing);
84
+ margin-right: var(--spacing);
85
+ }
86
+ .utah-design-system .my-spacing {
87
+ margin-top: var(--spacing);
88
+ margin-bottom: var(--spacing);
89
+ }
90
+ .utah-design-system .m-spacing-l {
91
+ margin: var(--spacing-l);
92
+ }
93
+ .utah-design-system .mt-spacing-l {
94
+ margin-top: var(--spacing-l);
95
+ }
96
+ .utah-design-system .mr-spacing-l {
97
+ margin-right: var(--spacing-l);
98
+ }
99
+ .utah-design-system .mb-spacing-l {
100
+ margin-bottom: var(--spacing-l);
101
+ }
102
+ .utah-design-system .ml-spacing-l {
103
+ margin-left: var(--spacing-l);
104
+ }
105
+ .utah-design-system .mx-spacing-l {
106
+ margin-left: var(--spacing-l);
107
+ margin-right: var(--spacing-l);
108
+ }
109
+ .utah-design-system .my-spacing-l {
110
+ margin-top: var(--spacing-l);
111
+ margin-bottom: var(--spacing-l);
112
+ }
113
+ .utah-design-system .m-spacing-s {
114
+ margin: var(--spacing-s);
115
+ }
116
+ .utah-design-system .mt-spacing-s {
117
+ margin-top: var(--spacing-s);
118
+ }
119
+ .utah-design-system .mr-spacing-s {
120
+ margin-right: var(--spacing-s);
121
+ }
122
+ .utah-design-system .mb-spacing-s {
123
+ margin-bottom: var(--spacing-s);
124
+ }
125
+ .utah-design-system .ml-spacing-s {
126
+ margin-left: var(--spacing-s);
127
+ }
128
+ .utah-design-system .mx-spacing-s {
129
+ margin-left: var(--spacing-s);
130
+ margin-right: var(--spacing-s);
131
+ }
132
+ .utah-design-system .my-spacing-s {
133
+ margin-top: var(--spacing-s);
134
+ margin-bottom: var(--spacing-s);
135
+ }
136
+ .utah-design-system .m-spacing-xs {
137
+ margin: var(--spacing-xs);
138
+ }
139
+ .utah-design-system .mt-spacing-xs {
140
+ margin-top: var(--spacing-xs);
141
+ }
142
+ .utah-design-system .mr-spacing-xs {
143
+ margin-right: var(--spacing-xs);
144
+ }
145
+ .utah-design-system .mb-spacing-xs {
146
+ margin-bottom: var(--spacing-xs);
147
+ }
148
+ .utah-design-system .ml-spacing-xs {
149
+ margin-left: var(--spacing-xs);
150
+ }
151
+ .utah-design-system .mx-spacing-xs {
152
+ margin-left: var(--spacing-xs);
153
+ margin-right: var(--spacing-xs);
154
+ }
155
+ .utah-design-system .my-spacing-xs {
156
+ margin-top: var(--spacing-xs);
157
+ margin-bottom: var(--spacing-xs);
158
+ }
159
+ .utah-design-system .p-spacing {
160
+ padding: var(--spacing);
161
+ }
162
+ .utah-design-system .pt-spacing {
163
+ padding-top: var(--spacing);
164
+ }
165
+ .utah-design-system .pr-spacing {
166
+ padding-right: var(--spacing);
167
+ }
168
+ .utah-design-system .pb-spacing {
169
+ padding-bottom: var(--spacing);
170
+ }
171
+ .utah-design-system .pl-spacing {
172
+ padding-left: var(--spacing);
173
+ }
174
+ .utah-design-system .px-spacing {
175
+ padding-left: var(--spacing);
176
+ padding-right: var(--spacing);
177
+ }
178
+ .utah-design-system .py-spacing {
179
+ padding-top: var(--spacing);
180
+ padding-bottom: var(--spacing);
181
+ }
182
+ .utah-design-system .p-spacing-l {
183
+ padding: var(--spacing-l);
184
+ }
185
+ .utah-design-system .pt-spacing-l {
186
+ padding-top: var(--spacing-l);
187
+ }
188
+ .utah-design-system .pr-spacing-l {
189
+ padding-right: var(--spacing-l);
190
+ }
191
+ .utah-design-system .pb-spacing-l {
192
+ padding-bottom: var(--spacing-l);
193
+ }
194
+ .utah-design-system .pl-spacing-l {
195
+ padding-left: var(--spacing-l);
196
+ }
197
+ .utah-design-system .px-spacing-l {
198
+ padding-left: var(--spacing-l);
199
+ padding-right: var(--spacing-l);
200
+ }
201
+ .utah-design-system .py-spacing-l {
202
+ padding-top: var(--spacing-l);
203
+ padding-bottom: var(--spacing-l);
204
+ }
205
+ .utah-design-system .m-auto {
206
+ margin: auto;
207
+ }
208
+ .utah-design-system .mt-auto {
209
+ margin-top: auto;
210
+ }
211
+ .utah-design-system .mr-auto {
212
+ margin-right: auto;
213
+ }
214
+ .utah-design-system .mb-auto {
215
+ margin-bottom: auto;
216
+ }
217
+ .utah-design-system .ml-auto {
218
+ margin-left: auto;
219
+ }
220
+ .utah-design-system .mx-auto {
221
+ margin-left: auto;
222
+ margin-right: auto;
223
+ }
224
+ .utah-design-system .my-auto {
225
+ margin-top: auto;
226
+ margin-bottom: auto;
227
+ }
228
+
229
+ /*
230
+ ############ _font-size.scss ############
231
+ Grid variables
232
+ */
233
+ .utah-design-system {
234
+ --grid-fixed: var(--content-width);
235
+ --grid-fixed-half: calc(var(--grid-fixed) / 2);
236
+ --grid-fixed-form: calc(var(--grid-fixed) / 2.3);
237
+ --grid-fixed-third: calc(var(--grid-fixed) / 3);
238
+ --grid-fixed-fourth: calc(var(--grid-fixed) / 4);
239
+ }
240
+
241
+ .grid-wrapper {
242
+ display: flex;
243
+ justify-content: center;
244
+ }
245
+
246
+ .grid-fixed {
247
+ max-width: var(--grid-fixed);
248
+ width: 100%;
249
+ display: grid;
250
+ grid-template-columns: 1fr;
251
+ gap: var(--spacing-l);
252
+ }
253
+ .grid-fixed--2col {
254
+ grid-template-columns: 1fr 1fr;
255
+ }
256
+ .grid-fixed--3col {
257
+ grid-template-columns: 1fr 1fr 1fr;
258
+ }
259
+ .grid-fixed--4col {
260
+ grid-template-columns: 1fr 1fr 1fr 1fr;
261
+ }
262
+ .grid-fixed .grid-column-span-2 {
263
+ grid-column: span 2;
264
+ }
265
+
266
+ /*
267
+ ############ _font-size.scss ############
268
+ Font size variables
269
+ */
270
+ .utah-design-system {
271
+ --normal-font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
272
+ --fixed-width-font-family: "Source Code Pro", monospace;
273
+ --font-size-2xs: .8125rem;
274
+ --font-size-xs: .875rem;
275
+ --font-size-s: .9375rem;
276
+ --font-size: 1rem;
277
+ --font-size-m: 1.125rem;
278
+ --font-size-l: 1.25rem;
279
+ --font-size-xl: 1.5rem;
280
+ --font-size-2xl: 1.75rem;
281
+ --font-size-3xl: 2rem;
282
+ --font-size-4xl: 2.5rem;
283
+ --font-size-5xl: 3rem;
284
+ --font-size-6xl: 3.5rem;
285
+ --font-size-7xl: 4.5rem;
286
+ }
287
+
288
+ .font-size-2xs {
289
+ font-size: var(--font-size-2xs);
290
+ }
291
+
292
+ .font-size-xs {
293
+ font-size: var(--font-size-xs);
294
+ }
295
+
296
+ .font-size-s {
297
+ font-size: var(--font-size-s);
298
+ }
299
+
300
+ .font-size {
301
+ font-size: var(--font-size);
302
+ }
303
+
304
+ .font-size-m {
305
+ font-size: var(--font-size-m);
306
+ }
307
+
308
+ .font-size-l {
309
+ font-size: var(--font-size-l);
310
+ }
311
+
312
+ .font-size-xl {
313
+ font-size: var(--font-size-xl);
314
+ }
315
+
316
+ .font-size-2xl {
317
+ font-size: var(--font-size-2xl);
318
+ }
319
+
320
+ .font-size-3xl {
321
+ font-size: var(--font-size-3xl);
322
+ }
323
+
324
+ .font-size-4xl {
325
+ font-size: var(--font-size-4xl);
326
+ }
327
+
328
+ .font-size-5xl {
329
+ font-size: var(--font-size-5xl);
330
+ }
331
+
332
+ .font-size-6xl {
333
+ font-size: var(--font-size-6xl);
334
+ }
335
+
336
+ .font-size-7xl {
337
+ font-size: var(--font-size-7xl);
338
+ }
339
+
340
+ .utah-design-system {
341
+ --font-weight-normal: 400;
342
+ --font-weight-semi-bold: 600;
343
+ --font-weight-bold: 700;
344
+ --font-weight-black: 900;
345
+ }
346
+
347
+ .font-normal {
348
+ font-weight: var(--font-weight-normal);
349
+ }
350
+
351
+ .font-semi-bold {
352
+ font-weight: var(--font-weight-semi-bold);
353
+ }
354
+
355
+ .font-bold {
356
+ font-weight: var(--font-weight-bold);
357
+ }
358
+
359
+ .font-black {
360
+ font-weight: var(--font-weight-black);
361
+ }
362
+
363
+ /*
364
+ ############ _color-swatches.scss ############
365
+ base color swatches for the design system
366
+ */
367
+ /* Generated by Glyphter (http://www.glyphter.com) on Fri Jan 20 2023*/
368
+ @font-face {
369
+ font-family: "utah design system";
370
+ src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot");
371
+ src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot?#iefix") format("embedded-opentype"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.ttf") format("truetype"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.svg#utah-design-system") format("svg");
372
+ font-weight: normal;
373
+ font-style: normal;
374
+ }
375
+ .utah-design-system {
376
+ --icon-check-mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12.15'%3E%3Cg%3E%3Cpath d='M6.185,12.15L0,5.966,2.335,3.631l3.85,3.849L13.665,0l2.335,2.335L6.185,12.15Z' style='fill: %23fff;'/%3E%3C/g%3E%3C/svg%3E");
377
+ --icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg%3E%3Crect width='14' height='14' style='fill: none;'/%3E%3Cpath d='M3.142,5l3.716,3.71,3.717-3.71,1.142,1.142-4.859,4.858L2,6.142l1.142-1.142Z' style='fill: %23474747;'/%3E%3C/g%3E%3C/svg%3E");
378
+ }
379
+ .utah-design-system [class*=utds-icon-after-]::after {
380
+ display: inline-block;
381
+ font-family: "utah design system";
382
+ font-style: normal;
383
+ font-weight: normal;
384
+ line-height: 1;
385
+ -webkit-font-smoothing: antialiased;
386
+ -moz-osx-font-smoothing: grayscale;
387
+ margin-left: var(--spacing-2xs);
388
+ }
389
+ .utah-design-system [class*=utds-icon-before-]::before {
390
+ display: inline-block;
391
+ font-family: "utah design system";
392
+ font-style: normal;
393
+ font-weight: normal;
394
+ line-height: 1;
395
+ -webkit-font-smoothing: antialiased;
396
+ -moz-osx-font-smoothing: grayscale;
397
+ margin-right: var(--spacing-2xs);
398
+ }
399
+ .utah-design-system .utds-icon-before-external-link::before,
400
+ .utah-design-system .utds-icon-after-external-link::after {
401
+ content: "A";
402
+ font-size: 0.65em;
403
+ }
404
+ .utah-design-system .utds-icon-before-waffle::before,
405
+ .utah-design-system .utds-icon-after-waffle::after {
406
+ content: "B";
407
+ }
408
+ .utah-design-system .utds-icon-before-alert::before,
409
+ .utah-design-system .utds-icon-after-alert::after {
410
+ content: "C";
411
+ }
412
+ .utah-design-system .utds-icon-before-help::before,
413
+ .utah-design-system .utds-icon-after-help::after {
414
+ content: "D";
415
+ }
416
+ .utah-design-system .utds-icon-before-bookmark::before,
417
+ .utah-design-system .utds-icon-after-bookmark::after {
418
+ content: "E";
419
+ }
420
+ .utah-design-system .utds-icon-before-search::before,
421
+ .utah-design-system .utds-icon-after-search::after {
422
+ content: "F";
423
+ }
424
+ .utah-design-system .utds-icon-before-check::before,
425
+ .utah-design-system .utds-icon-after-check::after {
426
+ content: "G";
427
+ }
428
+ .utah-design-system .utds-icon-before-star::before,
429
+ .utah-design-system .utds-icon-after-star::after {
430
+ content: "H";
431
+ }
432
+ .utah-design-system .utds-icon-before-info::before,
433
+ .utah-design-system .utds-icon-after-info::after {
434
+ content: "I";
435
+ }
436
+ .utah-design-system .utds-icon-before-unfold-less::before,
437
+ .utah-design-system .utds-icon-after-unfold-less::after {
438
+ content: "J";
439
+ }
440
+ .utah-design-system .utds-icon-before-unfold-more::before,
441
+ .utah-design-system .utds-icon-after-unfold-more::after {
442
+ content: "K";
443
+ }
444
+ .utah-design-system .utds-icon-before-circle-chevron-down::before,
445
+ .utah-design-system .utds-icon-after-circle-chevron-down::after {
446
+ content: "L";
447
+ }
448
+ .utah-design-system .utds-icon-before-circle-chevron-up::before,
449
+ .utah-design-system .utds-icon-after-circle-chevron-up::after {
450
+ content: "M";
451
+ }
452
+ .utah-design-system .utds-icon-before-chevron-up::before,
453
+ .utah-design-system .utds-icon-after-chevron-up::after {
454
+ content: "N";
455
+ }
456
+ .utah-design-system .utds-icon-before-chevron-right::before,
457
+ .utah-design-system .utds-icon-after-chevron-right::after {
458
+ content: "O";
459
+ }
460
+ .utah-design-system .utds-icon-before-chevron-down::before,
461
+ .utah-design-system .utds-icon-after-chevron-down::after {
462
+ content: "P";
463
+ }
464
+ .utah-design-system .utds-icon-before-chevron-left::before,
465
+ .utah-design-system .utds-icon-after-chevron-left::after {
466
+ content: "Q";
467
+ }
468
+ .utah-design-system .utds-icon-before-arrow-up::before,
469
+ .utah-design-system .utds-icon-after-arrow-up::after {
470
+ content: "R";
471
+ }
472
+ .utah-design-system .utds-icon-before-arrow-right::before,
473
+ .utah-design-system .utds-icon-after-arrow-right::after {
474
+ content: "S";
475
+ }
476
+ .utah-design-system .utds-icon-before-arrow-down::before,
477
+ .utah-design-system .utds-icon-after-arrow-down::after {
478
+ content: "T";
479
+ }
480
+ .utah-design-system .utds-icon-before-arrow-left::before,
481
+ .utah-design-system .utds-icon-after-arrow-left::after {
482
+ content: "U";
483
+ }
484
+ .utah-design-system .utds-icon-before-plus::before,
485
+ .utah-design-system .utds-icon-after-plus::after {
486
+ content: "V";
487
+ }
488
+ .utah-design-system .utds-icon-before-minus::before,
489
+ .utah-design-system .utds-icon-after-minus::after {
490
+ content: "W";
491
+ }
492
+ .utah-design-system .utds-icon-before-x-icon::before,
493
+ .utah-design-system .utds-icon-after-x-icon::after {
494
+ content: "X";
495
+ }
496
+ .utah-design-system .utds-icon-before-edit::before,
497
+ .utah-design-system .utds-icon-after-edit::after {
498
+ content: "Y";
499
+ }
500
+ .utah-design-system .utds-icon-before-edit-box::before,
501
+ .utah-design-system .utds-icon-after-edit-box::after {
502
+ content: "Z";
503
+ }
504
+ .utah-design-system .utds-icon-before-verified::before,
505
+ .utah-design-system .utds-icon-after-verified::after {
506
+ content: "a";
507
+ }
508
+ .utah-design-system .utds-icon-before-gear::before,
509
+ .utah-design-system .utds-icon-after-gear::after {
510
+ content: "b";
511
+ }
512
+ .utah-design-system .utds-icon-before-doc::before,
513
+ .utah-design-system .utds-icon-after-doc::after {
514
+ content: "c";
515
+ }
516
+ .utah-design-system .utds-icon-before-doc-square::before,
517
+ .utah-design-system .utds-icon-after-doc-square::after {
518
+ content: "d";
519
+ }
520
+ .utah-design-system .utds-icon-before-warning::before,
521
+ .utah-design-system .utds-icon-after-warning::after {
522
+ content: "e";
523
+ }
524
+ .utah-design-system .utds-icon-before-error::before,
525
+ .utah-design-system .utds-icon-after-error::after {
526
+ content: "f";
527
+ }
528
+ .utah-design-system .utds-icon-before-copy::before,
529
+ .utah-design-system .utds-icon-after-copy::after {
530
+ content: "g";
531
+ }
532
+
533
+ /*
534
+ ############ _settings-index.scss ############
535
+ variables and settings
536
+ */
537
+ .utah-design-system {
538
+ /* color */
539
+ /* ######## Pick these colors to match your desired style ######## */
540
+ --primary-color: purple;
541
+ --primary-color-dark: rgb(50, 0, 50);
542
+ --primary-color-light: rgb(219, 159, 219);
543
+ --gray-on-primary-color: #474747;
544
+ --secondary-color: rgb(0, 255, 136);
545
+ --secondary-color-dark: rgb(0, 66, 35);
546
+ --secondary-color-light: rgb(183, 250, 218);
547
+ --gray-on-secondary-color: #474747;
548
+ --accent-color: gold;
549
+ --accent-color-dark: rgb(114, 97, 0);
550
+ --accent-color-light: rgb(245, 238, 196);
551
+ --gray-on-accent-color: #474747;
552
+ --form-ele-color: #2765e4;
553
+ --form-ele-color-light: #7aa0ee;
554
+ --form-ele-disabled-color: #949494;
555
+ /* ######## --------------------------------------------- ######## */
556
+ --gray-color: #474747;
557
+ --gray-medium-color: #616161;
558
+ --gray-3-1-contrast: #949494;
559
+ --gray-medium-light-color: #d7d7d7;
560
+ --gray-light-color: #f1f1f1;
561
+ --gray-dark-color: #333333;
562
+ --hover-gray-color: rgba(0,0,0,0.07);
563
+ --hover-gray-color-opaque: rgba(233,233,233);
564
+ --code-color: #e4e4e4;
565
+ --gray-border: #d7d7d7;
566
+ --danger-color: #ba0000;
567
+ --warning-color: #ba6300;
568
+ --info-color: var(--secondary-color);
569
+ --success-color: #2f8700;
570
+ /* transition timings */
571
+ --timing-xquick: 100ms;
572
+ --timing-quick: 200ms;
573
+ --timing-medium: 400ms;
574
+ --timing-slow: 600ms;
575
+ /* rounded corners */
576
+ --radius-small1x: 3px;
577
+ --radius-small: 6px;
578
+ --radius-medium: 9px;
579
+ --radius-large: 12px;
580
+ --radius-circle: 999px;
581
+ /* form element sizes */
582
+ --form-ele-small4x: .75rem;
583
+ --form-ele-small3x: 1rem;
584
+ --form-ele-small2x: 1.25rem;
585
+ --form-ele-small1x: 1.5rem;
586
+ --form-ele-small: 1.875rem;
587
+ --form-ele-medium: 2.25rem;
588
+ --form-ele-large: 2.5rem;
589
+ --form-ele-large1x: 3.125rem;
590
+ --form-checkbox-small: 0.875rem;
591
+ --form-checkbox-medium: 1.125rem;
592
+ --form-checkbox-large: 1.375rem;
593
+ /* content layout sizes */
594
+ --content-width-narrow: 800px;
595
+ --content-width: 1224px;
596
+ --content-width-wide: 1432px;
597
+ --documentation-width: 700px;
598
+ --documentation-left-width: 200px;
599
+ --documentation-right-width: 200px;
600
+ --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
601
+ /* elevation box shadows */
602
+ --drop-shadow-color: rgba(0, 0, 0, 0.3);
603
+ --elevation-small: 0 3px 6px var(--drop-shadow-color);
604
+ --elevation-medium: 0 6px 12px var(--drop-shadow-color);
605
+ --elevation-large: 0 12px 16px var(--drop-shadow-color);
606
+ }
607
+
608
+ /* color utility classes */
609
+ .primary-color-background {
610
+ background-color: var(--primary-color);
611
+ }
612
+
613
+ .primary-color-dark-background {
614
+ background-color: var(--primary-color-dark);
615
+ }
616
+
617
+ .primary-color-light-background {
618
+ background-color: var(--primary-color-light);
619
+ }
620
+
621
+ .gray-on-primary-background {
622
+ background-color: var(--gray-on-primary-color);
623
+ }
624
+
625
+ .primary-color {
626
+ color: var(--primary-color);
627
+ }
628
+
629
+ .primary-color-border {
630
+ border-color: var(--primary-color);
631
+ }
632
+
633
+ .secondary-color-background {
634
+ background-color: var(--secondary-color);
635
+ }
636
+
637
+ .secondary-color-dark-background {
638
+ background-color: var(--secondary-color-dark);
639
+ }
640
+
641
+ .secondary-color-light-background {
642
+ background-color: var(--secondary-color-light);
643
+ }
644
+
645
+ .gray-on-secondary-background {
646
+ background-color: var(--gray-on-secondary-color);
647
+ }
648
+
649
+ .secondary-color {
650
+ color: var(--secondary-color);
651
+ }
652
+
653
+ .secondary-color-border {
654
+ border-color: var(--secondary-color);
655
+ }
656
+
657
+ .accent-color-background {
658
+ background-color: var(--accent-color);
659
+ }
660
+
661
+ .accent-color-dark-background {
662
+ background-color: var(--accent-color-dark);
663
+ }
664
+
665
+ .accent-color-light-background {
666
+ background-color: var(--accent-color-light);
667
+ }
668
+
669
+ .gray-on-accent-background {
670
+ background-color: var(--gray-on-accent-color);
671
+ }
672
+
673
+ .accent-color {
674
+ color: var(--accent-color);
675
+ }
676
+
677
+ .accent-color-border {
678
+ border-color: var(--accent-color);
679
+ }
680
+
681
+ .gray-color-background {
682
+ background-color: var(--gray-color);
683
+ }
684
+
685
+ .gray-color-light-background {
686
+ background-color: var(--gray-light-color);
687
+ }
688
+
689
+ .white-color {
690
+ color: white;
691
+ }
692
+
693
+ .background-frosted-dark {
694
+ background: rgba(0, 0, 0, 0.6);
695
+ backdrop-filter: blur(16px) brightness(1.5);
696
+ -webkit-backdrop-filter: blur(16px) brightness(1.5);
697
+ }
698
+
699
+ .background-frosted-light {
700
+ background: rgba(255, 255, 255, 0.1);
701
+ backdrop-filter: blur(16px);
702
+ -webkit-backdrop-filter: blur(16px);
703
+ }
704
+
705
+ .utah-design-system .popup__wrapper {
706
+ position: absolute;
707
+ z-index: 100;
708
+ background: none transparent;
709
+ left: 0;
710
+ top: 0;
711
+ transition: opacity 100ms ease-in-out;
712
+ }
713
+ .utah-design-system .popup__wrapper--visible {
714
+ opacity: 1;
715
+ }
716
+ .utah-design-system .popup__wrapper--visible .popup__content {
717
+ transform: scale(1);
718
+ }
719
+ .utah-design-system .popup__wrapper--hidden {
720
+ opacity: 0;
721
+ pointer-events: none;
722
+ }
723
+ .utah-design-system .popup__wrapper--hidden .popup__content {
724
+ transform: scale(0.7);
725
+ }
726
+ .utah-design-system .popup__wrapper--close-button-absolute .popup__close-button {
727
+ position: absolute;
728
+ top: var(--spacing-xs);
729
+ right: var(--spacing-xs);
730
+ }
731
+ .utah-design-system .popup__content {
732
+ background: white;
733
+ border-radius: var(--radius-small);
734
+ border: 1px solid var(--gray-3-1-contrast);
735
+ box-sizing: border-box;
736
+ min-width: 180px;
737
+ padding: var(--spacing-s);
738
+ transition: transform 100ms ease-in-out;
739
+ box-shadow: var(--elevation-small);
740
+ }
741
+ .utah-design-system .popup__close-button {
742
+ float: right;
743
+ }
744
+ .utah-design-system .popup__close-button .utds-icon-before-x-icon::before {
745
+ font-size: 0.7rem;
746
+ }
747
+ .utah-design-system .popup__arrow {
748
+ visibility: hidden;
749
+ }
750
+ .utah-design-system .popup__arrow, .utah-design-system .popup__arrow::before {
751
+ position: absolute;
752
+ width: 9px;
753
+ height: 9px;
754
+ background: inherit;
755
+ z-index: -1;
756
+ }
757
+ .utah-design-system .popup__arrow::before {
758
+ visibility: visible;
759
+ content: "";
760
+ transform: rotate(45deg);
761
+ }
762
+ .utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__content {
763
+ transform-origin: bottom;
764
+ }
765
+ .utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__arrow {
766
+ bottom: -5px;
767
+ }
768
+ .utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__arrow::before {
769
+ border-bottom: 1px solid var(--gray-3-1-contrast);
770
+ border-right: 1px solid var(--gray-3-1-contrast);
771
+ }
772
+ .utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__content {
773
+ transform-origin: top;
774
+ }
775
+ .utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__arrow {
776
+ top: -6px;
777
+ }
778
+ .utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__arrow::before {
779
+ border-top: 1px solid var(--gray-3-1-contrast);
780
+ border-left: 1px solid var(--gray-3-1-contrast);
781
+ }
782
+ .utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__content {
783
+ transform-origin: right;
784
+ }
785
+ .utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__arrow {
786
+ right: -5px;
787
+ }
788
+ .utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__arrow::before {
789
+ border-top: 1px solid var(--gray-3-1-contrast);
790
+ border-right: 1px solid var(--gray-3-1-contrast);
791
+ }
792
+ .utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__content {
793
+ transform-origin: left;
794
+ }
795
+ .utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__arrow {
796
+ left: -6px;
797
+ }
798
+ .utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__arrow::before {
799
+ border-bottom: 1px solid var(--gray-3-1-contrast);
800
+ border-left: 1px solid var(--gray-3-1-contrast);
801
+ }
802
+
803
+ .utds-header {
804
+ padding: var(--spacing-s) var(--spacing-l);
805
+ border-bottom: 1px solid #d7d7d7 !important;
806
+ width: 100%;
807
+ justify-content: flex-start;
808
+ height: 78px;
809
+ position: relative;
810
+ box-sizing: border-box;
811
+ display: flex;
812
+ align-items: center;
813
+ }
814
+ .utds-header--large {
815
+ height: 84px;
816
+ }
817
+ .utds-header--small {
818
+ height: 60px;
819
+ }
820
+
821
+ .utds-logo-wrapper {
822
+ position: relative;
823
+ height: 100%;
824
+ display: flex;
825
+ align-items: center;
826
+ }
827
+ .utds-logo-vert-line {
828
+ height: 85%;
829
+ width: 1px;
830
+ background-color: #707070;
831
+ margin: 0 var(--spacing-xs) 0 var(--spacing);
832
+ display: block;
833
+ }
834
+ .utds-title-wrapper {
835
+ font-size: var(--font-size-3xl);
836
+ font-weight: 600;
837
+ color: var(--gray-medium-color);
838
+ display: flex;
839
+ align-items: center;
840
+ flex: 1;
841
+ height: 100%;
842
+ gap: var(--spacing-xs);
843
+ text-decoration: none;
844
+ border-radius: var(--radius-small);
845
+ padding: 0 var(--spacing-xs);
846
+ }
847
+ .utds-title-wrapper__logo {
848
+ height: 100%;
849
+ width: auto;
850
+ max-width: 100%;
851
+ max-height: 100%;
852
+ display: flex;
853
+ align-items: center;
854
+ }
855
+ .utds-title-wrapper__logo svg, .utds-title-wrapper__logo img {
856
+ height: 100%;
857
+ width: auto;
858
+ max-width: 100%;
859
+ max-height: 100%;
860
+ }
861
+ .utds-title-wrapper__logo img {
862
+ max-width: none;
863
+ }
864
+ .utds-title-wrapper__title {
865
+ line-height: 0.8;
866
+ color: var(--gray-medium-color);
867
+ }
868
+
869
+ .utah-logo-svg {
870
+ height: 100%;
871
+ position: relative;
872
+ margin-bottom: -4px;
873
+ }
874
+ .utah-logo-svg svg {
875
+ height: 100%;
876
+ width: auto;
877
+ fill: var(--primary-color);
878
+ font-family: SourceSansPro-Regular, "Source Sans Pro";
879
+ font-weight: normal;
880
+ font-size: 14px;
881
+ display: block;
882
+ }
883
+
884
+ .utds-badge__wrapper {
885
+ align-items: center;
886
+ background-color: var(--danger-color);
887
+ border-radius: var(--radius-circle);
888
+ box-sizing: border-box;
889
+ color: white;
890
+ display: flex;
891
+ font-size: var(--font-size-2xs);
892
+ font-weight: var(--font-weight-semi-bold);
893
+ height: 15px;
894
+ justify-content: center;
895
+ line-height: var(--font-size-2xs);
896
+ min-width: 15px;
897
+ padding: 1px 2px;
898
+ position: absolute;
899
+ right: 0;
900
+ top: 0;
901
+ }
902
+ .utds-badge__wrapper--action-item {
903
+ right: -2px;
904
+ top: -2px;
905
+ }
906
+ .utds-badge__wrapper--small {
907
+ height: 9px;
908
+ min-width: unset;
909
+ right: 2px;
910
+ top: 2px;
911
+ width: 9px;
912
+ }
913
+
914
+ .utah-design-system ul.vertical-menu {
915
+ list-style-type: none;
916
+ margin: 0;
917
+ padding: 0;
918
+ }
919
+ .utah-design-system .vertical-menu li > ul {
920
+ padding-left: var(--spacing-s);
921
+ }
922
+ .utah-design-system .vertical-menu button.vertical-menu__button-title,
923
+ .utah-design-system .vertical-menu a[href].vertical-menu__link-title {
924
+ border-radius: var(--radius-circle);
925
+ border: none;
926
+ box-shadow: none;
927
+ box-sizing: border-box;
928
+ color: var(--gray-color);
929
+ display: flex;
930
+ font-size: var(--font-size-2xs);
931
+ justify-content: flex-start;
932
+ line-height: 1.7;
933
+ margin: var(--spacing-2xs) 0;
934
+ min-height: unset;
935
+ padding: var(--spacing-2xs) var(--spacing);
936
+ text-align: left;
937
+ text-decoration: none;
938
+ width: 100%;
939
+ }
940
+ .utah-design-system .vertical-menu button.vertical-menu__button-title:hover,
941
+ .utah-design-system .vertical-menu a[href].vertical-menu__link-title:hover {
942
+ background: var(--hover-gray-color);
943
+ color: var(--primary-color);
944
+ box-shadow: none;
945
+ }
946
+ .utah-design-system .vertical-menu button.vertical-menu__button-title:active,
947
+ .utah-design-system .vertical-menu a[href].vertical-menu__link-title:active {
948
+ transform: none;
949
+ }
950
+ .utah-design-system .vertical-menu a.vertical-menu__link-title:hover {
951
+ box-shadow: none;
952
+ }
953
+ .utah-design-system .vertical-menu__link-text {
954
+ flex: 1 0 auto;
955
+ }
956
+ .utah-design-system .vertical-menu__divider {
957
+ display: block;
958
+ margin: var(--spacing-s) var(--spacing-s);
959
+ height: 1px;
960
+ background-color: var(--gray-medium-light-color);
961
+ }
962
+ .utah-design-system .vertical-menu .utds-icon-before-chevron-right {
963
+ font-size: 0.6rem;
964
+ line-height: 0.5;
965
+ transform: rotate(0deg);
966
+ transition: transform var(--timing-quick) ease;
967
+ }
968
+ .utah-design-system .vertical-menu .utds-icon-before-chevron-right::before {
969
+ margin-right: 0;
970
+ }
971
+ .utah-design-system .vertical-menu .utds-icon-before-chevron-right.is-open {
972
+ transform: rotate(90deg);
973
+ }