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

Sync styleguide 2026.05.18.2

Browse Source
This commit is contained in:
gitea_admin committed 2026-09-24 13:00:00 +02:00
1 parent 0c04caeb67
commit 53baf0dfbf
5 files changed
+125 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/styleguide/patterns/options-row.html
+48 -1
View File
@@ -17,7 +17,7 @@
</p> </p>
<p class="sg-table-label" style="color: var(--text-options-row-description);"> <p class="sg-table-label" style="color: var(--text-options-row-description);">
Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um. Mobile: Pulldowns stehen mit maximal zwei Elementen pro Zeile; ein Suchfeld steht immer allein in einer 100-%-Zeile.
</p> </p>
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row"> <div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
@@ -83,6 +83,20 @@
</div> </div>
</div> </div>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Very long English label for market selection" data-component-part="pulldown-trigger" data-label-base="Very long English market selection label">
Very long English market selection label
</button>
<div class="sg-pulldown-panel" aria-label="Opened market selection" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Market options">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>United Kingdom</span>
</li>
</ul>
</div>
</div>
<div class="sg-search-field-row"> <div class="sg-search-field-row">
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable"> <span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
<input <input
@@ -120,6 +134,39 @@
</div> </div>
</section> </section>
<section id="pattern-options-row-mobile-cases">
<p class="sg-preview-label">Pattern: Options Row – Mobile-Fälle</p>
<p class="sg-table-label" style="color: var(--text-options-row-description);">
Prüffälle: kein Pulldown, ein Pulldown, Suchfeld ohne Ergebniszähler sowie lange deutsche Beschriftung.
</p>
<div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile ohne Pulldown" data-pattern="options-row-mobile-no-pulldown">
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
<div class="sg-search-field-row">
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche ohne Ergebniszähler" aria-label="Suche ohne Ergebniszähler">
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
</span>
</div>
</div>
</div>
<div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile mit einem Pulldown" data-pattern="options-row-mobile-one-pulldown">
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Sehr lange deutsche Beschriftung für eine Auswahl" data-component-part="pulldown-trigger" data-label-base="Sehr lange deutsche Beschriftung für eine Auswahl">
Sehr lange deutsche Beschriftung für eine Auswahl
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnete Auswahl" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Auswahloptionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Option</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="pattern-options-row-left-only"> <section id="pattern-options-row-left-only">
<p class="sg-preview-label">Pattern: Options row left only</p> <p class="sg-preview-label">Pattern: Options row left only</p>
docs/styleguide/styles/21-patterns-options-row.css
+25 -5
View File
@@ -91,19 +91,39 @@
.sg-options-row--left-only .sg-options-row__left { .sg-options-row--left-only .sg-options-row__left {
order: 0; order: 0;
width: 100%;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
} }
.sg-options-row__left > .sg-pulldown-demo, .sg-options-row__left > .sg-pulldown-demo {
.sg-options-row__left > .sg-input-single-line-wrap, flex: 1 1 100%;
.sg-options-row__left > .sg-search-field-row {
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
min-width: 0; min-width: 0;
} }
.sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo {
flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2));
}
.sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo {
flex-basis: 100%;
}
.sg-options-row__left > .sg-search-field-row { .sg-options-row__left > .sg-search-field-row {
flex: 0 0 auto; flex: 0 0 100%;
width: 100%;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row > .sg-search-field-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row .sg-input-single-line {
width: 100%;
min-width: 0;
} }
.sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
public/assets/styleguide.upstream.css
+25 -5
View File
@@ -2627,19 +2627,39 @@ section + section {
.sg-options-row--left-only .sg-options-row__left { .sg-options-row--left-only .sg-options-row__left {
order: 0; order: 0;
width: 100%;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
} }
.sg-options-row__left > .sg-pulldown-demo, .sg-options-row__left > .sg-pulldown-demo {
.sg-options-row__left > .sg-input-single-line-wrap, flex: 1 1 100%;
.sg-options-row__left > .sg-search-field-row {
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
min-width: 0; min-width: 0;
} }
.sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo {
flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2));
}
.sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo {
flex-basis: 100%;
}
.sg-options-row__left > .sg-search-field-row { .sg-options-row__left > .sg-search-field-row {
flex: 0 0 auto; flex: 0 0 100%;
width: 100%;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row > .sg-search-field-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row .sg-input-single-line {
width: 100%;
min-width: 0;
} }
.sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"styleguideVersion": "2026.05.18.2", "styleguideVersion": "2026.05.18.2",
"styleguideCommit": "08bf51e", "styleguideCommit": "519ed6b",
"syncedAtUtc": "2026-09-22T09:50:21Z", "syncedAtUtc": "2026-09-24T11:00:00Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide" "mirroredDocsPath": "docs/styleguide"
} }
public/assets/styles.css
+25 -5
View File
@@ -2627,19 +2627,39 @@ section + section {
.sg-options-row--left-only .sg-options-row__left { .sg-options-row--left-only .sg-options-row__left {
order: 0; order: 0;
width: 100%;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
} }
.sg-options-row__left > .sg-pulldown-demo, .sg-options-row__left > .sg-pulldown-demo {
.sg-options-row__left > .sg-input-single-line-wrap, flex: 1 1 100%;
.sg-options-row__left > .sg-search-field-row {
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
min-width: 0; min-width: 0;
} }
.sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo {
flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2));
}
.sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo {
flex-basis: 100%;
}
.sg-options-row__left > .sg-search-field-row { .sg-options-row__left > .sg-search-field-row {
flex: 0 0 auto; flex: 0 0 100%;
width: 100%;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row > .sg-search-field-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.sg-options-row__left > .sg-search-field-row .sg-input-single-line {
width: 100%;
min-width: 0;
} }
.sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,