diff --git a/foundations.html b/foundations.html index b79abf0..d8425d7 100644 --- a/foundations.html +++ b/foundations.html @@ -166,7 +166,7 @@ object-group-card-max-width650pxMaximale Breite der Group Card im Pattern Object Group Card. object-group-card-height700pxFixe Desktop-Höhe der Group Card im Pattern Object Group Card. delete-confirmation-overlay-offset-block-start10%Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. - delete-confirmation-overlay-max-heightcalc(100vh - 10vh)Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. + delete-confirmation-overlay-max-height100% minus 2 × offset-block-startMaximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. notifications-card-min-width445pxMindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html index 4e96d0d..7c3189d 100644 --- a/patterns/delete-confirmation-overlay.html +++ b/patterns/delete-confirmation-overlay.html @@ -223,12 +223,6 @@ ); 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) => { dialog.hidden = true; @@ -389,7 +383,6 @@ 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/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 1055d13..fe67e08 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -134,7 +134,7 @@ layout-delete-confirmation-target-max-width35remMaximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. layout-delete-confirmation-overlay-width-factor0.8Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). layout-delete-confirmation-overlay-offset-block-start10%Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. - layout-delete-confirmation-overlay-max-heightcalc(100vh - 10vh)Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. + layout-delete-confirmation-overlay-max-height100% minus 2 × offset-block-startMaximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. layout-delete-confirmation-content-gapspacing-smallVertikaler Abstand zwischen den Inhaltsblöcken im Overlay. layout-delete-confirmation-actions-gapspacing-smallHorizontaler Abstand zwischen Abbrechen- und Löschen-Button. layout-delete-confirmation-actions-offset-block-startspacing-largeZusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 01ebb9a..bb1d167 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -231,7 +231,7 @@ --layout-delete-confirmation-target-max-width: 35rem; --layout-delete-confirmation-overlay-width-factor: 0.8; --layout-delete-confirmation-overlay-offset-block-start: 10%; - --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh); + --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start)); --layout-delete-confirmation-content-gap: var(--spacing-small); --layout-delete-confirmation-actions-gap: var(--spacing-small); --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large); diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css index dd319df..f44caac 100644 --- a/styles/27-patterns-delete-confirmation.css +++ b/styles/27-patterns-delete-confirmation.css @@ -42,13 +42,14 @@ .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: 50%; + top: var(--layout-delete-confirmation-overlay-offset-block-start); left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-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)); - height: var(--layout-delete-confirmation-overlay-height, auto); + height: auto; + max-height: var(--layout-delete-confirmation-overlay-max-height); overflow: hidden; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css index f1f6704..2c8080d 100644 --- a/styles/33-layouts-vsf-list-detailseite.css +++ b/styles/33-layouts-vsf-list-detailseite.css @@ -48,10 +48,10 @@ .sg-vsf-list-detail-page__meldungen-overlay-pattern { max-width: 100%; + --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5); } .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card { - top: calc(var(--spacing-large) * 5); transform: translateX(-50%); }