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-22 18:24:16 +02:00
parent 36260d03c7
commit f485121cfd
6 changed files with 184 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/interactive-elements.html
+77
View File
@@ -149,6 +149,46 @@
</div>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<div class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<div class="sg-input-validation-stack">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="invalid">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit Validierung" aria-invalid="true" aria-describedby="pulldown-invalid-feedback" data-component-part="pulldown-trigger">
Auswahl
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes invalides Pulldown" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im invaliden Pulldown">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 1</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 2</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 3</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4</span>
</li>
<li class="sg-pulldown-option sg-pulldown-option--disabled">
<span>Menüpunkt 5</span>
</li>
</ul>
</div>
</div>
<span class="sg-form-validation-text" id="pulldown-invalid-feedback">Bitte eine gültige Auswahl treffen.</span>
</div>
</div>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
@@ -493,6 +533,19 @@
</button>
<span>Option nicht verfügbar</span>
</label>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<div class="sg-input-validation-stack sg-input-validation-stack--checkbox-invalid">
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="default">
<button class="sg-checkbox-field" type="button" role="checkbox" aria-checked="false" aria-label="Standard Checkbox mit Validierung" aria-invalid="true" aria-describedby="checkbox-invalid-feedback">
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Standard Checkbox</span>
</label>
<span class="sg-form-validation-text" id="checkbox-invalid-feedback">Bitte mindestens eine Option auswählen.</span>
</div>
</div>
</div>
</section>
@@ -568,6 +621,30 @@
</span>
</label>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<div class="sg-labeled-input-row sg-labeled-input-row--radio-invalid">
<span class="sg-label">Label</span>
<span class="sg-radio-field-row">
<span class="sg-radio-activatable-group__choices">
<span class="sg-radio-activatable-group__choice">
<button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>Radio 1</span>
</span>
<span class="sg-radio-activatable-group__choice">
<button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 2 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>Radio 2</span>
</span>
</span>
</span>
<span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
</div>
</div>
<div class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
<span class="sg-state-example__label sg-table-label">Variante ohne Gesamtlabel</span>
<span class="sg-radio-field-row sg-radio-field-row--without-label">
docs/styleguide/styles/10-components-interactive-elements.css
+34
View File
@@ -407,10 +407,44 @@
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-pulldown[aria-invalid="true"],
.sg-checkbox-field[aria-invalid="true"],
.sg-radio-field[aria-invalid="true"] {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-labeled-input-row:has(.sg-input-multi-line) {
align-items: flex-start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--spacing-large);
row-gap: var(--spacing-small);
align-items: start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
grid-column: 1;
grid-row: 1;
margin-right: 0;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
grid-column: 2;
grid-row: 1;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
grid-column: 1 / -1;
grid-row: 2;
}
#component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
gap: calc(var(--spacing-small) / 4);
}
.sg-input-multi-line {
box-sizing: border-box;
min-height: calc(var(--interaction-height) * 2.75);
docs/styleguide/styles/37-layouts-page-layout-public.css
+1 -1
View File
@@ -20,7 +20,7 @@ main {
}
.sg-page-layout-public__content-mirror {
width: 70vw;
width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
max-width: 1100px;
margin-inline: auto;
display: flex;
public/assets/styleguide.upstream.css
+35 -1
View File
@@ -897,10 +897,44 @@ section + section {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-pulldown[aria-invalid="true"],
.sg-checkbox-field[aria-invalid="true"],
.sg-radio-field[aria-invalid="true"] {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-labeled-input-row:has(.sg-input-multi-line) {
align-items: flex-start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--spacing-large);
row-gap: var(--spacing-small);
align-items: start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
grid-column: 1;
grid-row: 1;
margin-right: 0;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
grid-column: 2;
grid-row: 1;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
grid-column: 1 / -1;
grid-row: 2;
}
#component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
gap: calc(var(--spacing-small) / 4);
}
.sg-input-multi-line {
box-sizing: border-box;
min-height: calc(var(--interaction-height) * 2.75);
@@ -3380,7 +3414,7 @@ main {
}
.sg-page-layout-public__content-mirror {
width: 70vw;
width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
max-width: 1100px;
margin-inline: auto;
display: flex;
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "6c103d1",
"syncedAtUtc": "2026-06-22T13:27:18Z",
"styleguideCommit": "1f478a8",
"syncedAtUtc": "2026-06-22T16:24:15Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
public/assets/styles.css
+35 -1
View File
@@ -897,10 +897,44 @@ section + section {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-pulldown[aria-invalid="true"],
.sg-checkbox-field[aria-invalid="true"],
.sg-radio-field[aria-invalid="true"] {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-labeled-input-row:has(.sg-input-multi-line) {
align-items: flex-start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--spacing-large);
row-gap: var(--spacing-small);
align-items: start;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
grid-column: 1;
grid-row: 1;
margin-right: 0;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
grid-column: 2;
grid-row: 1;
}
#component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
grid-column: 1 / -1;
grid-row: 2;
}
#component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
gap: calc(var(--spacing-small) / 4);
}
.sg-input-multi-line {
box-sizing: border-box;
min-height: calc(var(--interaction-height) * 2.75);
@@ -3380,7 +3414,7 @@ main {
}
.sg-page-layout-public__content-mirror {
width: 70vw;
width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
max-width: 1100px;
margin-inline: auto;
display: flex;