From 593dbe72c325b14489473dd8a1b8c3eff0170479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 16 Jun 2026 10:53:21 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- .../patterns/delete-confirmation-overlay.html | 6 ++++++ .../styles/27-patterns-delete-confirmation.css | 11 ++++++++--- public/assets/styleguide.upstream.css | 11 ++++++++--- public/assets/styleguide.upstream.meta.json | 4 ++-- public/assets/styles.css | 11 ++++++++--- 5 files changed, 32 insertions(+), 11 deletions(-) diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html index 2124044..66e316f 100644 --- a/docs/styleguide/patterns/delete-confirmation-overlay.html +++ b/docs/styleguide/patterns/delete-confirmation-overlay.html @@ -221,6 +221,11 @@ ); let draftListIds = new Set(committedListIds); let resetAddToListDraftState = () => {}; + const updateFloatingCardHeight = (dialog) => { + const stageHeight = stage.getBoundingClientRect().height; + const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9)); + dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`); + }; const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => { stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => { @@ -382,6 +387,7 @@ closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' }); dialog.hidden = false; + updateFloatingCardHeight(dialog); stage.dataset.dialogOpen = 'true'; const menuWrap = link.closest('.sg-sandwich-menu-wrap'); diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css index 87791ec..9b2a9ea 100644 --- a/docs/styleguide/styles/27-patterns-delete-confirmation.css +++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css @@ -9,6 +9,7 @@ .sg-delete-confirmation-pattern__stage { position: relative; + overflow: visible; } .sg-delete-confirmation-pattern__host { @@ -41,18 +42,22 @@ .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: var(--layout-delete-confirmation-overlay-offset-block-start); + top: 50%; left: 50%; - transform: translateX(-50%); + transform: translate(-50%, -50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - max-height: var(--layout-delete-confirmation-overlay-max-height); + height: var(--layout-delete-confirmation-overlay-height, auto); overflow: auto; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); } +.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host { + overflow: auto; +} + .sg-delete-confirmation-pattern__floating-card[hidden] { display: none; } diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index e2c5f4c..c4787e7 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -2788,6 +2788,7 @@ section + section { .sg-delete-confirmation-pattern__stage { position: relative; + overflow: visible; } .sg-delete-confirmation-pattern__host { @@ -2820,18 +2821,22 @@ section + section { .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: var(--layout-delete-confirmation-overlay-offset-block-start); + top: 50%; left: 50%; - transform: translateX(-50%); + transform: translate(-50%, -50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - max-height: var(--layout-delete-confirmation-overlay-max-height); + height: var(--layout-delete-confirmation-overlay-height, auto); overflow: auto; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); } +.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host { + overflow: auto; +} + .sg-delete-confirmation-pattern__floating-card[hidden] { display: none; } diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 1d968fa..4841340 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "67c869b", - "syncedAtUtc": "2026-06-16T07:41:54Z", + "styleguideCommit": "27bb573", + "syncedAtUtc": "2026-06-16T08:53:21Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index e2c5f4c..c4787e7 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -2788,6 +2788,7 @@ section + section { .sg-delete-confirmation-pattern__stage { position: relative; + overflow: visible; } .sg-delete-confirmation-pattern__host { @@ -2820,18 +2821,22 @@ section + section { .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: var(--layout-delete-confirmation-overlay-offset-block-start); + top: 50%; left: 50%; - transform: translateX(-50%); + transform: translate(-50%, -50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - max-height: var(--layout-delete-confirmation-overlay-max-height); + height: var(--layout-delete-confirmation-overlay-height, auto); overflow: auto; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); } +.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host { + overflow: auto; +} + .sg-delete-confirmation-pattern__floating-card[hidden] { display: none; }