navigation.scss (10242B)
1 2 // Navigation 3 4 // Mobile menu toggles 5 .menu-button-container { 6 display: none; 7 justify-content: space-between; 8 position: absolute; 9 right: 0; 10 padding-top: calc(0.5 * var(--global--spacing-vertical)); 11 padding-bottom: calc(0.25 * var(--global--spacing-vertical)); 12 13 @include media(mobile-only) { 14 display: flex; 15 } 16 17 // Override specificity from default button styles. 18 #primary-mobile-menu { 19 display: flex; 20 margin-left: auto; 21 padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); 22 font-size: var(--primary-nav--font-size-button); 23 font-weight: var(--primary-nav--font-weight-button); 24 background-color: transparent; 25 border: none; 26 color: var(--primary-nav--color-link); 27 28 .dropdown-icon { 29 display: flex; 30 align-items: center; 31 32 .svg-icon { 33 margin-left: calc(0.25 * var(--global--spacing-unit)); 34 } 35 36 // Menu icon is off-center vertically to prevent blurry pixels. 37 &.open .svg-icon { 38 position: relative; 39 top: -1px; 40 } 41 42 &.close { 43 display: none; 44 } 45 } 46 47 &[aria-expanded*="true"] { 48 49 .dropdown-icon { 50 51 &.open { 52 display: none; 53 } 54 55 &.close { 56 display: flex; 57 58 .has-logo.has-title-and-tagline & { 59 animation-name: twentytwentyone-close-button-transition; 60 animation-duration: 0.3s; 61 } 62 } 63 } 64 } 65 } 66 67 // When the menu is open, hide the close button and show the hide button. 68 .primary-navigation-open & { 69 width: 100%; 70 z-index: 500; 71 background-color: var(--global--color-background); 72 73 #primary-mobile-menu { 74 position: static; 75 } 76 } 77 } 78 79 .primary-navigation { 80 position: absolute; 81 top: var(--global--admin-bar--height); 82 right: 0; 83 color: var(--primary-nav--color-text); 84 font-size: var(--primary-nav--font-size); 85 line-height: 1.15; 86 margin-top: 0; 87 margin-bottom: 0; 88 89 // Mobile menu closed 90 > .primary-menu-container { 91 position: fixed; 92 visibility: hidden; 93 opacity: 0; 94 top: 0; 95 right: 0; 96 bottom: 0; 97 left: 0; 98 // Height of the menu-button-container using font size, line height, and total padding, plus 5px so the focus of the first item is visible. 99 padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); 100 padding-left: var(--global--spacing-unit); 101 padding-right: var(--global--spacing-unit); 102 padding-bottom: var(--global--spacing-horizontal); 103 background-color: var(--global--color-background); 104 transition: all .15s ease-in-out; 105 transform: translateY(var(--global--spacing-vertical)); 106 107 @include media(mobile-only) { 108 height: 100vh; 109 z-index: 499; 110 overflow-x: hidden; 111 overflow-y: auto; 112 border: 2px solid transparent; 113 114 .has-logo.has-title-and-tagline & { 115 position: fixed; 116 transform: translateY(0) translateX(100%); 117 } 118 119 .admin-bar .has-logo.has-title-and-tagline & { 120 top: var(--global--admin-bar--height); 121 } 122 123 .admin-bar & { 124 height: calc(100vh - var(--global--admin-bar--height)); 125 } 126 127 &:focus { 128 border: 2px solid var(--global--color-primary); 129 } 130 } 131 } 132 133 // Mobile menu open 134 .primary-navigation-open & { 135 136 @include media(mobile-only) { 137 width: 100%; 138 position: fixed; 139 z-index: 2; // To be greater than the cover block and embeds. 140 } 141 142 > .primary-menu-container { 143 position: absolute; 144 visibility: visible; 145 opacity: 1; 146 transform: translateY(0); 147 } 148 } 149 150 .primary-navigation-open .has-logo.has-title-and-tagline & { 151 @include media(mobile-only) { 152 153 > .primary-menu-container { 154 transform: translateX(0) translateY(0); 155 } 156 } 157 } 158 159 @include media(mobile) { 160 position: relative; 161 margin-left: auto; 162 163 // Hide Mobile menu on desktop 164 > .primary-menu-container { 165 visibility: visible; 166 opacity: 1; 167 position: relative; 168 padding: 0; 169 background-color: transparent; 170 overflow: initial; 171 transform: none; 172 } 173 174 // Hide mobile menu toggle 175 #toggle-menu { 176 display: none; 177 } 178 179 // Hide sub-sub-menus 180 > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul { 181 display: none; 182 } 183 184 // Don't adjust position when logged-in 185 .admin-bar & { 186 top: initial; 187 188 > .primary-menu-container { 189 top: initial; 190 } 191 } 192 } 193 194 // Menu list wrapper 195 > div > .menu-wrapper { 196 display: flex; 197 justify-content: flex-start; 198 flex-wrap: wrap; 199 list-style: none; 200 margin: 0; 201 max-width: none; 202 padding-left: 0; 203 position: relative; 204 205 @include media(mobile-only) { 206 padding-bottom: 100px; 207 208 ul { 209 padding-left: 0; 210 } 211 } 212 213 li { 214 display: block; 215 position: relative; 216 width: 100%; 217 218 @include media(mobile) { 219 margin: 0; 220 width: inherit; 221 222 &:last-child { 223 margin-right: 0; 224 } 225 } 226 } 227 228 // Sub-menu buttons 229 .sub-menu-toggle { 230 display: flex; 231 height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); 232 width: 44px; 233 padding: 0; 234 justify-content: center; 235 align-items: center; 236 background: transparent; 237 color: currentColor; 238 border: none; 239 240 &:focus { 241 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 242 } 243 244 @include media(mobile-only) { 245 display: none; 246 } 247 248 .icon-plus, 249 .icon-minus { 250 height: 100%; 251 display: flex; 252 align-items: center; 253 254 svg { 255 margin-top: -1px; 256 } 257 } 258 259 .icon-minus { 260 display: none; 261 } 262 263 // When the sub-menu is open, display the minus icon 264 &[aria-expanded="true"] { 265 266 .icon-minus { 267 display: flex; 268 } 269 270 .icon-plus { 271 display: none; 272 } 273 } 274 } 275 276 // Sub-menus Flyout 277 > li > .sub-menu { 278 279 position: relative; 280 281 @include media(mobile) { 282 left: 0; 283 margin: 0; 284 min-width: max-content; 285 position: absolute; 286 top: 100%; 287 padding-top: 3px; 288 transition: all 0.5s ease; 289 z-index: 88888; 290 291 &:before, 292 &:after { 293 content: ""; 294 display: block; 295 position: absolute; 296 width: 0; 297 top: -10px; 298 left: var(--global--spacing-horizontal); 299 border-style: solid; 300 border-color: var(--primary-nav--border-color) transparent; 301 border-width: 0 7px 10px 7px; 302 } 303 304 &:after { 305 top: -9px; 306 border-color: var(--global--color-background) transparent; 307 } 308 309 li { 310 background: var(--global--color-background); 311 } 312 313 &.submenu-reposition-left { 314 315 /* rtl:ignore */ 316 left: 0; 317 318 /* rtl:ignore */ 319 right: auto; 320 321 &:before, 322 &:after { 323 324 /* rtl:ignore */ 325 left: var(--global--spacing-horizontal); 326 327 /* rtl:ignore */ 328 right: auto; 329 } 330 } 331 332 &.submenu-reposition-right { 333 334 /* rtl:ignore */ 335 right: 0; 336 337 /* rtl:ignore */ 338 left: auto; 339 340 &:before, 341 &:after { 342 343 /* rtl:ignore */ 344 left: auto; 345 346 /* rtl:ignore */ 347 right: var(--global--spacing-horizontal); 348 } 349 } 350 } 351 } 352 } 353 354 // Top-level Item Link Colors 355 .primary-menu > .menu-item:hover > a { 356 color: var(--primary-nav--color-link-hover); 357 } 358 359 .primary-menu-container { 360 @include media(mobile) { 361 // Better align with the site title when the menu wraps. 362 margin-right: calc(0px - var(--primary-nav--padding)); 363 margin-left: calc(0px - var(--primary-nav--padding)); 364 365 // Top-level Menu Item 366 > ul > .menu-item { 367 display: flex; 368 369 > a { 370 padding-left: var(--primary-nav--padding); 371 padding-right: var(--primary-nav--padding); 372 373 + .sub-menu-toggle { 374 margin-left: calc(5px - var(--primary-nav--padding)); 375 } 376 } 377 } 378 } 379 } 380 381 // Menu Item Link 382 a { 383 display: block; 384 font-family: var(--primary-nav--font-family-mobile); 385 font-size: var(--primary-nav--font-size-mobile); 386 font-weight: var(--primary-nav--font-weight); 387 padding: var(--primary-nav--padding) 0; 388 text-decoration: none; 389 390 @include media(mobile) { 391 display: block; 392 font-family: var(--primary-nav--font-family); 393 font-size: var(--primary-nav--font-size); 394 font-weight: var(--primary-nav--font-weight); 395 } 396 397 + svg { 398 fill: var(--primary-nav--color-text); 399 } 400 401 &:hover, 402 &:link, 403 &:visited { 404 color: var(--primary-nav--color-link-hover); 405 } 406 407 &:hover { 408 text-decoration: underline; 409 text-decoration-style: dotted; 410 } 411 412 &:focus { 413 position: relative; 414 z-index: 99999; // Ensure focus styles appear above absolute positioned elements 415 outline-offset: 0; 416 text-decoration-thickness: 2px; 417 } 418 } 419 420 .current-menu-item > a:first-child, 421 .current_page_item > a:first-child { 422 text-decoration: underline; 423 text-decoration-style: solid; 424 425 &:hover { 426 text-decoration: underline; 427 text-decoration-style: dotted; 428 } 429 } 430 431 // Sub-menu depth indicators + text styles 432 .sub-menu { 433 margin: 0; 434 padding: 0; 435 list-style: none; 436 margin-left: var(--primary-nav--padding); 437 border: 1px solid var(--primary-nav--border-color); 438 439 .sub-menu { 440 border: none; 441 } 442 443 // Sub-menu items om wide screens. 444 @include media(mobile) { 445 446 // For nested sub-menus, don't duplicate the padding 447 > .menu-item > .sub-menu { 448 padding: 0; 449 } 450 } 451 452 .menu-item { 453 454 @include media(mobile-only) { 455 456 &:last-child { 457 margin-bottom: 0; 458 } 459 460 } 461 462 > a { 463 padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); 464 display: block; 465 font-size: var(--primary-nav--font-size-sub-menu-mobile); 466 font-style: var(--primary-nav--font-style-sub-menu-mobile); 467 468 @include media(mobile) { 469 font-size: var(--primary-nav--font-size-sub-menu); 470 font-style: var(--primary-nav--font-style); 471 } 472 } 473 } 474 } 475 476 // Show top-level sub-menu indicators above mobile-breakpoint-only 477 .menu-item-has-children { 478 479 > .svg-icon { 480 display: none; 481 } 482 483 @include media(mobile) { 484 485 > .svg-icon { 486 display: inline-block; 487 height: 100%; 488 } 489 490 .sub-menu .svg-icon { 491 display: none; 492 } 493 } 494 495 } 496 497 .menu-item-description { 498 display: block; 499 clear: both; 500 font-size: var(--global--font-size-xs); 501 text-transform: none; 502 line-height: 1.7; 503 504 > span { 505 display: inline-block; 506 } 507 } 508 } 509 510 // Keep the menu pinned to the top when the menu is open. 511 @include media(mobile-only) { 512 513 .lock-scrolling .site { 514 position: fixed; 515 max-width: 100%; 516 width: 100%; 517 } 518 } 519 520 // Close button animation for when a custom logo is present. 521 @keyframes twentytwentyone-close-button-transition { 522 523 from { 524 opacity: 0; 525 } 526 527 to { 528 opacity: 1; 529 } 530 }