@utahdts/utah-design-system-header 5.0.0 → 5.0.1
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/style.css
CHANGED
|
@@ -3532,7 +3532,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3532
3532
|
position: relative;
|
|
3533
3533
|
z-index: 2500;
|
|
3534
3534
|
}
|
|
3535
|
-
.utah-design-system.main-menu__outer:
|
|
3535
|
+
.utah-design-system.main-menu__outer:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
|
|
3536
3536
|
z-index: 4000;
|
|
3537
3537
|
}
|
|
3538
3538
|
.utah-design-system .main-menu__wrapper {
|
|
@@ -3569,7 +3569,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3569
3569
|
padding: var(--spacing-3xs) var(--spacing);
|
|
3570
3570
|
margin: var(--spacing-xs) 0;
|
|
3571
3571
|
border-radius: 999px;
|
|
3572
|
-
transition:
|
|
3572
|
+
transition: box-shadow var(--timing-quick) ease-in-out;
|
|
3573
3573
|
position: relative;
|
|
3574
3574
|
box-sizing: border-box;
|
|
3575
3575
|
font-size: var(--font-size);
|
|
@@ -3916,6 +3916,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
3916
3916
|
padding: var(--spacing-2xs) var(--spacing);
|
|
3917
3917
|
text-align: left;
|
|
3918
3918
|
text-decoration: none;
|
|
3919
|
+
transition: background-color var(--timing-quick) ease-in-out;
|
|
3919
3920
|
width: 100%;
|
|
3920
3921
|
position: relative;
|
|
3921
3922
|
}
|
|
@@ -5145,6 +5146,15 @@ BEM standard: Block, Element, Modifier
|
|
|
5145
5146
|
.utds-citizen-experience-wrapper .main-menu__search {
|
|
5146
5147
|
margin-right: var(--spacing);
|
|
5147
5148
|
}
|
|
5149
|
+
.utah-design-system .utds-utah-id__button {
|
|
5150
|
+
overflow: hidden;
|
|
5151
|
+
text-overflow: ellipsis;
|
|
5152
|
+
-webkit-line-clamp: 2;
|
|
5153
|
+
line-clamp: 2;
|
|
5154
|
+
display: -webkit-box;
|
|
5155
|
+
-webkit-box-orient: vertical;
|
|
5156
|
+
padding: 0 var(--spacing);
|
|
5157
|
+
}
|
|
5148
5158
|
.utah-design-system .utds-action-items-wrapper {
|
|
5149
5159
|
display: flex;
|
|
5150
5160
|
gap: var(--spacing);
|
|
@@ -5315,6 +5325,15 @@ BEM standard: Block, Element, Modifier
|
|
|
5315
5325
|
font-size: 1.9rem;
|
|
5316
5326
|
}
|
|
5317
5327
|
}
|
|
5328
|
+
@media screen and (max-width: 640px) {
|
|
5329
|
+
.utah-design-system .utds-title-wrapper__logo {
|
|
5330
|
+
flex: 1 0 auto;
|
|
5331
|
+
}
|
|
5332
|
+
.utah-design-system .utds-title-wrapper__title {
|
|
5333
|
+
flex: 1 1 auto;
|
|
5334
|
+
white-space: normal;
|
|
5335
|
+
}
|
|
5336
|
+
}
|
|
5318
5337
|
.utds-official-website__wrapper button {
|
|
5319
5338
|
padding: 0;
|
|
5320
5339
|
border: none;
|
|
@@ -5341,6 +5360,11 @@ BEM standard: Block, Element, Modifier
|
|
|
5341
5360
|
.utds-official-website__wrapper button[aria-expanded=true] svg {
|
|
5342
5361
|
transform: rotate(180deg);
|
|
5343
5362
|
}
|
|
5363
|
+
.utds-official-website__wrapper button:focus-visible {
|
|
5364
|
+
outline: 2px solid #FFF;
|
|
5365
|
+
outline-offset: 2px;
|
|
5366
|
+
border-radius: var(--radius-small1x);
|
|
5367
|
+
}
|
|
5344
5368
|
.utds-official-website__banner {
|
|
5345
5369
|
padding: var(--spacing-3xs) var(--spacing-l);
|
|
5346
5370
|
background: var(--gray-color);
|
|
@@ -5373,6 +5397,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5373
5397
|
}
|
|
5374
5398
|
.utds-official-website__button {
|
|
5375
5399
|
width: 100%;
|
|
5400
|
+
outline-offset: 0 !important;
|
|
5376
5401
|
justify-content: flex-start !important;
|
|
5377
5402
|
padding: 0 var(--spacing-l) !important;
|
|
5378
5403
|
}
|
|
@@ -24,7 +24,7 @@ var e = {
|
|
|
24
24
|
SMALL: "SMALL",
|
|
25
25
|
MEDIUM: "MEDIUM",
|
|
26
26
|
LARGE: "LARGE"
|
|
27
|
-
}, i = "/* @media is never in scope for --variables, so this is the only way to solve this. :-( */\n\n@media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) {\n /* put your media query here for tablet landscape */\n .utah-design-system .search-modal__input[type=text] {\n width: 75vw;\n }\n}\n\n@media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) {\n .utds-header-desktop--hidden {\n display: flex !important;\n }\n .utds-header-mobile--hidden {\n display: none !important;\n }\n .utds-header {\n height: 60px;\n padding: var(--spacing-xs) var(--spacing);\n display: flex;\n justify-content: space-between;\n }\n .utds-
|
|
27
|
+
}, i = "/* @media is never in scope for --variables, so this is the only way to solve this. :-( */\n\n@media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) {\n /* put your media query here for tablet landscape */\n .utah-design-system .search-modal__input[type=text] {\n width: 75vw;\n }\n}\n\n@media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) {\n .utds-header-desktop--hidden {\n display: flex !important;\n }\n .utds-header-mobile--hidden {\n display: none !important;\n }\n .utds-header {\n height: 60px;\n padding: var(--spacing-xs) var(--spacing-s);\n display: flex;\n justify-content: space-between;\n }\n .utds-citizen-experience-wrapper {\n display: none;\n }\n .utds-citizen-experience-wrapper--mobile {\n display: flex;\n }\n .utah-design-system .main-menu__wrapper {\n padding: 0 var(--spacing);\n /* The utah id button is this tall, but without it, the menu doesn't fill the space up to the mobile menu content popup */\n min-height: 46px;\n }\n .utah-design-system .main-menu__nav {\n display: none;\n }\n .utah-design-system.utds-header-mobile-menu,\n .utah-design-system .utds-header-mobile__utah-id-wrapper {\n display: block;\n }\n .utah-design-system .icon-button.main-menu__hamburger,\n .utah-design-system .utds-header-mobile__vip-action-items--left,\n .utah-design-system .utds-header-mobile__vip-action-items--right,\n .utah-design-system .main-menu__search-placeholder {\n display: flex;\n }\n\n .utah-design-system .search-modal__input[type=text] {\n width: 80vw;\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n .utah-design-system .search-modal__button-wrapper {\n right: unset;\n left: 50%;\n transform: translateX(-50%) translateY(110%);\n }\n .utah-design-system .search-modal__button.button--solid.button--primary-color {\n border-color: white;\n width: max-content;\n }\n\n .utah-design-system .utds-official-website-popup__col {\n width: 100%;\n }\n .utah-design-system .utds-official-website-popup__address-bar {\n width: auto;\n background-size: contain;\n background-repeat: no-repeat;\n }\n\n .color-example {\n flex-direction: column;\n &.col-3 > div {\n width: 100%;\n }\n }\n .color-example > div:not(:last-child) {\n margin-bottom: var(--spacing-l);\n }\n\n .search-page {\n .search-modal__form {\n margin-bottom: var(--spacing-4xl);\n }\n .search-modal__input[type=text] {\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n }\n}\n\n@media screen and (max-width: media-size__mobile__PLACEHOLDER) {\n /* put your media query here for mobile */\n}\n";
|
|
28
28
|
//#endregion
|
|
29
29
|
//#region src/js/enumerations/domConstants.js
|
|
30
30
|
function a(e) {
|
|
@@ -16,13 +16,10 @@
|
|
|
16
16
|
}
|
|
17
17
|
.utds-header {
|
|
18
18
|
height: 60px;
|
|
19
|
-
padding: var(--spacing-xs) var(--spacing);
|
|
19
|
+
padding: var(--spacing-xs) var(--spacing-s);
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: space-between;
|
|
22
22
|
}
|
|
23
|
-
.utds-title-wrapper {
|
|
24
|
-
font-size: var(--font-size-xl);
|
|
25
|
-
}
|
|
26
23
|
.utds-citizen-experience-wrapper {
|
|
27
24
|
display: none;
|
|
28
25
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utahdts/utah-design-system-header",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Utah Header for the Utah Design System",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -71,14 +71,14 @@
|
|
|
71
71
|
"@floating-ui/dom": "^1.7.6"
|
|
72
72
|
},
|
|
73
73
|
"devDependencies": {
|
|
74
|
-
"@vitest/ui": "^4.1.
|
|
75
|
-
"jsdom": "^29.
|
|
74
|
+
"@vitest/ui": "^4.1.5",
|
|
75
|
+
"jsdom": "^29.1.1",
|
|
76
76
|
"replace": "1.2.2",
|
|
77
|
-
"sass": "^1.
|
|
77
|
+
"sass": "^1.99.0",
|
|
78
78
|
"tslib": "2.8.1",
|
|
79
|
-
"typescript": "^6.0.
|
|
80
|
-
"vite": "^8.0.
|
|
81
|
-
"vitest": "^4.1.
|
|
79
|
+
"typescript": "^6.0.3",
|
|
80
|
+
"vite": "^8.0.10",
|
|
81
|
+
"vitest": "^4.1.5"
|
|
82
82
|
},
|
|
83
83
|
"type": "module"
|
|
84
84
|
}
|
|
@@ -16,13 +16,10 @@
|
|
|
16
16
|
}
|
|
17
17
|
.utds-header {
|
|
18
18
|
height: 60px;
|
|
19
|
-
padding: var(--spacing-xs) var(--spacing);
|
|
19
|
+
padding: var(--spacing-xs) var(--spacing-s);
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: space-between;
|
|
22
22
|
}
|
|
23
|
-
.utds-title-wrapper {
|
|
24
|
-
font-size: var(--font-size-xl);
|
|
25
|
-
}
|
|
26
23
|
.utds-citizen-experience-wrapper {
|
|
27
24
|
display: none;
|
|
28
25
|
}
|