@claralight-design/abweb-navbar 0.1.4 → 0.2.0
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/NavHeader.module.css +25 -6
- package/NavHeader.tsx +3 -0
- package/package.json +1 -1
package/NavHeader.module.css
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
30
30
|
align-items: center;
|
|
31
31
|
overflow: hidden;
|
|
32
|
-
padding: 3px 6px;
|
|
32
|
+
padding: 3px 6px 6px;
|
|
33
33
|
border-radius: 48px;
|
|
34
34
|
gap: 12px;
|
|
35
35
|
transform: translateY(0);
|
|
@@ -41,12 +41,14 @@
|
|
|
41
41
|
corner-shape: unset;
|
|
42
42
|
will-change: transform;
|
|
43
43
|
box-sizing: border-box;
|
|
44
|
+
|
|
45
|
+
--backdrop-filter: blur(12px) saturate(1.05);
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
.blurEffect {
|
|
47
49
|
position: absolute;
|
|
48
50
|
inset: -10px 0 auto;
|
|
49
|
-
height:
|
|
51
|
+
height: 72px;
|
|
50
52
|
width: 120vw;
|
|
51
53
|
z-index: 0;
|
|
52
54
|
pointer-events: none;
|
|
@@ -190,7 +192,6 @@
|
|
|
190
192
|
border: none;
|
|
191
193
|
border-radius: 999px;
|
|
192
194
|
background: transparent;
|
|
193
|
-
color: color-mix(in srgb, var(--color-text) 72%, transparent);
|
|
194
195
|
display: inline-flex;
|
|
195
196
|
align-items: center;
|
|
196
197
|
justify-content: center;
|
|
@@ -203,22 +204,28 @@
|
|
|
203
204
|
font-family: inherit;
|
|
204
205
|
font-size: 15px;
|
|
205
206
|
font-weight: 600;
|
|
207
|
+
color: var(--color-text);
|
|
208
|
+
opacity: 0.7;
|
|
206
209
|
}
|
|
207
210
|
|
|
208
211
|
.navLink:hover,
|
|
209
212
|
.logotypeWrapper:hover {
|
|
210
213
|
background: color-mix(in srgb, var(--color-text) 8%, transparent);
|
|
211
|
-
|
|
214
|
+
opacity: 1;
|
|
215
|
+
backdrop-filter: var(--backdrop-filter);
|
|
212
216
|
}
|
|
213
217
|
|
|
214
218
|
.navLink:active,
|
|
215
219
|
.logotypeWrapper:active {
|
|
220
|
+
opacity: 0.55;
|
|
216
221
|
transform: scale(0.96);
|
|
217
222
|
}
|
|
218
223
|
|
|
219
224
|
.navLinkActive {
|
|
220
225
|
color: var(--color-text);
|
|
221
226
|
background: color-mix(in srgb, var(--color-text) 10%, transparent);
|
|
227
|
+
opacity: 0.8;
|
|
228
|
+
backdrop-filter: var(--backdrop-filter);
|
|
222
229
|
}
|
|
223
230
|
|
|
224
231
|
.desktopLabel {
|
|
@@ -229,7 +236,7 @@
|
|
|
229
236
|
}
|
|
230
237
|
|
|
231
238
|
.desktopLabel svg {
|
|
232
|
-
max-height:
|
|
239
|
+
max-height: 12px;
|
|
233
240
|
}
|
|
234
241
|
|
|
235
242
|
.mobileMenu {
|
|
@@ -373,6 +380,14 @@
|
|
|
373
380
|
color: var(--color-text);
|
|
374
381
|
}
|
|
375
382
|
|
|
383
|
+
.dividingLine {
|
|
384
|
+
height: 12px;
|
|
385
|
+
width: 2px;
|
|
386
|
+
border-radius: 2px;
|
|
387
|
+
background-color: var(--color-text);
|
|
388
|
+
opacity: 0.4;
|
|
389
|
+
}
|
|
390
|
+
|
|
376
391
|
@media (min-width: 960px) {
|
|
377
392
|
.desktopNav {
|
|
378
393
|
display: flex;
|
|
@@ -409,6 +424,10 @@
|
|
|
409
424
|
justify-content: center;
|
|
410
425
|
width: 100%;
|
|
411
426
|
}
|
|
427
|
+
|
|
428
|
+
.dividingLine {
|
|
429
|
+
display: none;
|
|
430
|
+
}
|
|
412
431
|
}
|
|
413
432
|
|
|
414
433
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -421,4 +440,4 @@
|
|
|
421
440
|
.menuItemMarker {
|
|
422
441
|
transition: none;
|
|
423
442
|
}
|
|
424
|
-
}
|
|
443
|
+
}
|
package/NavHeader.tsx
CHANGED
|
@@ -281,6 +281,8 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
281
281
|
</div>
|
|
282
282
|
|
|
283
283
|
{hasNavItems && (
|
|
284
|
+
<>
|
|
285
|
+
<span className={styles.dividingLine} />
|
|
284
286
|
<nav
|
|
285
287
|
className={styles.desktopNav}
|
|
286
288
|
aria-label={resolvedLabels.menu}
|
|
@@ -311,6 +313,7 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
311
313
|
})}
|
|
312
314
|
</div>
|
|
313
315
|
</nav>
|
|
316
|
+
</>
|
|
314
317
|
)}
|
|
315
318
|
</div>
|
|
316
319
|
</header>
|