[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      /* 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-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      /*
 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  }