[Summary view] [Print] [Text view]

   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      button {
  17          /* Un-style buttons */
  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-block;
  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      // Sub-menu styles
 247      //
 248      // :focus-within needs its own selector so other similar
 249      // selectors don’t get ignored if a browser doesn’t recognize it
 250  
 251      .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
 252  
 253          display: block;
 254          left: 0;
 255          margin-top: 0;
 256          opacity: 1;
 257          width: auto;
 258          min-width: 100%;
 259  
 260  
 261          // Non-mobile position
 262          @include media(tablet) {
 263              display: block;
 264              margin-top: 0;
 265              opacity: 1;
 266              position: absolute;
 267              left: 0;
 268              right: auto;
 269              top: auto;
 270              bottom: auto;
 271              height: auto;
 272              min-width: -moz-max-content;
 273              min-width: -webkit-max-content;
 274              min-width: max-content;
 275              transform: none;
 276          }
 277  
 278          &.hidden-links {
 279              left: 0;
 280              width: 100%;
 281              display: table;
 282              position: absolute;
 283  
 284              @include media(tablet) {
 285                  right: 0;
 286                  left: auto;
 287                  display: block;
 288                  width: max-content;
 289              }
 290          }
 291  
 292          .submenu-expand {
 293              display: none;
 294          }
 295  
 296          .sub-menu {
 297              display: block;
 298              margin-top: inherit;
 299              position: relative;
 300              width: 100%;
 301              left: 0;
 302              opacity: 1;
 303  
 304              // Non-mobile position
 305              @include media(tablet) {
 306                  float: none;
 307                  max-width: 100%;
 308              }
 309          }
 310  
 311          // Nested sub-menu dashes
 312          .sub-menu {
 313              counter-reset: submenu;
 314          }
 315  
 316          .sub-menu > li > a::before {
 317              font-family: $font__body;
 318              font-weight: normal;
 319              content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
 320              counter-increment: submenu
 321          }
 322      }
 323  
 324      .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
 325      .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
 326      .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
 327  
 328          display: block;
 329          left: 0;
 330          margin-top: 0;
 331          opacity: 1;
 332          width: auto;
 333          min-width: 100%;
 334  
 335  
 336          // Non-mobile position
 337          @include media(tablet) {
 338              display: block;
 339              float: none;
 340              margin-top: 0;
 341              opacity: 1;
 342              position: absolute;
 343              left: 0;
 344              right: auto;
 345              top: auto;
 346              bottom: auto;
 347              height: auto;
 348              min-width: -moz-max-content;
 349              min-width: -webkit-max-content;
 350              min-width: max-content;
 351              transform: none;
 352          }
 353  
 354          &.hidden-links {
 355              left: 0;
 356              width: 100%;
 357              display: table;
 358              position: absolute;
 359  
 360              @include media(tablet) {
 361                  right: 0;
 362                  left: auto;
 363                  display: table;
 364                  width: max-content;
 365              }
 366          }
 367  
 368          .submenu-expand {
 369              display: none;
 370          }
 371  
 372          .sub-menu {
 373              display: block;
 374              margin-top: inherit;
 375              position: relative;
 376              width: 100%;
 377              left: 0;
 378              opacity: 1;
 379  
 380              // Non-mobile position
 381              @include media(tablet) {
 382                  float: none;
 383                  max-width: 100%;
 384              }
 385          }
 386  
 387          // Nested sub-menu dashes
 388          .sub-menu {
 389              counter-reset: submenu;
 390          }
 391  
 392          .sub-menu > li > a::before {
 393              font-family: $font__body;
 394              font-weight: normal;
 395              content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
 396              counter-increment: submenu
 397          }
 398      }
 399  
 400      .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
 401          /* Fade-in animation for top-level submenus */
 402          animation: fade_in 0.1s forwards;
 403      }
 404  
 405      // Off-canvas touch device styles
 406      .main-menu .menu-item-has-children.off-canvas .sub-menu {
 407  
 408          .submenu-expand .svg-icon {
 409              transform: rotate(270deg);
 410          }
 411  
 412          .sub-menu {
 413              opacity: 0;
 414              position: absolute;
 415              z-index: 0;
 416              transform: translateX(-100%);
 417          }
 418  
 419          li:hover,
 420          li:focus,
 421          li > a:hover,
 422          li > a:focus {
 423              background-color: transparent;
 424          }
 425  
 426          > li > a,
 427          > li > .menu-item-link-return {
 428              white-space: inherit;
 429          }
 430  
 431          &:not(:has(.sub-menu.expanded-true)) {
 432              overflow-y: scroll;
 433          }
 434  
 435          &.expanded-true {
 436  
 437              display: block;
 438              margin-top: 0;
 439              opacity: 1;
 440              padding-left: 0;
 441  
 442              /* Mobile position */
 443              left: 0;
 444              top: 0;
 445              right: 0;
 446              bottom: 0;
 447              position: fixed;
 448              z-index: 100000; /* Make sure appears above mobile admin bar */
 449              width: 100vw;
 450              height: 100vh;
 451              max-width: 100vw;
 452              transform: translateX(+100%);
 453              animation: slide_in_right 0.3s forwards;
 454  
 455              > .mobile-parent-nav-menu-item {
 456                  display: block;
 457              }
 458  
 459              .admin-bar & {
 460                  /* Prevent menu from being blocked by admin bar */
 461                  top: 46px;
 462                  height: calc( 100vh - 46px );
 463  
 464                  .sub-menu.expanded-true {
 465                      top: 0;
 466                  }
 467  
 468                  @media only screen and ( min-width: 782px ) {
 469                      /* WP core breakpoint */
 470                      top: 32px;
 471                      height: calc( 100vh - 32px );
 472  
 473                      .sub-menu.expanded-true {
 474                          top: 0;
 475                      }
 476                  }
 477              }
 478          }
 479      }
 480  
 481      // Hide duplicate menu-more-link when re-loading a menu in the customizer
 482      .main-menu-more {
 483          &:nth-child(n+3) {
 484              display: none;
 485          }
 486      }
 487  
 488  }
 489  
 490  /* Menu animation */
 491  
 492  @keyframes slide_in_right {
 493      100% {
 494          transform: translateX(0%);
 495      }
 496  }
 497  
 498  @keyframes fade_in {
 499      from {
 500          opacity: 0;
 501      }
 502      to {
 503          opacity: 1;
 504      }
 505  }