From cfc735dfaa8d05384c3b0924bb6d237e5399c849 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 1 Jul 2022 16:34:48 +0300
Subject: [PATCH] Issue #3291729 by mherchel, andy-blum: Refactor Olivero
styles to use new --drupal-displace variables and ensure that toolbar/buttons
are always visible
---
core/themes/olivero/css/base/variables.css | 5 -
.../olivero/css/base/variables.pcss.css | 5 -
.../css/components/header-navigation.css | 94 +++----------------
.../css/components/header-navigation.pcss.css | 72 +++-----------
.../navigation/nav-primary-wide.css | 53 ++---------
.../navigation/nav-primary-wide.pcss.css | 59 ++----------
.../olivero/css/components/site-header.css | 2 +-
.../css/components/site-header.pcss.css | 2 +-
core/themes/olivero/css/layout/layout.css | 14 ++-
.../themes/olivero/css/layout/layout.pcss.css | 7 ++
10 files changed, 64 insertions(+), 249 deletions(-)
diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css
index c27a7a485b45..51205e71efff 100644
--- a/core/themes/olivero/css/base/variables.css
+++ b/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.
*
diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css
index a7494f546704..37973164c377 100644
--- a/core/themes/olivero/css/base/variables.pcss.css
+++ b/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.
*
diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index a8cfdd83bb50..13cc0332ddb2 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/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
}
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 923f9b08cc6f..7532847904f6 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/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;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
index a2fe41788487..3673f022c6f2 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.css
+++ b/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;
- }
- }
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
index 48a9e5b7aebe..13ccd9d42f47 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
+++ b/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;
- }
- }
- }
- }
-}
diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css
index c7c5b396206a..39e77b589e2b 100644
--- a/core/themes/olivero/css/components/site-header.css
+++ b/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);
}
diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
index 763c2898fd87..1aceb838a7f5 100644
--- a/core/themes/olivero/css/components/site-header.pcss.css
+++ b/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);
}
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 06e612a4a10e..aaeda8491647 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/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 {
diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css
index 1ce67cc714ca..e1ca9d1275d1 100644
--- a/core/themes/olivero/css/layout/layout.pcss.css
+++ b/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 {
--
GitLab