Unverified Commit 11af82a6 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3190120 by mherchel, KapilV, pragati_kanade, djsagar, andy-blum,... 

Issue #3190120 by mherchel, KapilV, pragati_kanade, djsagar, andy-blum, bnjmnm, andrewmacpherson, Abhijith S, KarinG, Gauravmahlawat, benjifisher, AndyF, katannshaw: Olivero: Focused level-2 nav items should always be in viewport during keyboard navigation
parent fac878ce

core/themes/olivero/css/base/variables.pcss.css

+1 −0
Original line number Diff line number Diff line
@@ -42,6 +42,7 @@ 
  --content-left: 90px;

  --container-padding: var(--sp);

  --container-padding-nav: var(--sp2);

  --site-header-height-wide: var(--sp10);



  /* Drupal administrative toolbar heights and width. */

  --toolbar-height: 39px;

core/themes/olivero/css/components/header-site-branding.pcss.css

+1 −1
Original line number Diff line number Diff line
@@ -34,7 +34,7 @@ 


  @media (--nav) {

    min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));

    height: var(--sp10);

    height: var(--site-header-height-wide);

    margin-inline-start: calc(-1 * var(--container-padding-nav));

    padding-block: 0;

    padding-inline-start: var(--container-padding-nav);

core/themes/olivero/css/components/navigation/nav-primary-no-js.css

+4 −2
Original line number Diff line number Diff line
@@ -193,7 +193,8 @@ html:not(.js) { 
     * Styles for traditional dropdown primary navigation when JS is disabled.

     */

}

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2 {

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {

          visibility: visible;

          transform: translate(-50%, 0);

          opacity: 1;
@@ -205,7 +206,8 @@ html:not(.js) { 
       * because it will break IE11 and earlier versions of MS Edge.

       */

    }

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2 {

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,

        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {

          visibility: visible;

          transform: translate(-50%, 0);

          opacity: 1;

core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css

+4 −2
Original line number Diff line number Diff line
@@ -125,7 +125,8 @@ html:not(.js) { 
     */

    & body:not(.is-always-mobile-nav) {

      & .primary-nav__menu-item--level-1:hover {

        & .primary-nav__menu--level-2 {

        & .primary-nav__menu--level-2,

        & .primary-nav__menu-🥕 {

          visibility: visible;

          transform: translate(-50%, 0);

          opacity: 1;
@@ -137,7 +138,8 @@ html:not(.js) { 
       * because it will break IE11 and earlier versions of MS Edge.

       */

      & .primary-nav__menu-item--level-1:focus-within {

        & .primary-nav__menu--level-2 {

        & .primary-nav__menu--level-2,

        & .primary-nav__menu-🥕 {

          visibility: visible;

          transform: translate(-50%, 0);

          opacity: 1;

core/themes/olivero/css/components/navigation/nav-primary-wide.css

+80 −26
Original line number Diff line number Diff line
@@ -184,14 +184,16 @@ 
    body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

      position: absolute;

      z-index: 105; /* Appear above search container. */

      /* stylelint-disable csstools/use-logical */

      top: calc(100% - 0.5625rem);

      left: 50%;

      /* stylelint-enable csstools/use-logical */

      visibility: hidden;

      overflow: visible;

      overflow: auto;

      width: 15.625rem;

      max-height: none;

      /**

       * Ensure that long level-2 menus will never overflow viewport (focused

       * elements should always be in viewport per accessibility guidelines).

       */

      max-height: calc(100vh - 12.375rem);

      margin-top: 0;

      padding-top: 3.375rem;

      padding-bottom: 3.375rem;
@@ -206,23 +208,6 @@ 
      border-radius: 0 0 2px 2px;

      background: #fff;

      box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08)



      /* Arrow */

    }

      body:not(.is-always-mobile-nav) .primary-nav__menu--level-2:after {

        position: absolute;

        /* stylelint-disable csstools/use-logical */

        bottom: calc(100% + 0.5625rem);

        left: 50%;

        /* stylelint-enable csstools/use-logical */

        width: 0;

        height: 0;

        content: "";

        transform: translateX(-50%);

        /* Intentionally not using CSS logical properties. */

        border-right: solid 10px transparent;

        border-bottom: solid 10px #2494db;

        border-left: solid 10px transparent;

    }



      body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
@@ -265,6 +250,75 @@ 
          transform-origin: left;

          border-top-width: 3px;

        }



body:not(.is-always-mobile-nav) {



    /**

     * Arrow is placed outside of submenu because the submenu has the

     * `overflow: hidden` CSS rule applied.

     */

}

    body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {

      position: absolute;

      z-index: 105; /* Match level 2 menus. */

      top: calc(100% - 1.125rem);

      left: 50%;

      visibility: hidden;

      width: 0;

      height: 0;

      transform: translate(-50%, -1.25rem);

      opacity: 0;

      /* Intentionally not using CSS logical properties. */

      border-right: solid 10px transparent;

      border-bottom: solid 10px #2494db;

      border-left: solid 10px transparent

    }



      body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {

        visibility: visible;

        transform: translate(-50%, 0);

        opacity: 1;

      }



body:not(.is-always-mobile-nav) {



    /**

     * When ensuring that long menus don't overflow viewport, we can give a

     * little extra room when the toolbar is fixed (and is shorter).

     */

}

    body:not(.is-always-mobile-nav) .js-fixed .primary-nav__menu--level-2 {

      max-height: calc(100vh - 7.875rem);

    }

  }



/*

 * Take into account Drupal's admin toolbars when ensuring that long level-2

 * menus will never overflow viewport.

 */



@media (min-width: 75rem) {

  body:not(.is-always-mobile-nav) {

    /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */

  }

      body:not(.is-always-mobile-nav).toolbar-vertical .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .primary-nav__menu--level-2 {

        max-height: calc(100vh - 14.8125rem);

      }



      body:not(.is-always-mobile-nav).toolbar-vertical .js-fixed .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .js-fixed .primary-nav__menu--level-2 {

        max-height: calc(100vh - 10.3125rem);

      }

  body:not(.is-always-mobile-nav) {



    /* Toolbar is horizontal fixed, and tray is open. */

  }

      body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .primary-nav__menu--level-2 {

        max-height: calc(100vh - 17.3125rem);

      }



      body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .js-fixed .primary-nav__menu--level-2 {

        max-height: calc(100vh - 12.8125rem);

      }

}



/*
@@ -273,9 +327,9 @@ 
 */



@media (min-width: 75rem) {



html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {

    transition: visibility 0.2s, transform 0.2s, opacity 0.2s

    html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,

    html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {

      transition: visibility 0.2s, transform 0.2s, opacity 0.2s;

    }

  }