@utahdts/utah-design-system-header 4.2.1 → 5.0.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/dist/index.d.ts +3 -1
- package/dist/style.css +410 -38
- package/dist/utah-design-system-header.es.js +2533 -3127
- package/dist/utah-design-system-header.umd.js +209 -120
- package/package.json +8 -8
- package/src/css/media-queries.css +5 -4
package/dist/index.d.ts
CHANGED
|
@@ -110,6 +110,7 @@ declare module "@utahdts/utah-design-system-header" {
|
|
|
110
110
|
env?: string | undefined;
|
|
111
111
|
first: string | null | undefined;
|
|
112
112
|
id?: string | null | undefined;
|
|
113
|
+
isPublic?: string | null | undefined;
|
|
113
114
|
last?: string | null | undefined;
|
|
114
115
|
mail?: string[] | null | undefined;
|
|
115
116
|
middle?: string | null | undefined;
|
|
@@ -129,6 +130,7 @@ declare module "@utahdts/utah-design-system-header" {
|
|
|
129
130
|
onSignIn?: ((arg0: UIEvent) => void | undefined) | undefined;
|
|
130
131
|
onSignOut?: ((arg0: UIEvent) => void | undefined) | undefined;
|
|
131
132
|
menuItems?: MenuItem[] | undefined;
|
|
133
|
+
notifications?: boolean | undefined;
|
|
132
134
|
};
|
|
133
135
|
export type Logo = {
|
|
134
136
|
element?: HTMLElement | (() => HTMLElement) | undefined;
|
|
@@ -158,7 +160,7 @@ declare module "@utahdts/utah-design-system-header" {
|
|
|
158
160
|
title: string;
|
|
159
161
|
titleFunction?: EventAction | undefined;
|
|
160
162
|
titleUrl?: string | undefined;
|
|
161
|
-
utahId?:
|
|
163
|
+
utahId?: UtahIDSettings | boolean | undefined;
|
|
162
164
|
};
|
|
163
165
|
export type childrenMenuTypes = ChildrenMenuTypes;
|
|
164
166
|
export namespace childrenMenuTypes {
|
package/dist/style.css
CHANGED
|
@@ -350,10 +350,40 @@ variables and settings
|
|
|
350
350
|
############ _font-size.scss ############
|
|
351
351
|
Font size variables
|
|
352
352
|
*/
|
|
353
|
+
@font-face {
|
|
354
|
+
font-family: "UT Industry";
|
|
355
|
+
src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Regular.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Regular.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Regular.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Regular.ttf") format("truetype");
|
|
356
|
+
font-weight: 400;
|
|
357
|
+
font-style: normal;
|
|
358
|
+
font-display: block;
|
|
359
|
+
}
|
|
360
|
+
@font-face {
|
|
361
|
+
font-family: "UT Industry";
|
|
362
|
+
src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Medium.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Medium.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Medium.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Medium.ttf") format("truetype");
|
|
363
|
+
font-weight: 500;
|
|
364
|
+
font-style: normal;
|
|
365
|
+
font-display: block;
|
|
366
|
+
}
|
|
367
|
+
@font-face {
|
|
368
|
+
font-family: "UT Industry";
|
|
369
|
+
src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Bold.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Bold.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Bold.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Bold.ttf") format("truetype");
|
|
370
|
+
font-weight: 700;
|
|
371
|
+
font-style: normal;
|
|
372
|
+
font-display: block;
|
|
373
|
+
}
|
|
374
|
+
@font-face {
|
|
375
|
+
font-family: "UT Industry";
|
|
376
|
+
src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Heavy.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Heavy.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Heavy.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Heavy.ttf") format("truetype");
|
|
377
|
+
font-weight: 900;
|
|
378
|
+
font-style: normal;
|
|
379
|
+
font-display: block;
|
|
380
|
+
}
|
|
381
|
+
:root {
|
|
382
|
+
--ut-industry-font-family: 'UT Industry', Georgia, serif;
|
|
383
|
+
}
|
|
353
384
|
.utah-design-system {
|
|
354
385
|
--normal-font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
|
|
355
386
|
--fixed-width-font-family: 'Source Code Pro', monospace;
|
|
356
|
-
--font-size-2xs: .8125rem;
|
|
357
387
|
--font-size-xs: .875rem;
|
|
358
388
|
--font-size-s: .9375rem;
|
|
359
389
|
--font-size: 1rem;
|
|
@@ -373,9 +403,6 @@ Font size variables
|
|
|
373
403
|
--font-weight-bold: 700;
|
|
374
404
|
--font-weight-black: 900;
|
|
375
405
|
}
|
|
376
|
-
.utah-design-system .font-size-2xs {
|
|
377
|
-
font-size: var(--font-size-2xs);
|
|
378
|
-
}
|
|
379
406
|
.utah-design-system .font-size-xs {
|
|
380
407
|
font-size: var(--font-size-xs);
|
|
381
408
|
}
|
|
@@ -435,6 +462,9 @@ Font size variables
|
|
|
435
462
|
base color swatches for the design system
|
|
436
463
|
*/
|
|
437
464
|
/*
|
|
465
|
+
branding colors
|
|
466
|
+
*/
|
|
467
|
+
/*
|
|
438
468
|
############ _settings-index.scss ############
|
|
439
469
|
variables and settings
|
|
440
470
|
*/
|
|
@@ -740,26 +770,95 @@ variables and settings
|
|
|
740
770
|
############ _media-size-vars.scss ############
|
|
741
771
|
Media Sizes - SCSS Variables
|
|
742
772
|
*/
|
|
773
|
+
:root {
|
|
774
|
+
/* ######## ---------- Branding --------- ######## */
|
|
775
|
+
--utah-brand-primary-color-blue-dark: #071D49;
|
|
776
|
+
--utah-brand-primary-color-blue-medium: #093692;
|
|
777
|
+
--utah-brand-primary-color-blue-light: #81D0F0;
|
|
778
|
+
--utah-brand-primary-color-gold-light: #FFB81D;
|
|
779
|
+
--utah-brand-primary-color-gold-medium: #FF8C03;
|
|
780
|
+
--utah-brand-primary-color-red: #AA0200;
|
|
781
|
+
--utah-brand-secondary-color-clay-00: #E9DCC8;
|
|
782
|
+
--utah-brand-secondary-color-clay-01: #C0B1A1;
|
|
783
|
+
--utah-brand-secondary-color-clay-02: #9C837E;
|
|
784
|
+
--utah-brand-secondary-color-clay-03: #78555A;
|
|
785
|
+
--utah-brand-secondary-color-clay-04: #52393B;
|
|
786
|
+
--utah-brand-secondary-color-clay-05: #2C1E1B;
|
|
787
|
+
--utah-brand-secondary-color-green-00: #C6D0BE;
|
|
788
|
+
--utah-brand-secondary-color-green-01: #94AF87;
|
|
789
|
+
--utah-brand-secondary-color-green-02: #4A9044;
|
|
790
|
+
--utah-brand-secondary-color-green-03: #007000;
|
|
791
|
+
--utah-brand-secondary-color-green-04: #1C4C10;
|
|
792
|
+
--utah-brand-secondary-color-green-05: #092908;
|
|
793
|
+
--utah-brand-secondary-color-teal-00: #A6C4CA;
|
|
794
|
+
--utah-brand-secondary-color-teal-01: #79B1B1;
|
|
795
|
+
--utah-brand-secondary-color-teal-02: #3D9992;
|
|
796
|
+
--utah-brand-secondary-color-teal-03: #008072;
|
|
797
|
+
--utah-brand-secondary-color-teal-04: #165857;
|
|
798
|
+
--utah-brand-secondary-color-teal-05: #0D262E;
|
|
799
|
+
--utah-brand-secondary-color-blue-00: #C1CFE7;
|
|
800
|
+
--utah-brand-secondary-color-blue-01: #89A4D4;
|
|
801
|
+
--utah-brand-secondary-color-blue-02: #467EC8;
|
|
802
|
+
--utah-brand-secondary-color-blue-03: #0258BB;
|
|
803
|
+
--utah-brand-secondary-color-blue-04: #103982;
|
|
804
|
+
--utah-brand-secondary-color-blue-05: #0E1C3B;
|
|
805
|
+
--utah-brand-secondary-color-violet-00: #D6CEDF;
|
|
806
|
+
--utah-brand-secondary-color-violet-01: #9F8DB4;
|
|
807
|
+
--utah-brand-secondary-color-violet-02: #7259AA;
|
|
808
|
+
--utah-brand-secondary-color-violet-03: #3F1EAD;
|
|
809
|
+
--utah-brand-secondary-color-violet-04: #301C5C;
|
|
810
|
+
--utah-brand-secondary-color-violet-05: #1F0A45;
|
|
811
|
+
--utah-brand-secondary-color-raspberry-00: #D0A7BB;
|
|
812
|
+
--utah-brand-secondary-color-raspberry-01: #C9829E;
|
|
813
|
+
--utah-brand-secondary-color-raspberry-02: #C24177;
|
|
814
|
+
--utah-brand-secondary-color-raspberry-03: #BA004F;
|
|
815
|
+
--utah-brand-secondary-color-raspberry-04: #870746;
|
|
816
|
+
--utah-brand-secondary-color-raspberry-05: #530D3C;
|
|
817
|
+
--utah-brand-secondary-color-red-00: #E1ACA1;
|
|
818
|
+
--utah-brand-secondary-color-red-01: #DF897D;
|
|
819
|
+
--utah-brand-secondary-color-red-02: #FF5D5F;
|
|
820
|
+
--utah-brand-secondary-color-red-03: #E70015;
|
|
821
|
+
--utah-brand-secondary-color-red-04: #9B1B15;
|
|
822
|
+
--utah-brand-secondary-color-red-05: #61100A;
|
|
823
|
+
--utah-brand-secondary-color-orange-00: #E9C997;
|
|
824
|
+
--utah-brand-secondary-color-orange-01: #E5A873;
|
|
825
|
+
--utah-brand-secondary-color-orange-02: #E37D49;
|
|
826
|
+
--utah-brand-secondary-color-orange-03: #E2521F;
|
|
827
|
+
--utah-brand-secondary-color-orange-04: #A34818;
|
|
828
|
+
--utah-brand-secondary-color-orange-05: #633D11;
|
|
829
|
+
--utah-brand-secondary-color-yellow-00: #FAFAD4;
|
|
830
|
+
--utah-brand-secondary-color-yellow-01: #F8FAAF;
|
|
831
|
+
--utah-brand-secondary-color-yellow-02: #F5FA7D;
|
|
832
|
+
--utah-brand-secondary-color-yellow-03: #F2FA00;
|
|
833
|
+
--utah-brand-secondary-color-yellow-04: #CBB60C;
|
|
834
|
+
--utah-brand-secondary-color-yellow-05: #A47217;
|
|
835
|
+
/* ######## --------------------------------------------- ######## */
|
|
836
|
+
}
|
|
743
837
|
.utah-design-system {
|
|
744
838
|
/* color */
|
|
745
839
|
/* ######## Pick these colors to match your desired style ######## */
|
|
746
|
-
--primary-color:
|
|
747
|
-
--primary-color-dark:
|
|
748
|
-
--primary-color-light:
|
|
749
|
-
--gray-on-primary-color:
|
|
750
|
-
--secondary-color:
|
|
751
|
-
--secondary-color-dark:
|
|
752
|
-
--secondary-color-light:
|
|
840
|
+
--primary-color: var(--utah-brand-primary-color-blue-medium);
|
|
841
|
+
--primary-color-dark: var(--utah-brand-primary-color-blue-dark);
|
|
842
|
+
--primary-color-light: var(--utah-brand-primary-color-blue-light);
|
|
843
|
+
--gray-on-primary-color: white;
|
|
844
|
+
--secondary-color: var(--utah-brand-secondary-color-teal-03);
|
|
845
|
+
--secondary-color-dark: var(--utah-brand-secondary-color-teal-05);
|
|
846
|
+
--secondary-color-light: var(--utah-brand-secondary-color-teal-00);
|
|
753
847
|
--gray-on-secondary-color: #474747;
|
|
754
|
-
--accent-color:
|
|
755
|
-
--accent-color-dark:
|
|
756
|
-
--accent-color-light:
|
|
848
|
+
--accent-color: var(--utah-brand-primary-color-gold-light);
|
|
849
|
+
--accent-color-dark: var(--utah-brand-primary-color-gold-medium);
|
|
850
|
+
--accent-color-light: var(--utah-brand-secondary-color-yellow-00);
|
|
757
851
|
--gray-on-accent-color: #474747;
|
|
758
852
|
--form-ele-color: #2765e4;
|
|
759
853
|
--form-ele-color-light: #9bb8f2;
|
|
854
|
+
--form-ele-color-dark: #234b9e;
|
|
760
855
|
--form-ele-disabled-color: #949494;
|
|
761
856
|
--form-ele-placeholder-color: #757575;
|
|
762
|
-
|
|
857
|
+
--header-primary-color: var(--primary-color);
|
|
858
|
+
--header-primary-color-dark: var(--primary-color-dark);
|
|
859
|
+
--header-title-color: var(--utah-brand-primary-color-blue-dark);
|
|
860
|
+
--notifications-drawer-color: var(--form-ele-color);
|
|
861
|
+
--notifications-drawer-color-dark: var(--form-ele-color-dark);
|
|
763
862
|
--gray-color: #474747;
|
|
764
863
|
--gray-medium-color: #616161;
|
|
765
864
|
--gray-3-1-contrast: #949494;
|
|
@@ -1562,7 +1661,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
1562
1661
|
display: inline-block;
|
|
1563
1662
|
height: 100%;
|
|
1564
1663
|
overflow-y: auto;
|
|
1565
|
-
padding:
|
|
1664
|
+
padding: 0;
|
|
1566
1665
|
}
|
|
1567
1666
|
.utah-design-system .drawer__inner.drawer--right {
|
|
1568
1667
|
animation: 200ms ease-in-out 100ms right-in both;
|
|
@@ -1641,6 +1740,9 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
1641
1740
|
.utah-design-system .tab-group__panel--selected {
|
|
1642
1741
|
display: block;
|
|
1643
1742
|
}
|
|
1743
|
+
.utah-design-system .tab-group__panel:focus-visible {
|
|
1744
|
+
outline-offset: 2px;
|
|
1745
|
+
}
|
|
1644
1746
|
.utah-design-system .tab-group--vertical {
|
|
1645
1747
|
display: flex;
|
|
1646
1748
|
}
|
|
@@ -2568,6 +2670,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
2568
2670
|
}
|
|
2569
2671
|
.utah-design-system .search-input__wrapper input[type=text] {
|
|
2570
2672
|
border-radius: var(--radius-circle);
|
|
2673
|
+
margin: 0;
|
|
2571
2674
|
padding: var(--spacing-s) 170px var(--spacing-s) var(--spacing-3xl);
|
|
2572
2675
|
}
|
|
2573
2676
|
.utah-design-system .search-input__button-wrapper {
|
|
@@ -3219,7 +3322,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3219
3322
|
}
|
|
3220
3323
|
.utah-design-system .switch__wrapper {
|
|
3221
3324
|
min-width: 20px;
|
|
3222
|
-
background: #
|
|
3325
|
+
background: #6e6e6e;
|
|
3223
3326
|
color: white;
|
|
3224
3327
|
border-radius: var(--radius-circle);
|
|
3225
3328
|
min-height: var(--form-ele-small3x);
|
|
@@ -3429,6 +3532,9 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3429
3532
|
position: relative;
|
|
3430
3533
|
z-index: 2500;
|
|
3431
3534
|
}
|
|
3535
|
+
.utah-design-system.main-menu__outer:hover {
|
|
3536
|
+
z-index: 4000;
|
|
3537
|
+
}
|
|
3432
3538
|
.utah-design-system .main-menu__wrapper {
|
|
3433
3539
|
background-color: var(--gray-light-color);
|
|
3434
3540
|
display: flex;
|
|
@@ -3489,7 +3595,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3489
3595
|
content: "";
|
|
3490
3596
|
width: 100%;
|
|
3491
3597
|
height: var(--spacing-2xs);
|
|
3492
|
-
background: var(--primary-color);
|
|
3598
|
+
background: var(--header-primary-color);
|
|
3493
3599
|
display: block;
|
|
3494
3600
|
position: absolute;
|
|
3495
3601
|
top: 0;
|
|
@@ -4416,6 +4522,14 @@ BEM standard: Block, Element, Modifier
|
|
|
4416
4522
|
.utah-design-system .search-modal__icon-search[class*=utds-icon-before-]::before {
|
|
4417
4523
|
font-size: 1.3rem;
|
|
4418
4524
|
}
|
|
4525
|
+
.utah-design-system .search-modal .button.button--solid.button--primary-color {
|
|
4526
|
+
background-color: var(--header-primary-color);
|
|
4527
|
+
border-color: var(--header-primary-color);
|
|
4528
|
+
}
|
|
4529
|
+
.utah-design-system .search-modal .button.button--solid.button--primary-color:hover {
|
|
4530
|
+
background-color: var(--header-primary-color-dark);
|
|
4531
|
+
border-color: var(--header-primary-color-dark);
|
|
4532
|
+
}
|
|
4419
4533
|
.utah-design-system .documentation-template {
|
|
4420
4534
|
display: flex;
|
|
4421
4535
|
flex-direction: row;
|
|
@@ -4612,9 +4726,9 @@ BEM standard: Block, Element, Modifier
|
|
|
4612
4726
|
border-radius: var(--radius-circle);
|
|
4613
4727
|
box-sizing: border-box;
|
|
4614
4728
|
color: white;
|
|
4615
|
-
font-size: var(--font-size-
|
|
4729
|
+
font-size: var(--font-size-xs);
|
|
4616
4730
|
font-weight: var(--font-weight-semi-bold);
|
|
4617
|
-
line-height: var(--font-size-
|
|
4731
|
+
line-height: var(--font-size-xs);
|
|
4618
4732
|
min-height: var(--spacing-xs);
|
|
4619
4733
|
min-width: var(--spacing-2xs);
|
|
4620
4734
|
padding: var(--spacing-3xs) var(--spacing-2xs);
|
|
@@ -4973,6 +5087,9 @@ BEM standard: Block, Element, Modifier
|
|
|
4973
5087
|
/*
|
|
4974
5088
|
############ _popup.scss ############
|
|
4975
5089
|
*/
|
|
5090
|
+
.utah-design-system .swatches {
|
|
5091
|
+
display: inline-block;
|
|
5092
|
+
}
|
|
4976
5093
|
.utah-design-system .color-family {
|
|
4977
5094
|
display: flex;
|
|
4978
5095
|
margin: 0 0 var(--spacing-2xs) 0;
|
|
@@ -4999,8 +5116,8 @@ BEM standard: Block, Element, Modifier
|
|
|
4999
5116
|
padding: 0;
|
|
5000
5117
|
}
|
|
5001
5118
|
.utah-design-system .color-family__swatch {
|
|
5002
|
-
width:
|
|
5003
|
-
height:
|
|
5119
|
+
width: 94px;
|
|
5120
|
+
height: 24px;
|
|
5004
5121
|
border: none;
|
|
5005
5122
|
border-radius: 0;
|
|
5006
5123
|
min-height: auto;
|
|
@@ -5064,7 +5181,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5064
5181
|
margin-left: var(--spacing-xs);
|
|
5065
5182
|
}
|
|
5066
5183
|
.utds-header {
|
|
5067
|
-
padding: var(--spacing-s) var(--spacing
|
|
5184
|
+
padding: var(--spacing-s) var(--spacing);
|
|
5068
5185
|
border-bottom: 1px solid #d7d7d7 !important;
|
|
5069
5186
|
width: 100%;
|
|
5070
5187
|
justify-content: flex-start;
|
|
@@ -5082,6 +5199,14 @@ BEM standard: Block, Element, Modifier
|
|
|
5082
5199
|
.utds-header--small {
|
|
5083
5200
|
height: 60px;
|
|
5084
5201
|
}
|
|
5202
|
+
.utds-header + .main-menu__outer .menu-item a[href].menu-item--selected,
|
|
5203
|
+
.utds-header + .main-menu__outer .vertical-menu a[href].vertical-menu__link-title:hover,
|
|
5204
|
+
.utds-header + .main-menu__outer .vertical-menu button.vertical-menu__button-title:hover {
|
|
5205
|
+
color: var(--header-primary-color);
|
|
5206
|
+
}
|
|
5207
|
+
.utds-header + .main-menu__outer .horizontal-menu > ul li a[href].menu-item--selected + span.menu-chiclet::after {
|
|
5208
|
+
background-color: var(--header-primary-color);
|
|
5209
|
+
}
|
|
5085
5210
|
.utds-header-desktop--hidden {
|
|
5086
5211
|
display: none !important;
|
|
5087
5212
|
}
|
|
@@ -5100,9 +5225,6 @@ BEM standard: Block, Element, Modifier
|
|
|
5100
5225
|
display: block;
|
|
5101
5226
|
}
|
|
5102
5227
|
.utah-design-system .utds-title-wrapper {
|
|
5103
|
-
font-size: var(--font-size-3xl);
|
|
5104
|
-
font-weight: 600;
|
|
5105
|
-
color: var(--gray-medium-color);
|
|
5106
5228
|
display: flex;
|
|
5107
5229
|
align-items: center;
|
|
5108
5230
|
flex: 1;
|
|
@@ -5134,8 +5256,13 @@ BEM standard: Block, Element, Modifier
|
|
|
5134
5256
|
max-width: 100%;
|
|
5135
5257
|
}
|
|
5136
5258
|
.utah-design-system .utds-title-wrapper__title {
|
|
5259
|
+
color: var(--header-title-color);
|
|
5260
|
+
font-family: var(--ut-industry-font-family);
|
|
5261
|
+
font-size: 2.7rem;
|
|
5262
|
+
font-weight: 600;
|
|
5137
5263
|
line-height: 0.8;
|
|
5138
|
-
|
|
5264
|
+
margin-top: 0.4rem;
|
|
5265
|
+
white-space: nowrap;
|
|
5139
5266
|
}
|
|
5140
5267
|
.utah-design-system .utah-logo-wrapper {
|
|
5141
5268
|
height: 100%;
|
|
@@ -5184,12 +5311,74 @@ BEM standard: Block, Element, Modifier
|
|
|
5184
5311
|
text-decoration: none;
|
|
5185
5312
|
}
|
|
5186
5313
|
@media screen and (max-width: 768px) {
|
|
5187
|
-
.utah-design-system .utds-title-
|
|
5188
|
-
font-size:
|
|
5314
|
+
.utah-design-system .utds-title-wrapper__title {
|
|
5315
|
+
font-size: 1.9rem;
|
|
5189
5316
|
}
|
|
5190
5317
|
}
|
|
5191
|
-
.
|
|
5318
|
+
.utds-official-website__wrapper button {
|
|
5319
|
+
padding: 0;
|
|
5320
|
+
border: none;
|
|
5321
|
+
display: inline-flex;
|
|
5322
|
+
min-height: 0;
|
|
5323
|
+
background: transparent;
|
|
5324
|
+
color: var(--gray-light-color);
|
|
5325
|
+
font-size: var(--font-size-xs);
|
|
5326
|
+
border-radius: 0;
|
|
5327
|
+
}
|
|
5328
|
+
.utds-official-website__wrapper button span {
|
|
5329
|
+
text-decoration: underline;
|
|
5330
|
+
}
|
|
5331
|
+
.utds-official-website__wrapper button svg {
|
|
5332
|
+
margin-left: var(--spacing-2xs);
|
|
5333
|
+
}
|
|
5334
|
+
.utds-official-website__wrapper button:hover {
|
|
5335
|
+
color: white;
|
|
5336
|
+
}
|
|
5337
|
+
.utds-official-website__wrapper button:active {
|
|
5338
|
+
scale: 1;
|
|
5339
|
+
box-shadow: none;
|
|
5340
|
+
}
|
|
5341
|
+
.utds-official-website__wrapper button[aria-expanded=true] svg {
|
|
5342
|
+
transform: rotate(180deg);
|
|
5343
|
+
}
|
|
5344
|
+
.utds-official-website__banner {
|
|
5345
|
+
padding: var(--spacing-3xs) var(--spacing-l);
|
|
5192
5346
|
background: var(--gray-color);
|
|
5347
|
+
color: var(--gray-light-color);
|
|
5348
|
+
font-size: var(--font-size-xs);
|
|
5349
|
+
}
|
|
5350
|
+
.utds-official-website-popup__wrapper {
|
|
5351
|
+
background: var(--gray-dark-color);
|
|
5352
|
+
}
|
|
5353
|
+
.utds-official-website__button-title--mobile {
|
|
5354
|
+
display: none;
|
|
5355
|
+
}
|
|
5356
|
+
@media screen and (max-width: 990px) {
|
|
5357
|
+
.utah-design-system .utds-official-website-popup__content {
|
|
5358
|
+
flex-wrap: wrap;
|
|
5359
|
+
gap: var(--spacing-l);
|
|
5360
|
+
flex-direction: column;
|
|
5361
|
+
align-items: flex-start;
|
|
5362
|
+
}
|
|
5363
|
+
}
|
|
5364
|
+
@media screen and (max-width: 768px) {
|
|
5365
|
+
.utds-official-website__banner > span:first-child, .utds-official-website__button-title--desktop {
|
|
5366
|
+
display: none;
|
|
5367
|
+
}
|
|
5368
|
+
.utds-official-website__button-title--mobile {
|
|
5369
|
+
display: inline;
|
|
5370
|
+
}
|
|
5371
|
+
.utds-official-website__banner {
|
|
5372
|
+
padding: var(--spacing-3xs) 0;
|
|
5373
|
+
}
|
|
5374
|
+
.utds-official-website__button {
|
|
5375
|
+
width: 100%;
|
|
5376
|
+
justify-content: flex-start !important;
|
|
5377
|
+
padding: 0 var(--spacing-l) !important;
|
|
5378
|
+
}
|
|
5379
|
+
}
|
|
5380
|
+
.utah-design-system.utds-official-website-popup__wrapper {
|
|
5381
|
+
background: var(--gray-dark-color);
|
|
5193
5382
|
color: white;
|
|
5194
5383
|
padding: var(--spacing-l);
|
|
5195
5384
|
position: relative;
|
|
@@ -5243,7 +5432,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5243
5432
|
margin-top: var(--spacing-xs);
|
|
5244
5433
|
}
|
|
5245
5434
|
.utah-design-system .utds-official-website-popup__official-image {
|
|
5246
|
-
width:
|
|
5435
|
+
width: 325px;
|
|
5247
5436
|
font-family: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
|
|
5248
5437
|
font-weight: normal;
|
|
5249
5438
|
font-size: 14px;
|
|
@@ -5252,6 +5441,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5252
5441
|
}
|
|
5253
5442
|
.utah-design-system .utds-official-website-popup__copyright {
|
|
5254
5443
|
font-size: var(--font-size-s);
|
|
5444
|
+
margin-left: 27%;
|
|
5255
5445
|
}
|
|
5256
5446
|
.utds-badge__wrapper {
|
|
5257
5447
|
align-items: center;
|
|
@@ -5260,11 +5450,11 @@ BEM standard: Block, Element, Modifier
|
|
|
5260
5450
|
box-sizing: border-box;
|
|
5261
5451
|
color: white;
|
|
5262
5452
|
display: flex;
|
|
5263
|
-
font-size: var(--font-size-
|
|
5453
|
+
font-size: var(--font-size-xs);
|
|
5264
5454
|
font-weight: var(--font-weight-semi-bold);
|
|
5265
5455
|
height: 15px;
|
|
5266
5456
|
justify-content: center;
|
|
5267
|
-
line-height: var(--font-size-
|
|
5457
|
+
line-height: var(--font-size-xs);
|
|
5268
5458
|
min-width: 15px;
|
|
5269
5459
|
padding: 1px 2px;
|
|
5270
5460
|
position: absolute;
|
|
@@ -5300,10 +5490,10 @@ BEM standard: Block, Element, Modifier
|
|
|
5300
5490
|
.utds-header-mobile-menu.utah-design-system {
|
|
5301
5491
|
transition: opacity 200ms ease;
|
|
5302
5492
|
position: absolute;
|
|
5303
|
-
top:
|
|
5493
|
+
top: 126px;
|
|
5304
5494
|
left: 0;
|
|
5305
5495
|
width: 100%;
|
|
5306
|
-
height: calc(100% -
|
|
5496
|
+
height: calc(100% - 126px);
|
|
5307
5497
|
z-index: 1000;
|
|
5308
5498
|
background-color: transparent;
|
|
5309
5499
|
}
|
|
@@ -5353,7 +5543,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5353
5543
|
content: "";
|
|
5354
5544
|
width: 100%;
|
|
5355
5545
|
height: var(--spacing-2xs);
|
|
5356
|
-
background: var(--primary-color);
|
|
5546
|
+
background: var(--header-primary-color);
|
|
5357
5547
|
display: block;
|
|
5358
5548
|
position: absolute;
|
|
5359
5549
|
bottom: 0;
|
|
@@ -5431,9 +5621,12 @@ BEM standard: Block, Element, Modifier
|
|
|
5431
5621
|
height: 100%;
|
|
5432
5622
|
}
|
|
5433
5623
|
.utds-footer__official-site {
|
|
5434
|
-
font-size: var(--font-size
|
|
5624
|
+
font-size: var(--font-size);
|
|
5435
5625
|
font-weight: var(--font-weight-semi-bold);
|
|
5436
5626
|
}
|
|
5627
|
+
.utds-footer__official-site-wrapper {
|
|
5628
|
+
line-height: var(--spacing);
|
|
5629
|
+
}
|
|
5437
5630
|
.utds-footer__copyright {
|
|
5438
5631
|
font-size: var(--font-size-s);
|
|
5439
5632
|
}
|
|
@@ -5505,6 +5698,185 @@ BEM standard: Block, Element, Modifier
|
|
|
5505
5698
|
flex-direction: column;
|
|
5506
5699
|
}
|
|
5507
5700
|
}
|
|
5701
|
+
.utah-design-system .utds-notifications-drawer .drawer__inner {
|
|
5702
|
+
max-width: 350px;
|
|
5703
|
+
color: var(--gray-color);
|
|
5704
|
+
background: var(--gray-light-color);
|
|
5705
|
+
}
|
|
5706
|
+
.utah-design-system .utds-notifications-drawer .drawer__title {
|
|
5707
|
+
background: white;
|
|
5708
|
+
height: 38px;
|
|
5709
|
+
font-size: 1.5rem;
|
|
5710
|
+
display: flex;
|
|
5711
|
+
align-items: center;
|
|
5712
|
+
gap: 0.5rem;
|
|
5713
|
+
box-sizing: content-box;
|
|
5714
|
+
}
|
|
5715
|
+
.utah-design-system .utds-notifications-drawer .utds-icon-before-alert {
|
|
5716
|
+
font-size: 1.2rem;
|
|
5717
|
+
}
|
|
5718
|
+
.utah-design-system .utds-notifications-drawer__header-buttons {
|
|
5719
|
+
background: var(--gray-light-color);
|
|
5720
|
+
display: flex;
|
|
5721
|
+
gap: var(--spacing-s);
|
|
5722
|
+
padding: var(--spacing);
|
|
5723
|
+
border-bottom: 1px solid var(--gray-3-1-contrast);
|
|
5724
|
+
}
|
|
5725
|
+
.utah-design-system .utds-notifications-drawer__header-buttons .button {
|
|
5726
|
+
padding: 0 var(--spacing);
|
|
5727
|
+
}
|
|
5728
|
+
.utah-design-system .utds-notifications-drawer a.notifications-settings-button {
|
|
5729
|
+
background: var(--gray-color);
|
|
5730
|
+
color: white;
|
|
5731
|
+
fill: white;
|
|
5732
|
+
}
|
|
5733
|
+
.utah-design-system .utds-notifications-drawer a.notifications-settings-button:hover {
|
|
5734
|
+
background-color: var(--gray-dark-color);
|
|
5735
|
+
box-shadow: none;
|
|
5736
|
+
color: white;
|
|
5737
|
+
fill: white;
|
|
5738
|
+
}
|
|
5739
|
+
.utah-design-system .utds-notifications-drawer a.notifications-settings-button:focus-visible {
|
|
5740
|
+
outline: 2px solid var(--notifications-drawer-color);
|
|
5741
|
+
outline-offset: 2px;
|
|
5742
|
+
transition: none;
|
|
5743
|
+
}
|
|
5744
|
+
.utah-design-system .utds-notifications-drawer .utds-notify-list-item:focus, .utah-design-system .utds-notifications-drawer .utds-notify-list-item:focus-visible, .utah-design-system .utds-notifications-drawer [tabindex]:focus, .utah-design-system .utds-notifications-drawer [tabindex]:focus-visible {
|
|
5745
|
+
outline: 3px solid var(--notifications-drawer-color);
|
|
5746
|
+
outline-offset: -3px;
|
|
5747
|
+
border: none;
|
|
5748
|
+
border-bottom: 1px solid var(--gray-3-1-contrast);
|
|
5749
|
+
box-shadow: none;
|
|
5750
|
+
}
|
|
5751
|
+
.utah-design-system .utds-notifications-drawer .button--primary-color {
|
|
5752
|
+
border-color: var(--notifications-drawer-color);
|
|
5753
|
+
color: var(--notifications-drawer-color);
|
|
5754
|
+
}
|
|
5755
|
+
.utah-design-system .utds-notifications-drawer .button--primary-color:hover {
|
|
5756
|
+
background-color: var(--notifications-drawer-color);
|
|
5757
|
+
color: white;
|
|
5758
|
+
}
|
|
5759
|
+
.utah-design-system .utds-notifications-drawer button.button--solid.button--primary-color {
|
|
5760
|
+
background-color: var(--notifications-drawer-color);
|
|
5761
|
+
border-color: var(--notifications-drawer-color);
|
|
5762
|
+
color: white;
|
|
5763
|
+
}
|
|
5764
|
+
.utah-design-system .utds-notifications-drawer button.button--solid.button--primary-color:hover {
|
|
5765
|
+
background-color: var(--notifications-drawer-color-dark);
|
|
5766
|
+
border-color: var(--notifications-drawer-color-dark);
|
|
5767
|
+
}
|
|
5768
|
+
.utah-design-system .utds-notifications__list {
|
|
5769
|
+
margin: 0;
|
|
5770
|
+
padding: 0;
|
|
5771
|
+
list-style-type: none;
|
|
5772
|
+
height: calc(100vh - 123px);
|
|
5773
|
+
overflow: auto;
|
|
5774
|
+
overscroll-behavior: contain;
|
|
5775
|
+
}
|
|
5776
|
+
.utah-design-system .utds-notify-list-item {
|
|
5777
|
+
border-bottom: 1px solid var(--gray-3-1-contrast);
|
|
5778
|
+
display: flex;
|
|
5779
|
+
flex-direction: column;
|
|
5780
|
+
gap: var(--spacing-2xs);
|
|
5781
|
+
padding: 0 0 var(--spacing-s) 0;
|
|
5782
|
+
background: white;
|
|
5783
|
+
}
|
|
5784
|
+
.utah-design-system .utds-notify-list-item:focus-visible, .utah-design-system .utds-notify-list-item:focus {
|
|
5785
|
+
outline: 3px solid var(--notifications-drawer-color);
|
|
5786
|
+
outline-offset: -3px;
|
|
5787
|
+
}
|
|
5788
|
+
.utah-design-system .utds-notify-list-item:hover {
|
|
5789
|
+
background: var(--gray-light-color);
|
|
5790
|
+
cursor: pointer;
|
|
5791
|
+
}
|
|
5792
|
+
.utah-design-system .utds-notify-list-item__header {
|
|
5793
|
+
position: relative;
|
|
5794
|
+
display: flex;
|
|
5795
|
+
align-items: center;
|
|
5796
|
+
justify-content: center;
|
|
5797
|
+
gap: var(--spacing-s);
|
|
5798
|
+
}
|
|
5799
|
+
.utah-design-system .utds-notify-list-item__title {
|
|
5800
|
+
font-size: var(--font-size-m);
|
|
5801
|
+
line-height: 1.1;
|
|
5802
|
+
flex: 1;
|
|
5803
|
+
font-weight: bold;
|
|
5804
|
+
}
|
|
5805
|
+
.utah-design-system .utds-notify-list-item__status {
|
|
5806
|
+
position: absolute;
|
|
5807
|
+
top: 4px;
|
|
5808
|
+
left: 0;
|
|
5809
|
+
height: calc(100% - 4px);
|
|
5810
|
+
width: 6px;
|
|
5811
|
+
border-top-right-radius: 6px;
|
|
5812
|
+
border-bottom-right-radius: 6px;
|
|
5813
|
+
background: var(--notifications-drawer-color);
|
|
5814
|
+
}
|
|
5815
|
+
.utah-design-system .utds-notify-list-item__status--is-read {
|
|
5816
|
+
background: transparent;
|
|
5817
|
+
font-weight: normal;
|
|
5818
|
+
}
|
|
5819
|
+
.utah-design-system .utds-notify-list-item__icon {
|
|
5820
|
+
display: flex;
|
|
5821
|
+
justify-content: center;
|
|
5822
|
+
align-items: center;
|
|
5823
|
+
padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing);
|
|
5824
|
+
}
|
|
5825
|
+
.utah-design-system .utds-notify-list-item__icon span {
|
|
5826
|
+
font-size: 1.5rem;
|
|
5827
|
+
}
|
|
5828
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=error] {
|
|
5829
|
+
color: #ad360d;
|
|
5830
|
+
}
|
|
5831
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=clock] {
|
|
5832
|
+
color: #2e7114;
|
|
5833
|
+
}
|
|
5834
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=info] {
|
|
5835
|
+
color: #175ae2;
|
|
5836
|
+
}
|
|
5837
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=help] {
|
|
5838
|
+
color: #6e6e6e;
|
|
5839
|
+
}
|
|
5840
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=account] {
|
|
5841
|
+
color: #175ae2;
|
|
5842
|
+
}
|
|
5843
|
+
.utah-design-system .utds-notify-list-item__icon span[class*=utds-icon-before]::before {
|
|
5844
|
+
margin: 0;
|
|
5845
|
+
}
|
|
5846
|
+
.utah-design-system .utds-notify-list-item__time {
|
|
5847
|
+
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
|
|
5848
|
+
color: var(--gray-medium-color);
|
|
5849
|
+
}
|
|
5850
|
+
.utah-design-system .utds-notify-list-item__brand-wrapper {
|
|
5851
|
+
display: flex;
|
|
5852
|
+
height: 34px;
|
|
5853
|
+
}
|
|
5854
|
+
.utah-design-system .utds-notify-list-item__brand {
|
|
5855
|
+
max-height: 35px;
|
|
5856
|
+
min-width: 0;
|
|
5857
|
+
}
|
|
5858
|
+
.utah-design-system .utds-notify-list-item__message {
|
|
5859
|
+
padding: 0 var(--spacing);
|
|
5860
|
+
line-height: 1.3;
|
|
5861
|
+
}
|
|
5862
|
+
.utah-design-system .utds-notify-list-item__footer {
|
|
5863
|
+
display: flex;
|
|
5864
|
+
align-items: center;
|
|
5865
|
+
justify-content: space-between;
|
|
5866
|
+
padding: var(--spacing-xs) var(--spacing) 0 var(--spacing);
|
|
5867
|
+
}
|
|
5868
|
+
.utah-design-system .utds-notify-list-item__footer .utds-notify-list-item__link {
|
|
5869
|
+
flex: 0 0 auto;
|
|
5870
|
+
}
|
|
5871
|
+
.utah-design-system .utds-notify-list-item:last-of-type {
|
|
5872
|
+
border-bottom: 1px solid var(--gray-3-1-contrast);
|
|
5873
|
+
}
|
|
5874
|
+
.utah-design-system .utds-notify-list-item--busy-card {
|
|
5875
|
+
padding: 3rem 1rem;
|
|
5876
|
+
}
|
|
5877
|
+
.utah-design-system .utds-notify-list-item--is-read {
|
|
5878
|
+
background-color: var(--gray-light-color);
|
|
5879
|
+
}
|
|
5508
5880
|
/*
|
|
5509
5881
|
############ _utilities.scss ############
|
|
5510
5882
|
utility classes, atomic css
|
|
@@ -5800,4 +6172,4 @@ PRINT SCSS
|
|
|
5800
6172
|
A place to add css temporarily
|
|
5801
6173
|
NOTE: CSS added this this file should eventually be removed or
|
|
5802
6174
|
located to the correct folder/file where it best belongs.
|
|
5803
|
-
*/
|
|
6175
|
+
*//*$vite$:1*/
|