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

Adjust data columns to two numeric columns

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 13:55:15 +02:00
parent 0f84c79b5e
commit 1ea3b1e36f
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
-3
View File
@@ -56,17 +56,14 @@
<table class="sg-data-table" aria-label="Beispiel Kennzahlen-Spalten" data-component="data-columns"> <table class="sg-data-table" aria-label="Beispiel Kennzahlen-Spalten" data-component="data-columns">
<tbody> <tbody>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">7.7</td> <td class="sg-data-table__value" data-component-part="data-columns-value-cell">7.7</td>
<td data-component-part="data-columns-reference-cell">11.7</td> <td data-component-part="data-columns-reference-cell">11.7</td>
</tr> </tr>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">8.6</td> <td class="sg-data-table__value" data-component-part="data-columns-value-cell">8.6</td>
<td data-component-part="data-columns-reference-cell">9.7</td> <td data-component-part="data-columns-reference-cell">9.7</td>
</tr> </tr>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PEG Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-columns-value-cell" data-component-state="warning">1.23</td> <td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-columns-value-cell" data-component-state="warning">1.23</td>
<td data-component-part="data-columns-reference-cell">1.43</td> <td data-component-part="data-columns-reference-cell">1.43</td>
</tr> </tr>
semantic-tokens-components.html
-2
View File
@@ -196,10 +196,8 @@
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody> <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
<tr><td>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Spaltenliste.</td></tr> <tr><td>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Spaltenliste.</td></tr>
<tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Spaltenzellen.</td></tr> <tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Spaltenzellen.</td></tr>
<tr><td>surface-data-table-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons im Spaltenkontext.</td></tr>
<tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Spaltenzellen.</td></tr> <tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Spaltenzellen.</td></tr>
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Spaltenzellen.</td></tr> <tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Spaltenzellen.</td></tr>
<tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Spalten-Help-Icon.</td></tr>
</tbody></table> </tbody></table>
</section> </section>
styleguide.css
+6 -1
View File
@@ -2482,6 +2482,7 @@ section + section {
/* ========================================================= */ /* ========================================================= */
.sg-data-table { .sg-data-table {
--data-table-column-count: 3;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: var(--surface-data-table); background: var(--surface-data-table);
@@ -2490,13 +2491,17 @@ section + section {
.sg-data-table th, .sg-data-table th,
.sg-data-table td { .sg-data-table td {
width: 33.333%; width: calc(100% / var(--data-table-column-count));
padding: 0 0 var(--spacing-small) 0; padding: 0 0 var(--spacing-small) 0;
border: var(--border-none); border: var(--border-none);
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
.sg-data-table[data-component="data-columns"] {
--data-table-column-count: 2;
}
.sg-data-table th { .sg-data-table th {
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-size: var(--font-size-small); font-size: var(--font-size-small);