[Summary view] [Print] [Text view]

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