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)

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

@@ -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

@@ -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

@@ -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,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

@@ -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,10 +271,14 @@
       }
 
         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,39 +316,10 @@ 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));
+      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));
     }
   }
 
-/*
- * 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));
-      }
-}
-
 /*
  * Only apply transition styles to menu when JS is loaded. This
  * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
@@ -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;
-        }
-    }

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

@@ -121,11 +121,9 @@ body:not(.is-always-mobile-nav) {
       visibility: hidden;
       overflow: auto;
       width: 250px;
-      /**
-       * 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-block-start: 0;
       margin-inline-start: 0;
       padding-block: calc(3 * var(--sp));
@@ -167,8 +165,12 @@ body:not(.is-always-mobile-nav) {
         padding-inline-end: 0;
 
         &:after {
-          transform-origin: left;
+          transform-origin: left; /* LTR */
           border-top-width: 3px;
+
+          &:dir(rtl) {
+            transform-origin: right;
+          }
         }
       }
     }
@@ -204,38 +206,7 @@ body:not(.is-always-mobile-nav) {
      * little extra room when the toolbar is fixed (and is shorter).
      */
     & .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 (--nav) {
-  body:not(.is-always-mobile-nav) {
-    /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
-    &.toolbar-vertical,
-    &.toolbar-horizontal.toolbar-fixed {
-      & .primary-nav__menu--level-2 {
-        max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));
-      }
-
-      & .is-fixed .primary-nav__menu--level-2 {
-        max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));
-      }
-    }
-
-    /* Toolbar is horizontal fixed, and tray is open. */
-    &.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));
-      }
-
-      & .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));
     }
   }
 }
@@ -252,15 +223,3 @@ html.js body:not(.is-always-mobile-nav) {
     }
   }
 }
-
-[dir="rtl"] {
-  & body:not(.is-always-mobile-nav) {
-    @media (--nav) {
-      & .primary-nav__menu-link--level-2 {
-        & .primary-nav__menu-link-inner:after {
-          transform-origin: right;
-        }
-      }
-    }
-  }
-}

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

@@ -74,7 +74,7 @@
 .site-header__inner {
   z-index: 1; /* Appear in front of Drupal's tabs. */
   flex-grow: 1;
-  width: calc(100vw - var(--content-left));
+  width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
   background: var(--color--white);
 }
 

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

@@ -57,7 +57,7 @@
 .site-header__inner {
   z-index: 1; /* Appear in front of Drupal's tabs. */
   flex-grow: 1;
-  width: calc(100vw - var(--content-left));
+  width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
   background: var(--color--white);
 }
 

core/themes/olivero/css/layout/layout.css

@@ -27,7 +27,15 @@
   width: 100%;
   max-width: var(--max-width);
   padding-left: var(--container-padding);
-  padding-right: var(--container-padding);
+  padding-right: var(--container-padding)
+
+  /* This fixes an issue where if the toolbar is open in vertical mode, and
+   * the mobile navigation is open, the "close" button gets pushed outside of
+   * the viewport. */
+}
+
+body.is-fixed .container {
+    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px))
 }
 
 .page-wrapper {
@@ -59,11 +67,11 @@
 @media (min-width: 75rem) {
 
 [dir="ltr"] .main-content {
-    margin-right: auto;
+    margin-right: auto
   }
 
 [dir="rtl"] .main-content {
-    margin-left: auto;
+    margin-left: auto
   }
 
 .main-content {

core/themes/olivero/css/layout/layout.pcss.css

@@ -9,6 +9,13 @@
   width: 100%;
   max-width: var(--max-width);
   padding-inline: var(--container-padding);
+
+  /* This fixes an issue where if the toolbar is open in vertical mode, and
+   * the mobile navigation is open, the "close" button gets pushed outside of
+   * the viewport. */
+  @nest body.is-fixed & {
+    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+  }
 }
 
 .page-wrapper {