Skip to content

Commit 92f3e4d

Browse files
committed
Merge main; resolve conflicts
2 parents c264d35 + c88850d commit 92f3e4d

File tree

5 files changed

+321
-214
lines changed

5 files changed

+321
-214
lines changed

blocks/header/header.css

Lines changed: 153 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
/* stylelint-disable selector-class-pattern */
22

3+
:root {
4+
--megamenu-item-width: 300px;
5+
--megamenu-panel-width: 900px;
6+
--megamenu-panel-height: 500px;
7+
}
8+
39
/* header and nav layout */
410
header .nav-wrapper {
511
background-color: var(--background-color);
@@ -62,6 +68,7 @@ header nav .nav-hamburger {
6268
}
6369

6470
header nav .nav-hamburger button {
71+
cursor: pointer;
6572
height: 22px;
6673
margin: 0;
6774
border: 0;
@@ -142,6 +149,13 @@ header nav .nav-brand a {
142149
letter-spacing: var(--type-headline-1-letter-spacing);
143150
}
144151

152+
li.nav-drop img {
153+
max-width: var(--megamenu-item-width);
154+
width: 100%;
155+
height: auto;
156+
object-fit: contain;
157+
}
158+
145159
header nav .nav-brand img {
146160
width: 128px;
147161
height: auto;
@@ -170,7 +184,7 @@ header nav .nav-sections ul {
170184

171185
header nav .nav-sections ul > li,
172186
header nav .nav-sections ul > li > a {
173-
font-weight: 500;
187+
font-weight: 500;
174188
}
175189

176190
header nav .nav-sections ul > li > ul {
@@ -194,28 +208,13 @@ header nav .nav-sections ul > li > ul > li {
194208

195209
header nav .nav-sections .nav-drop {
196210
position: relative;
197-
padding-right: 16px;
211+
padding: 0 16px;
198212
cursor: pointer;
213+
border-radius: 4px;
199214
}
200215

201-
header nav .nav-sections .nav-drop::after {
202-
content: '';
203-
display: inline-block;
204-
position: absolute;
205-
top: 0.4rem;
206-
right: 0.2rem;
207-
transform: rotate(135deg);
208-
width: 0.6rem;
209-
height: 0.6rem;
210-
border: 2px solid currentcolor;
211-
border-radius: 0 1px 0 0;
212-
border-width: 2px 2px 0 0;
213-
}
214-
215-
header nav .nav-sections .nav-drop[aria-expanded='true']::after {
216-
top: unset;
217-
bottom: 0.5em;
218-
transform: rotate(315deg);
216+
header nav .nav-sections .nav-drop[aria-expanded='true'] {
217+
background-color: var(--color-neutral-200);
219218
}
220219

221220
header nav .nav-sections ul {
@@ -224,25 +223,33 @@ header nav .nav-sections ul > li > ul > li {
224223
margin: 0;
225224
}
226225

227-
header nav .nav-sections .default-content-wrapper > ul > li {
228-
flex: 0 1 auto;
226+
header nav .nav-sections .default-content-wrapper > ul > li > ul {
227+
display: none;
229228
position: relative;
230229
}
231230

232-
header nav .nav-sections .default-content-wrapper > ul > li > ul {
233-
display: none;
231+
header nav .nav-sections .nav-drop[aria-expanded='true'] > ul {
232+
height: var(--megamenu-panel-height);
233+
flex-flow: column wrap;
234+
}
235+
236+
237+
header nav .nav-sections .default-content-wrapper > ul > li {
238+
flex: 0 1 auto;
234239
position: relative;
235240
}
236241

242+
/* This is the style for the dropdown */
237243
header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
238-
display: block;
244+
display: flex;
239245
position: absolute;
240246
left: -24px;
241-
width: 200px;
247+
width: var(--megamenu-panel-width);
242248
top: 150%;
243249
padding: 16px;
244-
background-color: var(--color-neutral-500);
250+
background-color: var(--color-neutral-50);
245251
white-space: initial;
252+
overflow-x: scroll;
246253
}
247254

248255
header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
@@ -285,6 +292,8 @@ header nav .nav-tools {
285292
height: 100%;
286293
gap: var(--spacing-small);
287294
align-items: center;
295+
background: var(--background-color);
296+
z-index: 3;
288297
}
289298

290299
header nav .nav-tools-wrapper > button {
@@ -461,10 +470,10 @@ header .nav-search-input .search_autocomplete .popover-container {
461470

462471
.dropdown-wrapper.nav-tools-wrapper .nav-auth-menu-panel .authenticated-user-menu li > a:hover,
463472
.dropdown-wrapper.nav-tools-wrapper
464-
.nav-auth-menu-panel
465-
.authenticated-user-menu
466-
li
467-
> .logoutButton:hover {
473+
.nav-auth-menu-panel
474+
.authenticated-user-menu
475+
li
476+
> .logoutButton:hover {
468477
background-color: lightgray;
469478
}
470479

@@ -494,3 +503,116 @@ header .nav-search-input .search_autocomplete .popover-container {
494503
margin-top: 20px;
495504
z-index: 3;
496505
}
506+
507+
ul li.nav-drop > ul > li > ul {
508+
margin: 1em 0 0 .5em;
509+
}
510+
511+
main.overlay {
512+
width: 100%;
513+
height: 100%;
514+
inset: 0;
515+
background-color: rgb(0 0 0 / 50%);
516+
z-index: 2;
517+
}
518+
519+
header nav .nav-sections .active-submenu {
520+
display: none;
521+
}
522+
523+
@media (width < 900px) {
524+
header {
525+
position: relative;
526+
}
527+
528+
header nav {
529+
position: relative;
530+
}
531+
532+
header nav[aria-expanded='true'] {
533+
overflow-x: hidden;
534+
}
535+
536+
header nav[aria-expanded='true'] .nav-tools {
537+
background: var(--background-color);
538+
bottom: 0;
539+
height: auto;
540+
left: 0;
541+
overflow: hidden;
542+
padding: 0.7em 1.5em;
543+
position: fixed;
544+
width: 100%;
545+
}
546+
547+
header nav[aria-expanded='true'] .nav-tools-panel--show {
548+
position: fixed;
549+
}
550+
551+
header nav .nav-sections {
552+
position: relative;
553+
}
554+
555+
header nav .nav-sections ul li {
556+
line-height: 3em;
557+
}
558+
559+
header nav .nav-sections ul > li > ul,
560+
header nav .nav-sections ul > li > ul > li {
561+
width: 100%;
562+
}
563+
564+
header nav .nav-sections ul > li.nav-drop {
565+
cursor: pointer;
566+
}
567+
568+
header nav .nav-sections ul > li.nav-drop::after {
569+
content: '\276F';
570+
position: absolute;
571+
right: 3vw;
572+
}
573+
574+
header nav .nav-sections ul > li.nav-drop ul {
575+
display: none;
576+
}
577+
578+
header nav .nav-sections .active-submenu {
579+
background: var(--background-color);
580+
display: none;
581+
height: 100%;
582+
position: absolute;
583+
top: 30px;
584+
width: 100%;
585+
}
586+
587+
header nav .nav-sections .active-submenu button::before {
588+
content: '\276E';
589+
margin-right: .5em;
590+
}
591+
592+
header nav .nav-sections .active-submenu button::after {
593+
content: '\2715';
594+
position: absolute;
595+
right: 8vw;
596+
}
597+
598+
header nav .nav-sections .active-submenu button {
599+
background: none;
600+
border: 0;
601+
border-bottom: 1px solid var(--color-neutral-500);
602+
cursor: pointer;
603+
left: -2em;
604+
padding: 0 2em 1em;
605+
position: relative;
606+
text-align: left;
607+
width: 102vw;
608+
}
609+
610+
header nav .nav-sections .active-submenu ul > li.nav-drop::after {
611+
content: none;
612+
}
613+
614+
header nav .nav-sections .active-submenu.visible,
615+
header nav .nav-sections .active-submenu.visible ul > li.nav-drop ul {
616+
display: block;
617+
}
618+
}

0 commit comments

Comments
 (0)