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

docs(styleguide): define shared form alignment rule across controls

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:18:24 +02:00
parent 11780533fa
commit 07d3781c3b
3 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+3
View File
@@ -9,6 +9,9 @@
<body> <body>
<h1 class="sg-main-heading">Components – Interactive Elements</h1> <h1 class="sg-main-heading">Components – Interactive Elements</h1>
<p class="sg-body">
Formular-Layout-Regel: Wenn Pulldowns, Slider, Radio-Felder, Checkbox-Felder oder Eingabefelder direkt untereinander als Gruppe dargestellt werden, nutzen alle Zeilen dieselbe Label-Spaltenbreite und denselben horizontalen Abstand zwischen Label und Interaktionselement. Auf Mobile erfolgt der Umbruch komponentenspezifisch in eine einspaltige Darstellung.
</p>
<!-- Component: Link Buttons --> <!-- Component: Link Buttons -->
foundations.html
+1 -1
View File
@@ -134,7 +134,7 @@
<tr><td>chart-axis-label-gap</td><td>5px</td><td>Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.</td></tr> <tr><td>chart-axis-label-gap</td><td>5px</td><td>Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.</td></tr>
<tr><td>chart-grid-line-width</td><td>1px</td><td>Linienstärke von Gridlines und Achsen in Charts.</td></tr> <tr><td>chart-grid-line-width</td><td>1px</td><td>Linienstärke von Gridlines und Achsen in Charts.</td></tr>
<tr><td>chart-line-width</td><td>2px</td><td>Linienstärke der Datenlinie im Line Chart.</td></tr> <tr><td>chart-line-width</td><td>2px</td><td>Linienstärke der Datenlinie im Line Chart.</td></tr>
<tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern.</td></tr> <tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</td></tr>
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr> <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr> <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr> <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
semantic-tokens-components.html
+1 -1
View File
@@ -115,7 +115,7 @@
<tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr> <tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr>
<tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr> <tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr>
<tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</td></tr> <tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</td></tr>
<tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr> <tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</td></tr>
<tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr> <tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
<tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr> <tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr>
<tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr> <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>