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

Align multiselect fallback width with semantic pattern token

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 09:04:13 +02:00
parent ee2a24e012
commit 9c6fd2d62f
3 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
semantic-tokens-patterns.html
+5
View File
@@ -86,6 +86,11 @@
<tr><td>text-align-text-layout-column-center</td><td>center</td><td>Textausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt.</td></tr> <tr><td>text-align-text-layout-column-center</td><td>center</td><td>Textausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt.</td></tr>
<tr><td>text-align-text-layout-column-right</td><td>right</td><td>Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.</td></tr> <tr><td>text-align-text-layout-column-right</td><td>right</td><td>Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.</td></tr>
</tbody></table> </tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Multiselektions-Pulldown</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
<tr><td>layout-multiselect-pulldown-label-column-width-fallback</td><td>max-content</td><td>Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.</td></tr>
</tbody></table>
</section> </section>
</body> </body>
styles/01-foundations.css
+1 -1
View File
@@ -77,6 +77,7 @@
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel); --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
--layout-input-label-width: var(--dimension-input-label-width); --layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
--layout-input-field-max-width: var(--dimension-input-field-max-width); --layout-input-field-max-width: var(--dimension-input-field-max-width);
@@ -279,4 +280,3 @@
--sg-slider-progress: 0%; --sg-slider-progress: 0%;
--chart-label-position: var(--chart-label-position-default); --chart-label-position: var(--chart-label-position-default);
} }
styles/25-patterns-form-sections.css
+1 -2
View File
@@ -74,7 +74,7 @@
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
--sg-multiselect-label-column-width: max-content; --sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback);
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
@@ -274,4 +274,3 @@
flex-direction: column; flex-direction: column;
gap: var(--layout-content-cards-group-gap); gap: var(--layout-content-cards-group-gap);
} }