@conduction/components 2.2.53 → 2.2.54

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 (8) hide show
  1. package/README.md +213 -212
  2. package/lib/components/card/cardHeader/CardHeader.module.css +54 -52
  3. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -315
  4. package/package.json +50 -50
  5. package/src/components/card/cardHeader/CardHeader.module.css +54 -52
  6. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -80
  7. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -315
  8. package/tsconfig.json +21 -21
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -1,315 +1,315 @@
1
- :root {
2
- --conduction-primary-top-nav-color: #4a4a4a;
3
- --conduction-primary-top-nav-background-color: #ffffff;
4
- --conduction-primary-top-nav-toggle-icon-size: 24px;
5
- --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
-
7
- --conduction-primary-top-nav-item-padding: 18px;
8
- --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
- /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
10
-
11
- /* --conduction-primary-top-nav-current-background-color: #ffffff; */
12
- /* --conduction-primary-top-nav-current-color: #4376fc; */
13
- /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
14
- /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
15
-
16
- /* --conduction-primary-top-nav-hover-color: #4376fc; */
17
- /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
18
- /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
19
-
20
- /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
21
- /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
22
- /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
23
- /* --conduction-primary-top-nav-dropdown-border-style: solid; */
24
- /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
25
- /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
26
- /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
27
- /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
28
-
29
- /* --conduction-primary-top-nav-dropdown-item-border-bottom-width: 4px;
30
- --conduction-primary-top-nav-dropdown-item-border-bottom-style: solid;
31
- --conduction-primary-top-nav-dropdown-item-border-bottom-color: #4376fc; */
32
-
33
- /* --conduction-primary-top-nav-container-padding-block-end: 18px; */
34
- /* --conduction-primary-top-nav-container-padding-block-start: 18px; */
35
- /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */
36
- /* --conduction-primary-top-nav-container-padding-inline-start: 18px; */
37
-
38
- /* --conduction-primary-top-nav-list-gap: var(--skeleton-size-2x); */
39
- }
40
-
41
- .container {
42
- width: 100%;
43
- padding-block-end: var(--conduction-primary-top-nav-container-padding-block-end);
44
- padding-block-start: var(--conduction-primary-top-nav-container-padding-block-start);
45
- padding-inline-end: var(--conduction-primary-top-nav-container-padding-inline-end);
46
- padding-inline-start: var(--conduction-primary-top-nav-container-padding-inline-start);
47
- }
48
-
49
- .menuToggleContainer {
50
- width: 100%;
51
- display: flex;
52
- align-items: center;
53
- justify-content: space-between;
54
- }
55
-
56
- .menuToggleContainer > .menuToggle {
57
- all: unset;
58
- font-size: var(--conduction-primary-top-nav-toggle-icon-size);
59
- padding: var(--conduction-primary-top-nav-mobile-logo-padding);
60
- color: var(--conduction-primary-top-nav-color);
61
- }
62
-
63
- .menuToggleContainer > .menuToggle:hover {
64
- cursor: pointer;
65
- }
66
-
67
- .primary {
68
- display: none;
69
- }
70
-
71
- .primary.isOpen {
72
- display: block;
73
- }
74
-
75
- .menuToggleContainer {
76
- width: 100%;
77
- }
78
-
79
- .primary {
80
- font-weight: 500;
81
- width: 100%;
82
- background-color: var(--conduction-primary-top-nav-background-color);
83
- }
84
-
85
- .primary:hover {
86
- cursor: pointer;
87
- }
88
-
89
- .ul {
90
- margin: unset;
91
- padding-inline-start: unset;
92
- align-items: center;
93
- max-height: 80vh;
94
- overflow-y: scroll;
95
- border-color: var(--conduction-primary-top-nav-list-border-color);
96
- border-style: var(--conduction-primary-top-nav-list-border-style);
97
- border-width: var(--conduction-primary-top-nav-list-border-width);
98
- gap: var(--conduction-primary-top-nav-list-gap);
99
- }
100
-
101
- .li {
102
- list-style-type: none;
103
- display: block;
104
- position: relative;
105
- transition: var(--conduction-primary-top-nav-item-transition);
106
- padding-inline-start: var(--conduction-primary-top-nav-item-padding);
107
- padding-inline-end: var(--conduction-primary-top-nav-item-padding);
108
- padding-block-start: var(--conduction-primary-top-nav-item-padding);
109
- padding-block-end: var(--conduction-primary-top-nav-item-padding);
110
- border-radius: var(--conduction-primary-top-nav-item-border-radius);
111
- border-color: var(--conduction-primary-top-nav-item-border-color);
112
- border-style: var(--conduction-primary-top-nav-item-border-style);
113
- border-width: var(--conduction-primary-top-nav-item-border-width);
114
- }
115
-
116
- .li:hover {
117
- background-color: var(--conduction-primary-top-nav-hover-background-color);
118
- box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
119
- }
120
-
121
- .current {
122
- background-color: var(--conduction-primary-top-nav-current-background-color);
123
- box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
124
- }
125
-
126
- .current:hover {
127
- box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
128
- }
129
-
130
- .current:hover > .currentLink {
131
- color: var(--conduction-primary-top-nav-hover-color) !important;
132
- }
133
-
134
- .currentLink {
135
- color: var(--conduction-primary-top-nav-current-color) !important;
136
- font-weight: var(--conduction-primary-top-nav-current-font-weight);
137
- }
138
-
139
- .currentLink svg path {
140
- fill: var(--conduction-primary-top-nav-current-color) !important;
141
- }
142
-
143
- .dropdownCurrent {
144
- background-color: var(--conduction-primary-top-nav-dropdown-current-background-color, var(--conduction-primary-top-nav-current-background-color));
145
- box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
146
- }
147
-
148
- .dropdownCurrent:hover {
149
- box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow) !important;
150
- }
151
-
152
- .dropdownCurrent:hover > .dropdownCurrentLink {
153
- color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
154
- font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight) !important;
155
- }
156
-
157
- .dropdownCurrentLink {
158
- color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
159
- font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight);
160
- }
161
-
162
- .dropdownCurrentLink svg path {
163
- fill: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
164
- }
165
-
166
- .mobileLink {
167
- margin-block-end: 18px;
168
- }
169
- .primary .link {
170
- text-decoration: none;
171
- text-overflow: ellipsis;
172
- display: block;
173
- overflow: hidden;
174
- max-width: 100%;
175
- white-space: nowrap;
176
- }
177
-
178
- .primary .link:not(.currentLink) {
179
- display: block;
180
- color: var(--conduction-primary-top-nav-color);
181
- }
182
-
183
- .primary .link:not(.currentLink) svg path {
184
- fill: var(--conduction-primary-top-nav-color);
185
- }
186
-
187
- .primary .li:hover > .link {
188
- color: var(--conduction-primary-top-nav-hover-color);
189
- font-weight: var(--conduction-primary-top-nav-hover-font-weight);
190
- }
191
-
192
- .primary .li:hover svg path {
193
- fill: var(--conduction-primary-top-nav-hover-color);
194
- }
195
-
196
- .link > * {
197
- margin-inline-end: 8px;
198
- }
199
-
200
- .dropdown {
201
- left: 0;
202
- top: 100%;
203
- padding: 0;
204
- width: 100%;
205
- display: none;
206
- list-style-type: none;
207
- background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
208
- width: fit-content;
209
- max-width: 200px;
210
- }
211
-
212
- .dropdownOverflow {
213
- display: none;
214
- max-height: 430px;
215
- overflow-y: scroll;
216
- border: 1px solid rgba(0, 0, 0, 0.2);
217
- }
218
-
219
- .dropdown.isOpen {
220
- display: block;
221
- }
222
-
223
- .li.current {
224
- box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
225
- }
226
-
227
- .primary .dropdown .li .link {
228
- color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
229
- }
230
-
231
- .primary .dropdown .li:hover .link {
232
- color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
233
- font-weight: var(--conduction-primary-top-nav-dropdown-hover-font-weight);
234
- }
235
-
236
- .dropdown .li:hover {
237
- background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
238
- box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
239
- }
240
-
241
- .dropdown > li {
242
- padding-inline-start: 18px;
243
- font-weight: var(--conduction-primary-top-nav-dropdown-font-weight);
244
- border-bottom-width: var(--conduction-primary-top-nav-dropdown-item-border-bottom-width);
245
- border-bottom-style: var(--conduction-primary-top-nav-dropdown-item-border-bottom-style);
246
- border-bottom-color: var(--conduction-primary-top-nav-dropdown-item-border-bottom-color);
247
- }
248
-
249
- .toggleIcon {
250
- margin-inline-start: var(--skeleton-size-xs);
251
- transition: transform 100ms ease-in-out;
252
- }
253
-
254
- .toggleIcon.isOpen {
255
- transform: rotate(90deg);
256
- transition: transform 100ms ease-in-out;
257
- }
258
-
259
- .label {
260
- overflow: hidden;
261
- max-width: 37ch;
262
- text-overflow: ellipsis;
263
- white-space: nowrap;
264
- }
265
-
266
- .label > :not(:last-child) {
267
- margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
268
- }
269
-
270
- .li:hover .dropdown {
271
- display: block;
272
- z-index: 1;
273
- }
274
-
275
- :not(.dropdown) .li.current:hover {
276
- box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
277
- font-weight: var(--conduction-primary-top-nav-current-hover-font-weight, var(--conduction-primary-top-nav-current-font-weight));
278
- }
279
-
280
- @media only screen and (min-width: 992px) {
281
- .container {
282
- width: fit-content;
283
- }
284
-
285
- .primary {
286
- display: block;
287
- width: fit-content;
288
- }
289
-
290
- .ul {
291
- display: flex;
292
- overflow-y: unset;
293
- }
294
-
295
- .dropdown {
296
- position: absolute;
297
- display: none;
298
- border-width: var(--conduction-primary-top-nav-dropdown-border-width);
299
- border-style: var(--conduction-primary-top-nav-dropdown-border-style);
300
- border-color: var(--conduction-primary-top-nav-dropdown-border-color);
301
- border-top: none;
302
- }
303
-
304
- .menuToggleContainer {
305
- display: none;
306
- }
307
-
308
- .mobileLink {
309
- margin-block-end: unset;
310
- }
311
-
312
- .li.current {
313
- box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
314
- }
315
- }
1
+ :root {
2
+ --conduction-primary-top-nav-color: #4a4a4a;
3
+ --conduction-primary-top-nav-background-color: #ffffff;
4
+ --conduction-primary-top-nav-toggle-icon-size: 24px;
5
+ --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
+
7
+ --conduction-primary-top-nav-item-padding: 18px;
8
+ --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
+ /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
10
+
11
+ /* --conduction-primary-top-nav-current-background-color: #ffffff; */
12
+ /* --conduction-primary-top-nav-current-color: #4376fc; */
13
+ /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
14
+ /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
15
+
16
+ /* --conduction-primary-top-nav-hover-color: #4376fc; */
17
+ /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
18
+ /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
19
+
20
+ /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
21
+ /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
22
+ /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
23
+ /* --conduction-primary-top-nav-dropdown-border-style: solid; */
24
+ /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
25
+ /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
26
+ /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
27
+ /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
28
+
29
+ /* --conduction-primary-top-nav-dropdown-item-border-bottom-width: 4px;
30
+ --conduction-primary-top-nav-dropdown-item-border-bottom-style: solid;
31
+ --conduction-primary-top-nav-dropdown-item-border-bottom-color: #4376fc; */
32
+
33
+ /* --conduction-primary-top-nav-container-padding-block-end: 18px; */
34
+ /* --conduction-primary-top-nav-container-padding-block-start: 18px; */
35
+ /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */
36
+ /* --conduction-primary-top-nav-container-padding-inline-start: 18px; */
37
+
38
+ /* --conduction-primary-top-nav-list-gap: var(--skeleton-size-2x); */
39
+ }
40
+
41
+ .container {
42
+ width: 100%;
43
+ padding-block-end: var(--conduction-primary-top-nav-container-padding-block-end);
44
+ padding-block-start: var(--conduction-primary-top-nav-container-padding-block-start);
45
+ padding-inline-end: var(--conduction-primary-top-nav-container-padding-inline-end);
46
+ padding-inline-start: var(--conduction-primary-top-nav-container-padding-inline-start);
47
+ }
48
+
49
+ .menuToggleContainer {
50
+ width: 100%;
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+ }
55
+
56
+ .menuToggleContainer > .menuToggle {
57
+ all: unset;
58
+ font-size: var(--conduction-primary-top-nav-toggle-icon-size);
59
+ padding: var(--conduction-primary-top-nav-mobile-logo-padding);
60
+ color: var(--conduction-primary-top-nav-color);
61
+ }
62
+
63
+ .menuToggleContainer > .menuToggle:hover {
64
+ cursor: pointer;
65
+ }
66
+
67
+ .primary {
68
+ display: none;
69
+ }
70
+
71
+ .primary.isOpen {
72
+ display: block;
73
+ }
74
+
75
+ .menuToggleContainer {
76
+ width: 100%;
77
+ }
78
+
79
+ .primary {
80
+ font-weight: 500;
81
+ width: 100%;
82
+ background-color: var(--conduction-primary-top-nav-background-color);
83
+ }
84
+
85
+ .primary:hover {
86
+ cursor: pointer;
87
+ }
88
+
89
+ .ul {
90
+ margin: unset;
91
+ padding-inline-start: unset;
92
+ align-items: center;
93
+ max-height: 80vh;
94
+ overflow-y: scroll;
95
+ border-color: var(--conduction-primary-top-nav-list-border-color);
96
+ border-style: var(--conduction-primary-top-nav-list-border-style);
97
+ border-width: var(--conduction-primary-top-nav-list-border-width);
98
+ gap: var(--conduction-primary-top-nav-list-gap);
99
+ }
100
+
101
+ .li {
102
+ list-style-type: none;
103
+ display: block;
104
+ position: relative;
105
+ transition: var(--conduction-primary-top-nav-item-transition);
106
+ padding-inline-start: var(--conduction-primary-top-nav-item-padding);
107
+ padding-inline-end: var(--conduction-primary-top-nav-item-padding);
108
+ padding-block-start: var(--conduction-primary-top-nav-item-padding);
109
+ padding-block-end: var(--conduction-primary-top-nav-item-padding);
110
+ border-radius: var(--conduction-primary-top-nav-item-border-radius);
111
+ border-color: var(--conduction-primary-top-nav-item-border-color);
112
+ border-style: var(--conduction-primary-top-nav-item-border-style);
113
+ border-width: var(--conduction-primary-top-nav-item-border-width);
114
+ }
115
+
116
+ .li:hover {
117
+ background-color: var(--conduction-primary-top-nav-hover-background-color);
118
+ box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
119
+ }
120
+
121
+ .current {
122
+ background-color: var(--conduction-primary-top-nav-current-background-color);
123
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
124
+ }
125
+
126
+ .current:hover {
127
+ box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
128
+ }
129
+
130
+ .current:hover > .currentLink {
131
+ color: var(--conduction-primary-top-nav-hover-color) !important;
132
+ }
133
+
134
+ .currentLink {
135
+ color: var(--conduction-primary-top-nav-current-color) !important;
136
+ font-weight: var(--conduction-primary-top-nav-current-font-weight);
137
+ }
138
+
139
+ .currentLink svg path {
140
+ fill: var(--conduction-primary-top-nav-current-color) !important;
141
+ }
142
+
143
+ .dropdownCurrent {
144
+ background-color: var(--conduction-primary-top-nav-dropdown-current-background-color, var(--conduction-primary-top-nav-current-background-color));
145
+ box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
146
+ }
147
+
148
+ .dropdownCurrent:hover {
149
+ box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow) !important;
150
+ }
151
+
152
+ .dropdownCurrent:hover > .dropdownCurrentLink {
153
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
154
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight) !important;
155
+ }
156
+
157
+ .dropdownCurrentLink {
158
+ color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
159
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight);
160
+ }
161
+
162
+ .dropdownCurrentLink svg path {
163
+ fill: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
164
+ }
165
+
166
+ .mobileLink {
167
+ margin-block-end: 18px;
168
+ }
169
+ .primary .link {
170
+ text-decoration: none;
171
+ text-overflow: ellipsis;
172
+ display: block;
173
+ overflow: hidden;
174
+ max-width: 100%;
175
+ white-space: nowrap;
176
+ }
177
+
178
+ .primary .link:not(.currentLink) {
179
+ display: block;
180
+ color: var(--conduction-primary-top-nav-color);
181
+ }
182
+
183
+ .primary .link:not(.currentLink) svg path {
184
+ fill: var(--conduction-primary-top-nav-color);
185
+ }
186
+
187
+ .primary .li:hover > .link {
188
+ color: var(--conduction-primary-top-nav-hover-color);
189
+ font-weight: var(--conduction-primary-top-nav-hover-font-weight);
190
+ }
191
+
192
+ .primary .li:hover svg path {
193
+ fill: var(--conduction-primary-top-nav-hover-color);
194
+ }
195
+
196
+ .link > * {
197
+ margin-inline-end: 8px;
198
+ }
199
+
200
+ .dropdown {
201
+ left: 0;
202
+ top: 100%;
203
+ padding: 0;
204
+ width: 100%;
205
+ display: none;
206
+ list-style-type: none;
207
+ background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
208
+ width: fit-content;
209
+ max-width: 200px;
210
+ }
211
+
212
+ .dropdownOverflow {
213
+ display: none;
214
+ max-height: 430px;
215
+ overflow-y: scroll;
216
+ border: 1px solid rgba(0, 0, 0, 0.2);
217
+ }
218
+
219
+ .dropdown.isOpen {
220
+ display: block;
221
+ }
222
+
223
+ .li.current {
224
+ box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
225
+ }
226
+
227
+ .primary .dropdown .li .link {
228
+ color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
229
+ }
230
+
231
+ .primary .dropdown .li:hover .link {
232
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
233
+ font-weight: var(--conduction-primary-top-nav-dropdown-hover-font-weight);
234
+ }
235
+
236
+ .dropdown .li:hover {
237
+ background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
238
+ box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
239
+ }
240
+
241
+ .dropdown > li {
242
+ padding-inline-start: 18px;
243
+ font-weight: var(--conduction-primary-top-nav-dropdown-font-weight);
244
+ border-bottom-width: var(--conduction-primary-top-nav-dropdown-item-border-bottom-width);
245
+ border-bottom-style: var(--conduction-primary-top-nav-dropdown-item-border-bottom-style);
246
+ border-bottom-color: var(--conduction-primary-top-nav-dropdown-item-border-bottom-color);
247
+ }
248
+
249
+ .toggleIcon {
250
+ margin-inline-start: var(--skeleton-size-xs);
251
+ transition: transform 100ms ease-in-out;
252
+ }
253
+
254
+ .toggleIcon.isOpen {
255
+ transform: rotate(90deg);
256
+ transition: transform 100ms ease-in-out;
257
+ }
258
+
259
+ .label {
260
+ overflow: hidden;
261
+ max-width: 37ch;
262
+ text-overflow: ellipsis;
263
+ white-space: nowrap;
264
+ }
265
+
266
+ .label > :not(:last-child) {
267
+ margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
268
+ }
269
+
270
+ .li:hover .dropdown {
271
+ display: block;
272
+ z-index: 1;
273
+ }
274
+
275
+ :not(.dropdown) .li.current:hover {
276
+ box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
277
+ font-weight: var(--conduction-primary-top-nav-current-hover-font-weight, var(--conduction-primary-top-nav-current-font-weight));
278
+ }
279
+
280
+ @media only screen and (min-width: 992px) {
281
+ .container {
282
+ width: fit-content;
283
+ }
284
+
285
+ .primary {
286
+ display: block;
287
+ width: fit-content;
288
+ }
289
+
290
+ .ul {
291
+ display: flex;
292
+ overflow-y: unset;
293
+ }
294
+
295
+ .dropdown {
296
+ position: absolute;
297
+ display: none;
298
+ border-width: var(--conduction-primary-top-nav-dropdown-border-width);
299
+ border-style: var(--conduction-primary-top-nav-dropdown-border-style);
300
+ border-color: var(--conduction-primary-top-nav-dropdown-border-color);
301
+ border-top: none;
302
+ }
303
+
304
+ .menuToggleContainer {
305
+ display: none;
306
+ }
307
+
308
+ .mobileLink {
309
+ margin-block-end: unset;
310
+ }
311
+
312
+ .li.current {
313
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
314
+ }
315
+ }
package/tsconfig.json CHANGED
@@ -1,21 +1,21 @@
1
- {
2
- "compilerOptions": {
3
- "declaration": true,
4
- "outDir": "./lib",
5
- "target": "esnext",
6
- "lib": ["dom", "esnext"],
7
- "jsx": "react-jsx",
8
- "module": "esnext",
9
- "moduleResolution": "node",
10
- "esModuleInterop": true,
11
- "forceConsistentCasingInFileNames": true,
12
- "strict": true,
13
- "skipLibCheck": true
14
- },
15
- "hooks": ["copy-files"],
16
- "include": ["src", "src/**/*.css"],
17
- "exclude": [
18
- "**/__tests__/*",
19
- "./lib/**/*"
20
- ]
21
- }
1
+ {
2
+ "compilerOptions": {
3
+ "declaration": true,
4
+ "outDir": "./lib",
5
+ "target": "esnext",
6
+ "lib": ["dom", "esnext"],
7
+ "jsx": "react-jsx",
8
+ "module": "esnext",
9
+ "moduleResolution": "node",
10
+ "esModuleInterop": true,
11
+ "forceConsistentCasingInFileNames": true,
12
+ "strict": true,
13
+ "skipLibCheck": true
14
+ },
15
+ "hooks": ["copy-files"],
16
+ "include": ["src", "src/**/*.css"],
17
+ "exclude": [
18
+ "**/__tests__/*",
19
+ "./lib/**/*"
20
+ ]
21
+ }