_menu-main-navigation.scss (8658B)
1 /** === Main menu === */ 2 3 .main-navigation { 4 5 display: block; 6 margin-top: #{0.25 * $size__spacing-unit}; 7 8 body.page & { 9 display: block; 10 } 11 12 > div { 13 display: inline; 14 } 15 16 /* Un-style buttons */ 17 button { 18 display: inline-block; 19 border: none; 20 padding: 0; 21 margin: 0; 22 font-family: $font__heading; 23 font-weight: 700; 24 line-height: $font__line-height-heading; 25 text-decoration: none; 26 background: transparent; 27 color: inherit; 28 cursor: pointer; 29 transition: 30 background 250ms ease-in-out, 31 transform 150ms ease; 32 -webkit-appearance: none; 33 -moz-appearance: none; 34 35 &:hover, 36 &:focus { 37 background: transparent; 38 } 39 40 &:focus { 41 outline: 1px solid transparent; 42 outline-offset: -4px; 43 } 44 45 &:active { 46 transform: scale(0.99); 47 } 48 } 49 50 .main-menu { 51 52 display: inline-block; 53 margin: 0; 54 padding: 0; 55 56 > li { 57 58 color: $color__link; 59 display: inline; 60 position: relative; 61 62 > a { 63 64 font-weight: 700; 65 color: $color__link; 66 margin-right: #{0.5 * $size__spacing-unit}; 67 68 + svg { 69 margin-right: #{0.5 * $size__spacing-unit}; 70 } 71 72 &:hover, 73 &:hover + svg { 74 color: $color__link-hover; 75 } 76 } 77 78 &.menu-item-has-children { 79 80 display: inline-block; 81 position: inherit; 82 83 @include media(tablet) { 84 position: relative; 85 } 86 87 > a { 88 margin-right: #{0.125 * $size__spacing-unit}; 89 } 90 91 & > a, 92 .menu-item-has-children > a { 93 94 &:after { 95 content: ""; 96 display: none; 97 } 98 } 99 100 .submenu-expand { 101 102 display: inline-block; 103 margin-right: #{0.25 * $size__spacing-unit}; 104 105 /* Priority+ Menu */ 106 &.main-menu-more-toggle { 107 108 position: relative; 109 height: 24px; 110 line-height: $font__line-height-heading; 111 width: 24px; 112 padding: 0; 113 margin-left: #{0.5 * $size__spacing-unit}; 114 115 svg { 116 height: 24px; 117 width: 24px; 118 top: #{-0.125 * $size__spacing-unit}; 119 vertical-align: text-bottom; 120 } 121 } 122 123 .wp-customizer-unloading &, 124 &.is-empty { 125 display: none; 126 } 127 128 svg { 129 position: relative; 130 top: 0.2rem; 131 } 132 } 133 } 134 135 &:last-child > a, 136 &:last-child.menu-item-has-children .submenu-expand { 137 margin-right: 0; 138 } 139 } 140 } 141 142 .sub-menu { 143 144 background-color: $color__link; 145 color: $color__background-body; 146 list-style: none; 147 padding-left: 0; 148 149 position: absolute; 150 opacity: 0; 151 left: -9999px; 152 z-index: 99999; 153 154 @include media(tablet) { 155 width: auto; 156 min-width: -moz-max-content; 157 min-width: -webkit-max-content; 158 min-width: max-content; 159 } 160 161 > li { 162 163 display: block; 164 float: none; 165 position: relative; 166 167 &.menu-item-has-children { 168 169 .submenu-expand { 170 display: inline-block; 171 position: absolute; 172 width: calc( 24px + #{$size__spacing-unit} ); 173 right: 0; 174 top: calc( .125 * #{$size__spacing-unit} ); 175 bottom: 0; 176 color: white; 177 line-height: 1; 178 padding: calc( .5 * #{$size__spacing-unit} ); 179 180 svg { 181 top: 0; 182 } 183 } 184 185 .submenu-expand { 186 margin-right: 0; 187 } 188 189 @include media(tablet) { 190 191 .menu-item-has-children > a { 192 193 &:after { 194 content: "\203a"; 195 } 196 } 197 } 198 } 199 200 > a, 201 > .menu-item-link-return { 202 203 color: $color__background-body; 204 display: block; 205 line-height: $font__line-height-heading; 206 text-shadow: none; 207 padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit; 208 max-width: #{20 * $size__spacing-unit}; 209 210 &:hover, 211 &:focus { 212 background: $color__link-hover; 213 214 &:after { 215 background: $color__link-hover; 216 } 217 } 218 } 219 220 > .menu-item-link-return { 221 width: 100%; 222 font-size: $font__size_base; 223 font-weight: normal; 224 text-align: left; 225 } 226 227 > a:empty { 228 display: none; 229 } 230 231 &.mobile-parent-nav-menu-item { 232 233 display: none; 234 font-size: $font__size-sm; 235 font-weight: normal; 236 237 svg { 238 position: relative; 239 top: 0.2rem; 240 margin-right: calc( .25 * #{$size__spacing-unit} ); 241 } 242 } 243 } 244 } 245 246 /* 247 * Sub-menu styles 248 * 249 * :focus-within needs its own selector so other similar 250 * selectors don’t get ignored if a browser doesn’t recognize it 251 */ 252 .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { 253 254 display: block; 255 left: 0; 256 margin-top: 0; 257 opacity: 1; 258 width: auto; 259 min-width: 100%; 260 261 262 /* Non-mobile position */ 263 @include media(tablet) { 264 display: block; 265 margin-top: 0; 266 opacity: 1; 267 position: absolute; 268 left: 0; 269 right: auto; 270 top: auto; 271 bottom: auto; 272 height: auto; 273 min-width: -moz-max-content; 274 min-width: -webkit-max-content; 275 min-width: max-content; 276 transform: none; 277 } 278 279 &.hidden-links { 280 left: 0; 281 width: 100%; 282 display: table; 283 position: absolute; 284 285 @include media(tablet) { 286 right: 0; 287 left: auto; 288 display: block; 289 width: max-content; 290 } 291 } 292 293 .submenu-expand { 294 display: none; 295 } 296 297 .sub-menu { 298 display: block; 299 margin-top: inherit; 300 position: relative; 301 width: 100%; 302 left: 0; 303 opacity: 1; 304 305 /* Non-mobile position */ 306 @include media(tablet) { 307 float: none; 308 max-width: 100%; 309 } 310 } 311 312 /* Nested sub-menu dashes */ 313 .sub-menu { 314 counter-reset: submenu; 315 } 316 317 .sub-menu > li > a::before { 318 font-family: $font__body; 319 font-weight: normal; 320 content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 321 counter-increment: submenu 322 } 323 } 324 325 .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, 326 .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, 327 .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { 328 329 display: block; 330 left: 0; 331 margin-top: 0; 332 opacity: 1; 333 width: auto; 334 min-width: 100%; 335 336 337 /* Non-mobile position */ 338 @include media(tablet) { 339 display: block; 340 float: none; 341 margin-top: 0; 342 opacity: 1; 343 position: absolute; 344 left: 0; 345 right: auto; 346 top: auto; 347 bottom: auto; 348 height: auto; 349 min-width: -moz-max-content; 350 min-width: -webkit-max-content; 351 min-width: max-content; 352 transform: none; 353 } 354 355 &.hidden-links { 356 left: 0; 357 width: 100%; 358 display: table; 359 position: absolute; 360 361 @include media(tablet) { 362 right: 0; 363 left: auto; 364 display: table; 365 width: max-content; 366 } 367 } 368 369 .submenu-expand { 370 display: none; 371 } 372 373 .sub-menu { 374 display: block; 375 margin-top: inherit; 376 position: relative; 377 width: 100%; 378 left: 0; 379 opacity: 1; 380 381 /* Non-mobile position */ 382 @include media(tablet) { 383 float: none; 384 max-width: 100%; 385 } 386 } 387 388 /* Nested sub-menu dashes */ 389 .sub-menu { 390 counter-reset: submenu; 391 } 392 393 .sub-menu > li > a::before { 394 font-family: $font__body; 395 font-weight: normal; 396 content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 397 counter-increment: submenu 398 } 399 } 400 401 /** 402 * Fade-in animation for top-level submenus 403 */ 404 .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu { 405 animation: fade_in 0.1s forwards; 406 } 407 408 /** 409 * Off-canvas touch device styles 410 */ 411 .main-menu .menu-item-has-children.off-canvas .sub-menu { 412 413 .submenu-expand .svg-icon { 414 transform: rotate(270deg); 415 } 416 417 .sub-menu { 418 opacity: 0; 419 position: absolute; 420 z-index: 0; 421 transform: translateX(-100%); 422 } 423 424 li:hover, 425 li:focus, 426 li > a:hover, 427 li > a:focus { 428 background-color: transparent; 429 } 430 431 > li > a, 432 > li > .menu-item-link-return { 433 white-space: inherit; 434 } 435 436 &.expanded-true { 437 438 display: table; 439 margin-top: 0; 440 opacity: 1; 441 padding-left: 0; 442 443 /* Mobile position */ 444 left: 0; 445 top: 0; 446 right: 0; 447 bottom: 0; 448 position: fixed; 449 z-index: 100000; /* Make sure appears above mobile admin bar */ 450 width: 100vw; 451 height: 100vh; 452 max-width: 100vw; 453 transform: translateX(+100%); 454 animation: slide_in_right 0.3s forwards; 455 456 > .mobile-parent-nav-menu-item { 457 display: block; 458 } 459 460 /* Prevent menu from being blocked by admin bar */ 461 .admin-bar & { 462 top: 46px; 463 height: calc( 100vh - 46px ); 464 465 .sub-menu.expanded-true { 466 top: 0; 467 } 468 469 /* WP core breakpoint */ 470 @media only screen and ( min-width: 782px ) { 471 top: 32px; 472 height: calc( 100vh - 32px ); 473 474 .sub-menu.expanded-true { 475 top: 0; 476 } 477 } 478 } 479 } 480 } 481 482 // Hide duplicate menu-more-link when re-loading a menu in the customizer 483 .main-menu-more { 484 &:nth-child(n+3) { 485 display: none; 486 } 487 } 488 489 } 490 491 /* Menu animation */ 492 493 @keyframes slide_in_right { 494 100% { 495 transform: translateX(0%); 496 } 497 } 498 499 @keyframes fade_in { 500 from { 501 opacity: 0; 502 } 503 to { 504 opacity: 1; 505 } 506 }