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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 11:00:56 +02:00
parent 593dbe72c3
commit b37b0accb7
5 changed files with 120 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/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>
</header>
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
</button>
</li>
</ul>
<div class="sg-delete-confirmation-pattern__scroll-region">
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<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-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
</button>
</li>
</ul>
<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>
<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>
</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>
<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-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>
<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">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">Name</span>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Name eingeben"
aria-label="Name"
maxlength="80"
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>
</label>
<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">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">Name</span>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Name eingeben"
aria-label="Name"
maxlength="80"
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>
</label>
<label class="sg-labeled-input-row">
<span class="sg-label">Beschreibung</span>
<textarea
class="sg-input-multi-line sg-form-inactive-selectable"
rows="4"
placeholder="Beschreibung eingeben"
aria-label="Beschreibung"
maxlength="350"
></textarea>
</label>
</div>
</section>
</div>
<label class="sg-labeled-input-row">
<span class="sg-label">Beschreibung</span>
<textarea
class="sg-input-multi-line sg-form-inactive-selectable"
rows="4"
placeholder="Beschreibung eingeben"
aria-label="Beschreibung"
maxlength="350"
></textarea>
</label>
</div>
</section>
</div>
</form>
</form>
</div>
</div>
</div>
docs/styleguide/styles/27-patterns-delete-confirmation.css
+15 -2
View File
@@ -49,13 +49,13 @@
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
height: var(--layout-delete-confirmation-overlay-height, auto);
overflow: auto;
overflow: hidden;
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;
overflow: hidden;
}
.sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -69,9 +69,18 @@
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 {
border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card);
flex: 0 0 auto;
}
.sg-delete-confirmation-pattern__list {
@@ -165,6 +174,10 @@
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 {
width: 100%;
}
public/assets/styleguide.upstream.css
+15 -2
View File
@@ -2828,13 +2828,13 @@ section + section {
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
height: var(--layout-delete-confirmation-overlay-height, auto);
overflow: auto;
overflow: hidden;
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;
overflow: hidden;
}
.sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -2848,9 +2848,18 @@ section + section {
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 {
border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card);
flex: 0 0 auto;
}
.sg-delete-confirmation-pattern__list {
@@ -2944,6 +2953,10 @@ section + section {
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 {
width: 100%;
}
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "27bb573",
"syncedAtUtc": "2026-06-16T08:53:21Z",
"styleguideCommit": "899af96",
"syncedAtUtc": "2026-06-16T09:00:56Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
public/assets/styles.css
+15 -2
View File
@@ -2828,13 +2828,13 @@ section + section {
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
height: var(--layout-delete-confirmation-overlay-height, auto);
overflow: auto;
overflow: hidden;
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;
overflow: hidden;
}
.sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -2848,9 +2848,18 @@ section + section {
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 {
border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card);
flex: 0 0 auto;
}
.sg-delete-confirmation-pattern__list {
@@ -2944,6 +2953,10 @@ section + section {
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 {
width: 100%;
}