@solexllc/usx 0.1.3 → 0.1.4
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/package.json +2 -2
- package/src/components/_header.scss +23 -22
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solexllc/usx",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Compiled USWDS-based component styles for USX.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"src"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@solexllc/usx-theme": "0.2.
|
|
35
|
+
"@solexllc/usx-theme": "0.2.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"sass": "^1.98.0"
|
|
@@ -44,20 +44,6 @@
|
|
|
44
44
|
overflow: unset;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.usx-nav {
|
|
48
|
-
@media (width < 64em) {
|
|
49
|
-
@if $usx-header-nav-bg-mobile {
|
|
50
|
-
background-color: $usx-header-nav-bg-mobile;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@media (width >=64em) {
|
|
55
|
-
@if $usx-header-nav-bg {
|
|
56
|
-
background-color: $usx-header-nav-bg;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
47
|
// Keeps utilityContent and the search box on one row regardless of the
|
|
62
48
|
// parent's own flex-direction (USWDS's .usa-nav__secondary stacks its
|
|
63
49
|
// children in a column at desktop).
|
|
@@ -69,16 +55,31 @@
|
|
|
69
55
|
|
|
70
56
|
}
|
|
71
57
|
|
|
72
|
-
:
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
58
|
+
// Extended layout only: its nav is a full-width bar under the header (desktop)
|
|
59
|
+
// or an off-canvas drawer (mobile), so it's a distinct surface worth theming.
|
|
60
|
+
// The basic layout's nav sits inline in the header bar and inherits its
|
|
61
|
+
// background. Background is themeable at every width — unlike vendor (which
|
|
62
|
+
// paints no background at desktop and a hardcoded opaque white at mobile),
|
|
63
|
+
// USX lets a theme's configured nav color show through the mobile drawer
|
|
64
|
+
// too, so a dark theme's drawer doesn't revert to an unstyled white panel.
|
|
65
|
+
//
|
|
66
|
+
// Note the extended layout renders <header> and <nav> as siblings (see
|
|
67
|
+
// Header.tsx), so this can't be nested under .usx-header.
|
|
68
|
+
:has(> .usa-header--extended) .usx-nav {
|
|
69
|
+
@media (width < 64em) {
|
|
70
|
+
@if $usx-header-nav-bg-mobile {
|
|
71
|
+
background-color: $usx-header-nav-bg-mobile;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
79
74
|
|
|
75
|
+
@media (width >=64em) {
|
|
76
|
+
@if $usx-header-nav-bg {
|
|
77
|
+
background-color: $usx-header-nav-bg;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
80
81
|
|
|
81
|
-
// USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
|
|
82
|
+
:has(> .usa-header--extended) { // USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
|
|
82
83
|
// hover/current-bar rules to this same desktop breakpoint (the nav is an
|
|
83
84
|
// off-canvas mobile drawer below it, styled by vendor's plain .usa-nav
|
|
84
85
|
// mobile rules instead) — mirror that scoping here, or this desktop-only
|