@solexllc/usx 0.1.5 → 0.1.6
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/_accordion.scss +1 -3
- package/src/components/_alert.scss +14 -42
- package/src/components/_attribution.scss +1 -3
- package/src/components/_avatar-group.scss +1 -3
- package/src/components/_banner.scss +5 -15
- package/src/components/_block.scss +1 -3
- package/src/components/_branding.scss +2 -6
- package/src/components/_breadcrumb.scss +5 -15
- package/src/components/_button-group.scss +1 -3
- package/src/components/_button.scss +15 -45
- package/src/components/_carousel.scss +6 -18
- package/src/components/_checkbox.scss +7 -21
- package/src/components/_clickable.scss +4 -12
- package/src/components/_collection.scss +2 -6
- package/src/components/_combobox.scss +7 -19
- package/src/components/_file-input.scss +15 -43
- package/src/components/_footer.scss +23 -69
- package/src/components/_form-group.scss +5 -15
- package/src/components/_header.scss +30 -90
- package/src/components/_hero.scss +94 -54
- package/src/components/_icon-list.scss +1 -3
- package/src/components/_in-page-nav.scss +9 -27
- package/src/components/_input.scss +17 -51
- package/src/components/_language-selector.scss +3 -9
- package/src/components/_layout.scss +1 -3
- package/src/components/_link.scss +7 -21
- package/src/components/_misc-banner.scss +1 -3
- package/src/components/_modal.scss +4 -12
- package/src/components/_page.scss +2 -6
- package/src/components/_pagination.scss +13 -37
- package/src/components/_process-list.scss +4 -12
- package/src/components/_radio-buttons.scss +6 -18
- package/src/components/_section.scss +2 -6
- package/src/components/_select.scss +17 -51
- package/src/components/_sidenav.scss +10 -30
- package/src/components/_site-alert.scss +5 -15
- package/src/components/_step-indicator.scss +16 -48
- package/src/components/_summary-box.scss +5 -15
- package/src/components/_table.scss +2 -6
- package/src/components/_task-list.scss +6 -18
- package/src/components/_text-area.scss +15 -45
- package/src/components/_theme-picker.scss +2 -6
- package/src/components/_tooltip.scss +1 -3
|
@@ -9,13 +9,9 @@
|
|
|
9
9
|
/* ---------------------------------- */
|
|
10
10
|
|
|
11
11
|
.usa-file-input__target {
|
|
12
|
-
|
|
13
|
-
border-radius: $usx-input-radius;
|
|
14
|
-
}
|
|
12
|
+
border-radius: usx-when($usx-input-radius);
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
border-color: $usx-input-border;
|
|
18
|
-
}
|
|
14
|
+
border-color: usx-when($usx-input-border);
|
|
19
15
|
}
|
|
20
16
|
|
|
21
17
|
/* ---------------------------------- */
|
|
@@ -25,28 +21,20 @@
|
|
|
25
21
|
/* ---------------------------------- */
|
|
26
22
|
|
|
27
23
|
.usa-form-group--error .usa-file-input__target {
|
|
28
|
-
|
|
29
|
-
border-color: $usx-input-error-border;
|
|
30
|
-
}
|
|
24
|
+
border-color: usx-when($usx-input-error-border);
|
|
31
25
|
|
|
32
|
-
|
|
33
|
-
border-width: $usx-file-input-border-width;
|
|
34
|
-
}
|
|
26
|
+
border-width: usx-when($usx-file-input-border-width);
|
|
35
27
|
}
|
|
36
28
|
|
|
37
29
|
.usa-file-input__target.has-invalid-file {
|
|
38
30
|
// For some reason, they use accent warm here. Very odd.
|
|
39
|
-
|
|
40
|
-
border-color: $usx-color-accent-warm;
|
|
41
|
-
}
|
|
31
|
+
border-color: usx-when($usx-color-accent-warm);
|
|
42
32
|
}
|
|
43
33
|
|
|
44
34
|
// USWDS bakes this message to a fixed "secondary-dark" red (#b50909)
|
|
45
35
|
// regardless of theme — reuse the same error color as .usa-error-message.
|
|
46
36
|
.has-invalid-file .usa-file-input__accepted-files-message {
|
|
47
|
-
|
|
48
|
-
color: $usx-color-error;
|
|
49
|
-
}
|
|
37
|
+
color: usx-when($usx-color-error);
|
|
50
38
|
}
|
|
51
39
|
|
|
52
40
|
/* ---------------------------------- */
|
|
@@ -103,26 +91,18 @@
|
|
|
103
91
|
// so it doesn't track a themed link color otherwise — reuse the same
|
|
104
92
|
// usx-link variables/states rather than introducing a separate token.
|
|
105
93
|
.usa-file-input__choose {
|
|
106
|
-
|
|
107
|
-
color: $usx-link-text;
|
|
108
|
-
}
|
|
94
|
+
color: usx-when($usx-link-text);
|
|
109
95
|
|
|
110
96
|
&:hover {
|
|
111
|
-
|
|
112
|
-
color: $usx-link-text-hover;
|
|
113
|
-
}
|
|
97
|
+
color: usx-when($usx-link-text-hover);
|
|
114
98
|
}
|
|
115
99
|
|
|
116
100
|
&:active {
|
|
117
|
-
|
|
118
|
-
color: $usx-link-text-active;
|
|
119
|
-
}
|
|
101
|
+
color: usx-when($usx-link-text-active);
|
|
120
102
|
}
|
|
121
103
|
|
|
122
104
|
&:visited {
|
|
123
|
-
|
|
124
|
-
color: $usx-link-text-visited;
|
|
125
|
-
}
|
|
105
|
+
color: usx-when($usx-link-text-visited);
|
|
126
106
|
}
|
|
127
107
|
}
|
|
128
108
|
|
|
@@ -130,7 +110,7 @@
|
|
|
130
110
|
|
|
131
111
|
/* Managed-multiple file list */
|
|
132
112
|
|
|
133
|
-
/* (VA.gov-style per-file delete rows, see FileInput.
|
|
113
|
+
/* (VA.gov-style per-file delete rows, see FileInput.tsx) */
|
|
134
114
|
|
|
135
115
|
/* ---------------------------------- */
|
|
136
116
|
|
|
@@ -154,17 +134,11 @@
|
|
|
154
134
|
margin-bottom: 0.5rem;
|
|
155
135
|
padding: 0.5rem 1rem;
|
|
156
136
|
|
|
157
|
-
|
|
158
|
-
border-radius: $usx-input-radius;
|
|
159
|
-
}
|
|
137
|
+
border-radius: usx-when($usx-input-radius);
|
|
160
138
|
|
|
161
|
-
|
|
162
|
-
border-color: $usx-file-input-item-border;
|
|
163
|
-
}
|
|
139
|
+
border-color: usx-when($usx-file-input-item-border);
|
|
164
140
|
|
|
165
|
-
|
|
166
|
-
border-width: $usx-file-input-item-border-width;
|
|
167
|
-
}
|
|
141
|
+
border-width: usx-when($usx-file-input-item-border-width);
|
|
168
142
|
}
|
|
169
143
|
|
|
170
144
|
// Info stays on the left and shrinks (long names wrap) so the Delete button
|
|
@@ -189,9 +163,7 @@
|
|
|
189
163
|
}
|
|
190
164
|
|
|
191
165
|
.usx-file-input__file-size {
|
|
192
|
-
|
|
193
|
-
color: $usx-color-base;
|
|
194
|
-
}
|
|
166
|
+
color: usx-when($usx-color-base);
|
|
195
167
|
}
|
|
196
168
|
|
|
197
169
|
.usx-file-input__delete-button {
|
|
@@ -2,41 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
/* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
|
|
4
4
|
.usx-footer {
|
|
5
|
-
|
|
6
|
-
background-color: $usx-footer-bg;
|
|
7
|
-
}
|
|
5
|
+
background-color: usx-when($usx-footer-bg);
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
border-top: $usx-footer-border-top;
|
|
11
|
-
}
|
|
7
|
+
border-top: usx-when($usx-footer-border-top);
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
color: $usx-footer-text;
|
|
15
|
-
}
|
|
9
|
+
color: usx-when($usx-footer-text);
|
|
16
10
|
|
|
17
11
|
// ── Nav columns (big footer) ──────────────────────────────────────────────
|
|
18
12
|
&__nav-column {
|
|
19
13
|
.usa-footer__primary-link {
|
|
20
|
-
|
|
21
|
-
color: $usx-footer-heading-text;
|
|
22
|
-
}
|
|
14
|
+
color: usx-when($usx-footer-heading-text);
|
|
23
15
|
|
|
24
16
|
&.usa-footer__primary-link--button {
|
|
25
|
-
|
|
26
|
-
background-color: $usx-footer-bg;
|
|
27
|
-
}
|
|
17
|
+
background-color: usx-when($usx-footer-bg);
|
|
28
18
|
}
|
|
29
19
|
}
|
|
30
20
|
|
|
31
21
|
.usa-footer__secondary-link a {
|
|
32
|
-
|
|
33
|
-
color: $usx-footer-secondary-link-text;
|
|
34
|
-
}
|
|
22
|
+
color: usx-when($usx-footer-secondary-link-text);
|
|
35
23
|
|
|
36
24
|
&:hover {
|
|
37
|
-
|
|
38
|
-
color: $usx-footer-secondary-link-text-hover;
|
|
39
|
-
}
|
|
25
|
+
color: usx-when($usx-footer-secondary-link-text-hover);
|
|
40
26
|
}
|
|
41
27
|
}
|
|
42
28
|
}
|
|
@@ -44,15 +30,11 @@
|
|
|
44
30
|
// ── Sign-up form ─────────────────────────────────────────────────────────
|
|
45
31
|
&__sign-up {
|
|
46
32
|
.usa-sign-up__heading {
|
|
47
|
-
|
|
48
|
-
color: $usx-footer-heading-text;
|
|
49
|
-
}
|
|
33
|
+
color: usx-when($usx-footer-heading-text);
|
|
50
34
|
}
|
|
51
35
|
|
|
52
36
|
.usa-button {
|
|
53
|
-
|
|
54
|
-
background-color: $usx-footer-sign-up-button-bg;
|
|
55
|
-
}
|
|
37
|
+
background-color: usx-when($usx-footer-sign-up-button-bg);
|
|
56
38
|
}
|
|
57
39
|
}
|
|
58
40
|
|
|
@@ -60,9 +42,7 @@
|
|
|
60
42
|
&__logo {
|
|
61
43
|
.usa-footer__logo-heading,
|
|
62
44
|
a.usa-footer__logo-heading {
|
|
63
|
-
|
|
64
|
-
color: $usx-footer-heading-secondary-text;
|
|
65
|
-
}
|
|
45
|
+
color: usx-when($usx-footer-heading-secondary-text);
|
|
66
46
|
|
|
67
47
|
text-decoration: none;
|
|
68
48
|
}
|
|
@@ -70,22 +50,14 @@
|
|
|
70
50
|
|
|
71
51
|
// ── Social links ─────────────────────────────────────────────────────────
|
|
72
52
|
.usa-social-link {
|
|
73
|
-
|
|
74
|
-
color: $usx-footer-link-text;
|
|
75
|
-
}
|
|
53
|
+
color: usx-when($usx-footer-link-text);
|
|
76
54
|
|
|
77
|
-
|
|
78
|
-
border-radius: $usx-footer-social-radius;
|
|
79
|
-
}
|
|
55
|
+
border-radius: usx-when($usx-footer-social-radius);
|
|
80
56
|
|
|
81
57
|
&:hover {
|
|
82
|
-
|
|
83
|
-
background-color: $usx-footer-social-bg-hover;
|
|
84
|
-
}
|
|
58
|
+
background-color: usx-when($usx-footer-social-bg-hover);
|
|
85
59
|
|
|
86
|
-
|
|
87
|
-
border: $usx-footer-social-hover-border;
|
|
88
|
-
}
|
|
60
|
+
border: usx-when($usx-footer-social-hover-border);
|
|
89
61
|
|
|
90
62
|
@if $usx-footer-social-hover-outline {
|
|
91
63
|
outline: $usx-footer-social-hover-outline;
|
|
@@ -94,9 +66,7 @@
|
|
|
94
66
|
}
|
|
95
67
|
|
|
96
68
|
.usa-social-link__icon {
|
|
97
|
-
|
|
98
|
-
filter: $usx-footer-social-icon-filter;
|
|
99
|
-
}
|
|
69
|
+
filter: usx-when($usx-footer-social-icon-filter);
|
|
100
70
|
}
|
|
101
71
|
}
|
|
102
72
|
|
|
@@ -107,20 +77,14 @@
|
|
|
107
77
|
}
|
|
108
78
|
|
|
109
79
|
.usa-footer__contact-heading {
|
|
110
|
-
|
|
111
|
-
color: $usx-footer-heading-secondary-text;
|
|
112
|
-
}
|
|
80
|
+
color: usx-when($usx-footer-heading-secondary-text);
|
|
113
81
|
}
|
|
114
82
|
|
|
115
83
|
a {
|
|
116
|
-
|
|
117
|
-
color: $usx-footer-link-text;
|
|
118
|
-
}
|
|
84
|
+
color: usx-when($usx-footer-link-text);
|
|
119
85
|
|
|
120
86
|
&:hover {
|
|
121
|
-
|
|
122
|
-
color: $usx-footer-link-text-hover;
|
|
123
|
-
}
|
|
87
|
+
color: usx-when($usx-footer-link-text-hover);
|
|
124
88
|
}
|
|
125
89
|
}
|
|
126
90
|
}
|
|
@@ -129,32 +93,22 @@
|
|
|
129
93
|
.usa-footer__secondary-section {
|
|
130
94
|
background-color: unset;
|
|
131
95
|
|
|
132
|
-
|
|
133
|
-
border-top: $usx-footer-secondary-section-border-top;
|
|
134
|
-
}
|
|
96
|
+
border-top: usx-when($usx-footer-secondary-section-border-top);
|
|
135
97
|
}
|
|
136
98
|
|
|
137
99
|
.usa-footer__primary-section {
|
|
138
|
-
|
|
139
|
-
background-color: $usx-footer-primary-bg;
|
|
140
|
-
}
|
|
100
|
+
background-color: usx-when($usx-footer-primary-bg);
|
|
141
101
|
|
|
142
|
-
|
|
143
|
-
border-top: $usx-footer-primary-section-border-top;
|
|
144
|
-
}
|
|
102
|
+
border-top: usx-when($usx-footer-primary-section-border-top);
|
|
145
103
|
}
|
|
146
104
|
|
|
147
105
|
// ── Primary-section nav links ────────────────────────────────────────────
|
|
148
106
|
.usa-footer__nav {
|
|
149
107
|
a.usa-footer__primary-link {
|
|
150
|
-
|
|
151
|
-
color: $usx-footer-link-text;
|
|
152
|
-
}
|
|
108
|
+
color: usx-when($usx-footer-link-text);
|
|
153
109
|
|
|
154
110
|
&:hover {
|
|
155
|
-
|
|
156
|
-
color: $usx-footer-link-text-hover;
|
|
157
|
-
}
|
|
111
|
+
color: usx-when($usx-footer-link-text-hover);
|
|
158
112
|
}
|
|
159
113
|
}
|
|
160
114
|
}
|
|
@@ -4,29 +4,19 @@
|
|
|
4
4
|
.usa-label,
|
|
5
5
|
.usa-legend,
|
|
6
6
|
.usa-fieldset > legend {
|
|
7
|
-
|
|
8
|
-
color: $usx-text-ink;
|
|
9
|
-
}
|
|
7
|
+
color: usx-when($usx-text-ink);
|
|
10
8
|
}
|
|
11
9
|
|
|
12
10
|
.usa-hint {
|
|
13
|
-
|
|
14
|
-
color: $usx-text-subtle;
|
|
15
|
-
}
|
|
11
|
+
color: usx-when($usx-text-subtle);
|
|
16
12
|
}
|
|
17
13
|
|
|
18
14
|
.usx-form-group.usa-form-group--error {
|
|
19
|
-
|
|
20
|
-
border-color: $usx-form-group-error-text;
|
|
21
|
-
}
|
|
15
|
+
border-color: usx-when($usx-form-group-error-text);
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
border-width: $usx-form-group-error-border-width;
|
|
25
|
-
}
|
|
17
|
+
border-width: usx-when($usx-form-group-error-border-width);
|
|
26
18
|
}
|
|
27
19
|
|
|
28
20
|
.usa-error-message {
|
|
29
|
-
|
|
30
|
-
color: $usx-color-error;
|
|
31
|
-
}
|
|
21
|
+
color: usx-when($usx-color-error);
|
|
32
22
|
}
|
|
@@ -3,21 +3,13 @@
|
|
|
3
3
|
/* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
|
|
4
4
|
|
|
5
5
|
.usx-header {
|
|
6
|
-
|
|
7
|
-
background-color: $usx-header-bg;
|
|
8
|
-
}
|
|
6
|
+
background-color: usx-when($usx-header-bg);
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
color: $usx-header-text;
|
|
12
|
-
}
|
|
8
|
+
color: usx-when($usx-header-text);
|
|
13
9
|
|
|
14
|
-
|
|
15
|
-
border-bottom: $usx-header-border-bottom;
|
|
16
|
-
}
|
|
10
|
+
border-bottom: usx-when($usx-header-border-bottom);
|
|
17
11
|
|
|
18
|
-
|
|
19
|
-
border-top: $usx-header-border-top;
|
|
20
|
-
}
|
|
12
|
+
border-top: usx-when($usx-header-border-top);
|
|
21
13
|
|
|
22
14
|
&::after {
|
|
23
15
|
display: none;
|
|
@@ -28,14 +20,10 @@
|
|
|
28
20
|
|
|
29
21
|
.usa-navbar {
|
|
30
22
|
.usa-menu-btn {
|
|
31
|
-
|
|
32
|
-
background-color: $usx-header-menu-btn-bg;
|
|
33
|
-
}
|
|
23
|
+
background-color: usx-when($usx-header-menu-btn-bg);
|
|
34
24
|
|
|
35
25
|
&:hover {
|
|
36
|
-
|
|
37
|
-
background-color: $usx-header-menu-btn-bg-hover;
|
|
38
|
-
}
|
|
26
|
+
background-color: usx-when($usx-header-menu-btn-bg-hover);
|
|
39
27
|
}
|
|
40
28
|
}
|
|
41
29
|
}
|
|
@@ -66,17 +54,13 @@
|
|
|
66
54
|
// Header.tsx), so neither rule can be nested under .usx-header.
|
|
67
55
|
.usx-nav {
|
|
68
56
|
@media (width < 64em) {
|
|
69
|
-
|
|
70
|
-
background-color: $usx-header-nav-bg-mobile;
|
|
71
|
-
}
|
|
57
|
+
background-color: usx-when($usx-header-nav-bg-mobile);
|
|
72
58
|
}
|
|
73
59
|
}
|
|
74
60
|
|
|
75
61
|
:has(> .usa-header--extended) .usx-nav {
|
|
76
62
|
@media (width >=64em) {
|
|
77
|
-
|
|
78
|
-
background-color: $usx-header-nav-bg;
|
|
79
|
-
}
|
|
63
|
+
background-color: usx-when($usx-header-nav-bg);
|
|
80
64
|
}
|
|
81
65
|
}
|
|
82
66
|
|
|
@@ -89,9 +73,7 @@
|
|
|
89
73
|
// of the drawer's own).
|
|
90
74
|
@media (width >=64em) {
|
|
91
75
|
.usx-nav {
|
|
92
|
-
|
|
93
|
-
border-bottom: $usx-header-nav-border-bottom;
|
|
94
|
-
}
|
|
76
|
+
border-bottom: usx-when($usx-header-nav-border-bottom);
|
|
95
77
|
|
|
96
78
|
@if $usx-header-nav-border-top {
|
|
97
79
|
border-top: $usx-header-nav-border-top;
|
|
@@ -182,14 +164,10 @@
|
|
|
182
164
|
|
|
183
165
|
// Vendor hardcodes this hover background at mobile only (and resets
|
|
184
166
|
// it to transparent again at desktop) — match that scoping.
|
|
185
|
-
|
|
186
|
-
background-color: $usx-header-nav-link-bg-hover;
|
|
187
|
-
}
|
|
167
|
+
background-color: usx-when($usx-header-nav-link-bg-hover);
|
|
188
168
|
|
|
189
169
|
&>span::after {
|
|
190
|
-
|
|
191
|
-
background-color: $usx-header-nav-link-text-hover-mobile;
|
|
192
|
-
}
|
|
170
|
+
background-color: usx-when($usx-header-nav-link-text-hover-mobile);
|
|
193
171
|
}
|
|
194
172
|
}
|
|
195
173
|
}
|
|
@@ -199,9 +177,7 @@
|
|
|
199
177
|
color: $usx-header-nav-link-text-hover;
|
|
200
178
|
|
|
201
179
|
&>span::after {
|
|
202
|
-
|
|
203
|
-
background-color: $usx-header-nav-link-text-hover;
|
|
204
|
-
}
|
|
180
|
+
background-color: usx-when($usx-header-nav-link-text-hover);
|
|
205
181
|
}
|
|
206
182
|
}
|
|
207
183
|
}
|
|
@@ -212,9 +188,7 @@
|
|
|
212
188
|
|
|
213
189
|
// Vendor hardcodes this hover background at mobile only; desktop
|
|
214
190
|
// links get no hover background at all.
|
|
215
|
-
|
|
216
|
-
background-color: $usx-header-nav-link-bg-hover;
|
|
217
|
-
}
|
|
191
|
+
background-color: usx-when($usx-header-nav-link-bg-hover);
|
|
218
192
|
}
|
|
219
193
|
|
|
220
194
|
@media (width >=64em) {
|
|
@@ -235,14 +209,10 @@
|
|
|
235
209
|
// drawer link tokens, not the desktop primary-nav ones.
|
|
236
210
|
// .usa-icon fills via `currentColor`, so tint it with `color`, not
|
|
237
211
|
// `background-color` (which would draw a solid box behind the icon).
|
|
238
|
-
|
|
239
|
-
color: $usx-header-nav-link-text-mobile;
|
|
240
|
-
}
|
|
212
|
+
color: usx-when($usx-header-nav-link-text-mobile);
|
|
241
213
|
|
|
242
214
|
&:hover {
|
|
243
|
-
|
|
244
|
-
color: $usx-header-nav-link-text-hover-mobile;
|
|
245
|
-
}
|
|
215
|
+
color: usx-when($usx-header-nav-link-text-hover-mobile);
|
|
246
216
|
}
|
|
247
217
|
}
|
|
248
218
|
|
|
@@ -294,14 +264,10 @@
|
|
|
294
264
|
&:not(.usa-nav__primary button:hover,
|
|
295
265
|
.usa-nav__primary > .usa-nav__primary-item > a:hover,
|
|
296
266
|
.usa-current) {
|
|
297
|
-
|
|
298
|
-
color: $usx-header-nav-link-text-mobile;
|
|
299
|
-
}
|
|
267
|
+
color: usx-when($usx-header-nav-link-text-mobile);
|
|
300
268
|
|
|
301
269
|
&>span::after {
|
|
302
|
-
|
|
303
|
-
background-color: $usx-header-nav-link-text-mobile;
|
|
304
|
-
}
|
|
270
|
+
background-color: usx-when($usx-header-nav-link-text-mobile);
|
|
305
271
|
}
|
|
306
272
|
}
|
|
307
273
|
}
|
|
@@ -312,14 +278,10 @@
|
|
|
312
278
|
.usa-nav__primary button:hover,
|
|
313
279
|
.usa-nav__primary > .usa-nav__primary-item > a:hover,
|
|
314
280
|
.usa-current) {
|
|
315
|
-
|
|
316
|
-
color: $usx-header-nav-link-text;
|
|
317
|
-
}
|
|
281
|
+
color: usx-when($usx-header-nav-link-text);
|
|
318
282
|
|
|
319
283
|
&>span::after {
|
|
320
|
-
|
|
321
|
-
background-color: $usx-header-nav-link-text;
|
|
322
|
-
}
|
|
284
|
+
background-color: usx-when($usx-header-nav-link-text);
|
|
323
285
|
}
|
|
324
286
|
}
|
|
325
287
|
}
|
|
@@ -329,9 +291,7 @@
|
|
|
329
291
|
// exists in vendor's desktop rules).
|
|
330
292
|
@media (width >=64em) {
|
|
331
293
|
&.usa-current {
|
|
332
|
-
|
|
333
|
-
color: $usx-header-nav-link-text;
|
|
334
|
-
}
|
|
294
|
+
color: usx-when($usx-header-nav-link-text);
|
|
335
295
|
}
|
|
336
296
|
}
|
|
337
297
|
|
|
@@ -340,17 +300,13 @@
|
|
|
340
300
|
// desktop bottom-bar treatment at this width.
|
|
341
301
|
@media (width < 64em) {
|
|
342
302
|
&.usa-current {
|
|
343
|
-
|
|
344
|
-
color: $usx-header-nav-link-text-hover-mobile;
|
|
345
|
-
}
|
|
303
|
+
color: usx-when($usx-header-nav-link-text-hover-mobile);
|
|
346
304
|
|
|
347
305
|
font-weight: 700;
|
|
348
306
|
position: relative;
|
|
349
307
|
|
|
350
308
|
&::after {
|
|
351
|
-
|
|
352
|
-
background-color: $usx-header-nav-link-text-hover-mobile;
|
|
353
|
-
}
|
|
309
|
+
background-color: usx-when($usx-header-nav-link-text-hover-mobile);
|
|
354
310
|
|
|
355
311
|
border-radius: 99rem;
|
|
356
312
|
content: "";
|
|
@@ -409,15 +365,11 @@
|
|
|
409
365
|
}
|
|
410
366
|
|
|
411
367
|
&+.usa-nav__submenu {
|
|
412
|
-
|
|
413
|
-
background-color: $usx-header-nav-submenu-bg;
|
|
414
|
-
}
|
|
368
|
+
background-color: usx-when($usx-header-nav-submenu-bg);
|
|
415
369
|
|
|
416
370
|
&::before,
|
|
417
371
|
&::after {
|
|
418
|
-
|
|
419
|
-
background-color: $usx-header-nav-submenu-bg;
|
|
420
|
-
}
|
|
372
|
+
background-color: usx-when($usx-header-nav-submenu-bg);
|
|
421
373
|
}
|
|
422
374
|
}
|
|
423
375
|
}
|
|
@@ -425,14 +377,10 @@
|
|
|
425
377
|
}
|
|
426
378
|
|
|
427
379
|
.usa-nav__secondary-item>a {
|
|
428
|
-
|
|
429
|
-
color: $usx-header-secondary-link-text;
|
|
430
|
-
}
|
|
380
|
+
color: usx-when($usx-header-secondary-link-text);
|
|
431
381
|
|
|
432
382
|
&:hover {
|
|
433
|
-
|
|
434
|
-
color: $usx-header-secondary-link-text-hover;
|
|
435
|
-
}
|
|
383
|
+
color: usx-when($usx-header-secondary-link-text-hover);
|
|
436
384
|
}
|
|
437
385
|
}
|
|
438
386
|
|
|
@@ -456,24 +404,16 @@
|
|
|
456
404
|
// Header.tsx), so the rule above never reaches them — left alone they
|
|
457
405
|
// fall back to vendor's hardcoded gray/blue instead of the active theme.
|
|
458
406
|
.usa-nav__submenu-item>a {
|
|
459
|
-
|
|
460
|
-
color: $usx-header-nav-link-text;
|
|
461
|
-
}
|
|
407
|
+
color: usx-when($usx-header-nav-link-text);
|
|
462
408
|
|
|
463
409
|
&:hover {
|
|
464
|
-
|
|
465
|
-
color: $usx-header-nav-link-text-hover;
|
|
466
|
-
}
|
|
410
|
+
color: usx-when($usx-header-nav-link-text-hover);
|
|
467
411
|
|
|
468
|
-
|
|
469
|
-
background-color: $usx-header-nav-link-bg-hover;
|
|
470
|
-
}
|
|
412
|
+
background-color: usx-when($usx-header-nav-link-bg-hover);
|
|
471
413
|
}
|
|
472
414
|
|
|
473
415
|
&.usa-current {
|
|
474
|
-
|
|
475
|
-
color: $usx-header-nav-link-text-hover;
|
|
476
|
-
}
|
|
416
|
+
color: usx-when($usx-header-nav-link-text-hover);
|
|
477
417
|
|
|
478
418
|
font-weight: 700;
|
|
479
419
|
}
|