From 2c9ac6555a777551f8a382fe367ce759281d3e05 Mon Sep 17 00:00:00 2001 From: Lauri Eskola Date: Mon, 2 May 2022 15:05:49 +0300 Subject: [PATCH] Issue #3277809 by baddysonja, mherchel: Use Drupal.displace()'s new CSS variables to place Olivero's fixed header --- .../themes/olivero/css/components/site-header.css | 15 +-------------- .../olivero/css/components/site-header.pcss.css | 14 +------------- 2 files changed, 2 insertions(+), 27 deletions(-) diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css index 98f298e0a41..c7c5b396206 100644 --- a/core/themes/olivero/css/components/site-header.css +++ b/core/themes/olivero/css/components/site-header.css @@ -66,22 +66,9 @@ body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed { position: fixed; z-index: 102; /* Appear above body content that is position: relative */ - top: calc(var(--sp4)*-1); + top: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4)); max-width: var(--max-bg-color); } - body:not(.is-always-mobile-nav) { - - /* Toolbar is fixed, and tray is either vertical or closed and horizontal. */ - } - body:not(.is-always-mobile-nav).toolbar-vertical.toolbar-fixed .site-header__fixable.is-fixed, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .site-header__fixable.is-fixed { - top: calc(var(--toolbar-height) - var(--sp4)); - } - body:not(.is-always-mobile-nav) { - /* Toolbar is fixed, and tray is open and horizontal. */ - } - body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed { - top: calc(var(--toolbar-tray-height) + var(--toolbar-height) - var(--sp4)); - } } .site-header__inner { diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css index 7dc2a7d9cab..763c2898fd8 100644 --- a/core/themes/olivero/css/components/site-header.pcss.css +++ b/core/themes/olivero/css/components/site-header.pcss.css @@ -48,21 +48,9 @@ & .site-header__fixable.is-fixed { position: fixed; z-index: 102; /* Appear above body content that is position: relative */ - inset-block-start: calc(-1 * var(--sp4)); + inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4)); max-width: var(--max-bg-color); } - - /* Toolbar is fixed, and tray is either vertical or closed and horizontal. */ - &.toolbar-vertical.toolbar-fixed, - &.toolbar-horizontal.toolbar-fixed { - & .site-header__fixable.is-fixed { - inset-block-start: calc(var(--toolbar-height) - var(--sp4)); - } - } - /* Toolbar is fixed, and tray is open and horizontal. */ - &.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed { - inset-block-start: calc(var(--toolbar-tray-height) + var(--toolbar-height) - var(--sp4)); - } } }