Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3277809 by baddysonja, mherchel: Use Drupal.displace()'s new CSS variables to place Olivero's fixed header

merge-requests/2210/head
Lauri Eskola 2022-05-02 15:05:49 +03:00
parent 04c1b7fd27
commit 2c9ac6555a
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 2 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/themes/olivero/css/components/site-header.css
View File

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

14
core/themes/olivero/css/components/site-header.pcss.css
View File

@ -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));
}
}
}