@solexllc/usx 0.1.4 → 0.1.5

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/_header.scss +13 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solexllc/usx",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "Compiled USWDS-based component styles for USX.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/_header.scss CHANGED
@@ -55,23 +55,24 @@
55
55
 
56
56
  }
57
57
 
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.
58
+ // .usx-nav is two different surfaces depending on width. Below 64em it is the
59
+ // off-canvas drawer in EVERY layout — vendor paints it a hardcoded opaque
60
+ // white, so a dark theme's drawer would otherwise revert to an unstyled white
61
+ // panel. At desktop it's only a distinct surface in the extended layout (a
62
+ // full-width bar under the header); the basic layout's nav sits inline in the
63
+ // header bar and must inherit the header background instead.
65
64
  //
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 {
65
+ // The extended layout renders <header> and <nav> as siblings (see
66
+ // Header.tsx), so neither rule can be nested under .usx-header.
67
+ .usx-nav {
69
68
  @media (width < 64em) {
70
69
  @if $usx-header-nav-bg-mobile {
71
70
  background-color: $usx-header-nav-bg-mobile;
72
71
  }
73
72
  }
73
+ }
74
74
 
75
+ :has(> .usa-header--extended) .usx-nav {
75
76
  @media (width >=64em) {
76
77
  @if $usx-header-nav-bg {
77
78
  background-color: $usx-header-nav-bg;
@@ -79,7 +80,8 @@
79
80
  }
80
81
  }
81
82
 
82
- :has(> .usa-header--extended) { // USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
83
+ :has(> .usa-header--extended) {
84
+ // USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
83
85
  // hover/current-bar rules to this same desktop breakpoint (the nav is an
84
86
  // off-canvas mobile drawer below it, styled by vendor's plain .usa-nav
85
87
  // mobile rules instead) — mirror that scoping here, or this desktop-only