Unverified Commit 6b2c3570 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3291729 by mherchel, andy-blum: Refactor Olivero styles to use new... 

Issue #3291729 by mherchel, andy-blum: Refactor Olivero styles to use new --drupal-displace variables and ensure that toolbar/buttons are always visible

(cherry picked from commit cfc735df)
parent d02c7688

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

+0 −5
Original line number Diff line number Diff line
@@ -55,11 +55,6 @@ 


:root {



  /* Drupal administrative toolbar heights and width. */

  --toolbar-height: 2.4375rem;

  --toolbar-tray-height: 2.5rem;

  --toolbar-tray-vertical-width: 14.9375rem;



  /**

   * Grid helpers.

   *

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

+0 −5
Original line number Diff line number Diff line
@@ -31,11 +31,6 @@ 
    --container-padding: var(--sp2);

  }



  /* Drupal administrative toolbar heights and width. */

  --toolbar-height: 39px;

  --toolbar-tray-height: 40px;

  --toolbar-tray-vertical-width: 239px;



  /**

   * Grid helpers.

   *

core/themes/olivero/css/components/header-navigation.css

+13 −81
Original line number Diff line number Diff line
@@ -53,44 +53,36 @@ 
  top: 0;

  visibility: hidden;

  overflow: auto;

  /**

   * Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap.

   */

  flex-basis: 0;

  flex-grow: 1; /* Necessary for IE11. */

  /* Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap. */

  flex-basis: max-content;

  width: 100%;

  max-width: var(--mobile-nav-width);

  height: 100%;

  padding-top: 0;

  padding-bottom: var(--sp);

  /**

   * Create room for the "close" button. We cannot use margin because the

  /* Create room for the "close" button. We cannot use margin because the

   * mobile navigation needs to slide beneath the button, but we also cannot

   * use padding because that would enable the button to scroll out of the

   * viewport on short screens.

   */

  border-top: solid var(--color--white) var(--sp3);

   * viewport on short screens. */

  border-top: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));

  background-color: var(--color--white);

  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)

}



.header-nav.is-active {

    visibility: visible;

    transform: translateX(-100%); /* LTR */

    transform: translateX(-100%) /* LTR */

  }



@supports (flex-basis: max-content) {



.header-nav {

    flex-basis: max-content

}

[dir="rtl"] .header-nav.is-active {

      transform: translateX(100%);

    }



@media (min-width: 31.25rem) {



.header-nav {

    border-top-width: var(--sp5)

    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px))

}

  }
@@ -106,7 +98,7 @@ 


.header-nav {

    padding-bottom: var(--sp3);

    border-top-width: var(--sp7)

    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px))

}

  }
@@ -140,38 +132,6 @@ html.js .header-nav { 
  transition: visibility 0.2s, transform 0.2s;

}



/* Toolbar is fixed, and tray is vertical. */



body.toolbar-vertical .header-nav {

  border-top-width: calc(var(--toolbar-height) + var(--sp3))

}



@media (min-width: 31.25rem) {



body.toolbar-vertical .header-nav {

    border-top-width: calc(var(--toolbar-height) + var(--sp5))

}

  }



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



@media (min-width: 43.75rem) {



body.toolbar-vertical .header-nav,

body.toolbar-horizontal.toolbar-fixed .header-nav {

    border-top-width: calc(var(--toolbar-height) + var(--sp7))

}

  }



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



@media (min-width: 43.75rem) {



body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {

    border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp7))

}

  }



@media (min-width: 75rem) {



[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
@@ -210,30 +170,6 @@ body:not(.is-always-mobile-nav) .header-nav { 
}

  }



body.is-always-mobile-nav {

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

}



@media (min-width: 75rem) {



body.is-always-mobile-nav.toolbar-vertical .header-nav,

  body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav {

      border-top-width: calc(var(--toolbar-height) + var(--sp11))

  }

    }



body.is-always-mobile-nav {



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

}



@media (min-width: 75rem) {



body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {

      border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp11))

  }

    }



@media (min-width: 75rem) {



[dir="ltr"] body.is-always-mobile-nav .header-nav {
@@ -248,7 +184,7 @@ body.is-always-mobile-nav .header-nav { 
      overflow: auto;

      max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);

      transition: transform 0.2s, visibility 0.2s;

      border-top-width: var(--sp11)

      border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11))

  }

    }
@@ -267,10 +203,6 @@ body.is-always-mobile-nav .header-nav { 
  }

    }



[dir="rtl"] .header-nav.is-active {

  transform: translateX(100%);

}



[dir="ltr"] .header-nav-overlay {

  left: 0

}

core/themes/olivero/css/components/header-navigation.pcss.css

+12 −60
Original line number Diff line number Diff line
@@ -12,45 +12,40 @@ 
  inset-inline-start: 100%;

  visibility: hidden;

  overflow: auto;

  /**

   * Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap.

   */

  flex-basis: 0;

  flex-grow: 1; /* Necessary for IE11. */

  /* Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap. */

  flex-basis: max-content;

  width: 100%;

  max-width: var(--mobile-nav-width);

  height: 100%;

  padding-block: 0 var(--sp);

  padding-inline-start: var(--sp);

  padding-inline-end: var(--sp);

  /**

   * Create room for the "close" button. We cannot use margin because the

  /* Create room for the "close" button. We cannot use margin because the

   * mobile navigation needs to slide beneath the button, but we also cannot

   * use padding because that would enable the button to scroll out of the

   * viewport on short screens.

   */

  border-block-start: solid var(--color--white) var(--sp3);

   * viewport on short screens. */

  border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));

  background-color: var(--color--white);

  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);



  &.is-active {

    visibility: visible;

    transform: translateX(-100%); /* LTR */

  }



  @supports (flex-basis: max-content) {

    flex-basis: max-content;

    &:dir(rtl) {

      transform: translateX(100%);

    }

  }



  @media (--sm) {

    border-top-width: var(--sp5);

    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));

  }



  @media (--md) {

    padding-block-end: var(--sp3);

    padding-inline-start: var(--sp3);

    border-top-width: var(--sp7);

    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));

  }



  @media (--lg) {
@@ -73,30 +68,6 @@ html.js .header-nav { 
  transition: visibility 0.2s, transform 0.2s;

}



/* Toolbar is fixed, and tray is vertical. */

body.toolbar-vertical .header-nav {

  border-top-width: calc(var(--toolbar-height) + var(--sp3));



  @media (--sm) {

    border-top-width: calc(var(--toolbar-height) + var(--sp5));

  }

}



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

body.toolbar-vertical .header-nav,

body.toolbar-horizontal.toolbar-fixed .header-nav {

  @media (--md) {

    border-top-width: calc(var(--toolbar-height) + var(--sp7));

  }

}



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

body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {

  @media (--md) {

    border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp7));

  }

}



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

  @media (--nav) {

    position: static;
@@ -120,28 +91,13 @@ body:not(.is-always-mobile-nav) .header-nav { 
}



body.is-always-mobile-nav {

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

  &.toolbar-vertical .header-nav,

  &.toolbar-horizontal.toolbar-fixed .header-nav {

    @media (--nav) {

      border-top-width: calc(var(--toolbar-height) + var(--sp11));

    }

  }



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

  &.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {

    @media (--nav) {

      border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp11));

    }

  }



  & .header-nav {

    @media (--nav) {

      overflow: auto;

      max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));

      padding-inline-end: var(--sp);

      transition: transform 0.2s, visibility 0.2s;

      border-top-width: var(--sp11);

      border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));

    }



    @media (--grid-max) {
@@ -151,10 +107,6 @@ body.is-always-mobile-nav { 
  }

}



[dir="rtl"] .header-nav.is-active {

  transform: translateX(100%);

}



.header-nav-overlay {

  position: fixed;

  z-index: 101;

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

+10 −43
Original line number Diff line number Diff line
@@ -212,11 +212,9 @@ 
      visibility: hidden;

      overflow: auto;

      width: 15.625rem;

      /**

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

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

       */

      max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));

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

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

      max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));

      margin-top: 0;

      padding-top: calc(var(--sp)*3);

      padding-bottom: calc(var(--sp)*3);
@@ -273,8 +271,12 @@ 
      }



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

          transform-origin: left;

          border-top-width: 3px;

          transform-origin: left; /* LTR */

          border-top-width: 3px

        }



          [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {

            transform-origin: right;

          }



body:not(.is-always-mobile-nav) {
@@ -314,36 +316,7 @@ body:not(.is-always-mobile-nav) { 
     */

}

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

      max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));

    }

  }



/*

 * 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 - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));

      }



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

        max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));

      }

  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 - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));

      }



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

        max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));

      max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));

    }

  }
@@ -358,9 +331,3 @@ body:not(.is-always-mobile-nav) { 
      transition: visibility 0.2s, transform 0.2s, opacity 0.2s;

    }

  }
 


@media (min-width: 75rem) {

        [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {

          transform-origin: right;

        }

    }