diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index ce87d26..04ce297 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -148,45 +148,47 @@
-
+
Füge das Unternehmen einer neuen Liste hinzu
-
@@ -202,6 +204,7 @@
const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
const createListTitle = stage.querySelector('[data-create-list-title]');
+ const createListSegment = stage.querySelector('[data-create-list-form]');
const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
@@ -216,11 +219,8 @@
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true;
});
- if (createListForm) {
- createListForm.hidden = true;
- }
- if (createListTitle) {
- createListTitle.hidden = true;
+ if (createListSegment) {
+ createListSegment.hidden = true;
}
if (createListFormToggle) {
createListFormToggle.disabled = false;
@@ -300,9 +300,8 @@
createListFormToggle.addEventListener('click', (event) => {
event.preventDefault();
- createListForm.hidden = false;
- if (createListTitle) {
- createListTitle.hidden = false;
+ if (createListSegment) {
+ createListSegment.hidden = false;
}
createListFormToggle.setAttribute('aria-expanded', 'true');
createListFormToggle.classList.remove('sg-button--active');
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index 6c2686a..ce94493 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -114,8 +114,12 @@
margin-top: 0;
}
+.sg-delete-confirmation-pattern__create-list-segment {
+ gap: 0;
+}
+
.sg-delete-confirmation-pattern__create-list-title {
- margin: calc(var(--spacing-large) - var(--layout-delete-confirmation-content-gap)) 0 calc(var(--spacing-large) - var(--layout-delete-confirmation-content-gap)) 0;
+ margin: 0 0 var(--spacing-large) 0;
}
.sg-delete-confirmation-pattern__create-list-form[hidden] {