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

Add left-only options row variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 14:30:00 +02:00
parent 128117824c
commit be83f6e69c
2 changed files with 109 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/options-row.html
+91
View File
@@ -120,6 +120,97 @@
</div>
</section>
<section id="pattern-options-row-left-only">
<p class="sg-preview-label">Pattern: Options row left only</p>
<p class="sg-table-label" style="color: var(--text-options-row-description);">
Desktop/Tablet: nur linksbündige Elemente innerhalb einer gemeinsamen Options Row.
</p>
<p class="sg-table-label" style="color: var(--text-options-row-description);">
Mobile: keine zweite Segmentierung, die linke Gruppe bleibt als einziger Block erhalten.
</p>
<div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile nur links" data-pattern="options-row-left-only">
<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="Pulldown Kategorie" data-component-part="pulldown-trigger" data-label-base="Kategorie">
Kategorie
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Kategorie" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Kategorienoptionen">
<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>
<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"
aria-label="Suche"
>
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
</span>
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
</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="Pulldown Status" data-component-part="pulldown-trigger" data-label-base="Status">
Status
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Status" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Statusoptionen">
<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>
</div>
</div>
</section>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
styles/21-patterns-options-row.css
+18 -1
View File
@@ -29,6 +29,10 @@
background: var(--surface-options-row);
}
.sg-options-row--left-only {
justify-content: flex-start;
}
.sg-options-row__left,
.sg-options-row__right {
display: flex;
@@ -73,6 +77,20 @@
box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
}
.sg-options-row--left-only {
flex-direction: row;
gap: var(--layout-options-row-main-gap);
padding:
var(--card-segment-padding-vertical)
var(--layout-page-content-inset-inline);
}
.sg-options-row--left-only .sg-options-row__left {
order: 0;
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 {
@@ -161,4 +179,3 @@
grid-column: 1 / -1;
}
}