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 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>
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
@@ -83,6 +83,20 @@
</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">
<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
@@ -120,6 +134,39 @@
</div>
</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">
<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 {
order: 0;
width: 100%;
padding: 0;
box-shadow: none;
}
.sg-options-row__left > .sg-pulldown-demo,
.sg-options-row__left > .sg-input-single-line-wrap,
.sg-options-row__left > .sg-search-field-row {
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
.sg-options-row__left > .sg-pulldown-demo {
flex: 1 1 100%;
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 {
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,