From 9da11134ca14833a686b9cf19045f16d162b5da3 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <46355-saschaeggi@users.noreply.drupalcode.org>
Date: Fri, 8 Sep 2023 06:47:20 +0000
Subject: [PATCH] Issue #3385497: Gin's horizontal dropdown menu appears behind
CKEditor 5's sticky header
---
dist/css/components/ckeditor5.css | 3 ++-
dist/css/layout/classic_toolbar.css | 4 ++++
styles/components/ckeditor5.scss | 3 ++-
styles/layout/classic_toolbar.scss | 4 ++++
4 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/dist/css/components/ckeditor5.css b/dist/css/components/ckeditor5.css
index f8ca9d654..c1baf8474 100644
--- a/dist/css/components/ckeditor5.css
+++ b/dist/css/components/ckeditor5.css
@@ -50,7 +50,8 @@
}
.ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
- top: var(--gin-sticky-offset);
+ z-index: 2;
+ top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;
}
.ck .ck-toolbar__separator {
diff --git a/dist/css/layout/classic_toolbar.css b/dist/css/layout/classic_toolbar.css
index 8001e96fa..f0c582270 100644
--- a/dist/css/layout/classic_toolbar.css
+++ b/dist/css/layout/classic_toolbar.css
@@ -12,6 +12,10 @@
--gin-icon-size-toolbar: 16px;
--gin-scroll-offset: 200px;
}
+
+ :root .gin--edit-form {
+ --gin-sticky-offset: var(--gin-height-sticky);
+ }
}
@media (min-width: 61em) {
diff --git a/styles/components/ckeditor5.scss b/styles/components/ckeditor5.scss
index 3a317d9a5..6f9648aab 100644
--- a/styles/components/ckeditor5.scss
+++ b/styles/components/ckeditor5.scss
@@ -67,7 +67,8 @@
}
&.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
- top: var(--gin-sticky-offset);
+ z-index: 2;
+ top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;
}
.ck-toolbar__separator {
diff --git a/styles/layout/classic_toolbar.scss b/styles/layout/classic_toolbar.scss
index bfab8f83d..4069f4b21 100644
--- a/styles/layout/classic_toolbar.scss
+++ b/styles/layout/classic_toolbar.scss
@@ -10,6 +10,10 @@
@include mq(large) {
--gin-icon-size-toolbar: 16px;
--gin-scroll-offset: 200px;
+
+ .gin--edit-form {
+ --gin-sticky-offset: var(--gin-height-sticky);
+ }
}
}
--
GitLab