gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep add-to-list overlay header and footer fixed

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 11:00:39 +02:00
parent 27bb573191
commit 899af962a6
2 changed files with 88 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+73 -71
View File
@@ -108,83 +108,85 @@
<p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p> <p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p>
</header> </header>
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"> <div class="sg-delete-confirmation-pattern__scroll-region">
<ul class="sg-delete-confirmation-pattern__list" aria-label="Listen"> <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<li class="sg-delete-confirmation-pattern__list-item"> <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true"> <li class="sg-delete-confirmation-pattern__list-item">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span> <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true">
<span class="sg-delete-confirmation-pattern__list-label">Liste 1</span> <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
</button> <span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
</li> </button>
<li class="sg-delete-confirmation-pattern__list-item"> </li>
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true"> <li class="sg-delete-confirmation-pattern__list-item">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span> <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true">
<span class="sg-delete-confirmation-pattern__list-label">Liste 2</span> <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
</button> <span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
</li> </button>
<li class="sg-delete-confirmation-pattern__list-item"> </li>
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false"> <li class="sg-delete-confirmation-pattern__list-item">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span> <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-label">Liste 3</span> <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
</button> <span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
</li> </button>
<li class="sg-delete-confirmation-pattern__list-item"> </li>
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false"> <li class="sg-delete-confirmation-pattern__list-item">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span> <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-label">Liste 4</span> <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
</button> <span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
</li> </button>
<li class="sg-delete-confirmation-pattern__list-item"> </li>
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false"> <li class="sg-delete-confirmation-pattern__list-item">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span> <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-label">Liste 5</span> <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
</button> <span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
</li> </button>
</ul> </li>
</ul>
<div class="sg-delete-confirmation-pattern__actions"> <div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active sg-delete-confirmation-pattern__create-list-toggle" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button> <button class="sg-interaction-element sg-button sg-button--active sg-delete-confirmation-pattern__create-list-toggle" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
</div>
</div> </div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden> <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden>
<p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p> <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p>
<div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten"> <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten">
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular"> <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
<div class="sg-form-sections-card__body" data-pattern-part="form-body"> <div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste"> <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
<div class="sg-form-sections-card__field-group"> <div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Name</span> <span class="sg-label">Name</span>
<span class="sg-input-validation-stack"> <span class="sg-input-validation-stack">
<input <input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text" type="text"
placeholder="Name eingeben" placeholder="Name eingeben"
aria-label="Name" aria-label="Name"
maxlength="80" maxlength="80"
aria-describedby="create-list-name-error" aria-describedby="create-list-name-error"
> >
<span class="sg-form-validation-text" id="create-list-name-error" hidden>Eine Liste mit diesem Namen existiert bereits.</span> <span class="sg-form-validation-text" id="create-list-name-error" hidden>Eine Liste mit diesem Namen existiert bereits.</span>
</span> </span>
</label> </label>
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Beschreibung</span> <span class="sg-label">Beschreibung</span>
<textarea <textarea
class="sg-input-multi-line sg-form-inactive-selectable" class="sg-input-multi-line sg-form-inactive-selectable"
rows="4" rows="4"
placeholder="Beschreibung eingeben" placeholder="Beschreibung eingeben"
aria-label="Beschreibung" aria-label="Beschreibung"
maxlength="350" maxlength="350"
></textarea> ></textarea>
</label> </label>
</div> </div>
</section> </section>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
styles/27-patterns-delete-confirmation.css
+15 -2
View File
@@ -49,13 +49,13 @@
box-sizing: border-box; box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
height: var(--layout-delete-confirmation-overlay-height, auto); height: var(--layout-delete-confirmation-overlay-height, auto);
overflow: auto; overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay); z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay); box-shadow: var(--shadow-overlay);
} }
.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host { .sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
overflow: auto; overflow: hidden;
} }
.sg-delete-confirmation-pattern__floating-card[hidden] { .sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -69,9 +69,18 @@
background: var(--surface-delete-confirmation-overlay); background: var(--surface-delete-confirmation-overlay);
} }
.sg-delete-confirmation-pattern__scroll-region {
display: flex;
flex: 1 1 auto;
min-height: 0;
flex-direction: column;
overflow: auto;
}
.sg-delete-confirmation-pattern__actions-segment { .sg-delete-confirmation-pattern__actions-segment {
border-bottom-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card);
flex: 0 0 auto;
} }
.sg-delete-confirmation-pattern__list { .sg-delete-confirmation-pattern__list {
@@ -165,6 +174,10 @@
margin-top: 0; margin-top: 0;
} }
.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
flex: 0 0 auto;
}
.sg-delete-confirmation-pattern__create-list-toggle { .sg-delete-confirmation-pattern__create-list-toggle {
width: 100%; width: 100%;
} }