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

Remove gridfield and tune pulldown spacing

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-10 13:27:33 +02:00
parent 9f99482a93
commit a50ed1d8e8
7 changed files with 4 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/gridfield.html
-42
View File
@@ -1,42 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Gridfield</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body class="sg-page-gridfield">
<h1 class="sg-main-heading">Components – Gridfield</h1>
<section id="component-gridfield">
<p class="sg-preview-label">Component: Gridfield</p>
<div class="sg-gridfield-demo" data-component="gridfield">
<div class="sg-gridfield-row" data-gridfield-state="normal">
<p class="sg-table-label">Komponente normal</p>
<span class="sg-label">Label</span>
<select class="sg-interaction-element sg-pulldown" aria-label="Gridfield Pulldown">
<option selected>Auswahl</option>
</select>
</div>
<div class="sg-gridfield-row" data-gridfield-state="input">
<p class="sg-table-label">Eingabefeld</p>
<span class="sg-label">Label</span>
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Einzeiliges Eingabefeld" aria-label="Gridfield Eingabefeld">
</div>
<div class="sg-gridfield-row" data-gridfield-state="disabled">
<p class="sg-table-label">form-disabled</p>
<span class="sg-label">Label</span>
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Gridfield deaktivierter Pulldown" disabled>
<option>Nicht verfügbar</option>
</select>
</div>
</div>
</section>
</body>
</html>
index.html
-1
View File
@@ -28,7 +28,6 @@
<ul class="sg-index-list"> <ul class="sg-index-list">
<li><a href="./components/cards.html">Cards</a></li> <li><a href="./components/cards.html">Cards</a></li>
<li><a href="./components/gridfield.html">Gridfield</a></li>
<li><a href="./components/interactive-elements.html">Interactive Elements</a></li> <li><a href="./components/interactive-elements.html">Interactive Elements</a></li>
<li><a href="./components/charts.html">Charts</a></li> <li><a href="./components/charts.html">Charts</a></li>
<li><a href="./components/data-display.html">Data Display</a></li> <li><a href="./components/data-display.html">Data Display</a></li>
semantic-tokens-components.html
-8
View File
@@ -122,14 +122,6 @@
<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>
</tbody></table> </tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Gridfield</h3>
<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>layout-gridfield-label-column-width</td><td>layout-input-label-width</td><td>Breite der Label-Spalte der Gridfield-Zeile.</td></tr>
<tr><td>layout-gridfield-column-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Label und Control in der Gridfield-Zeile.</td></tr>
<tr><td>layout-gridfield-row-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Label und Control in gestapelten Gridfield-Zeilen.</td></tr>
<tr><td>layout-gridfield-field-max-width</td><td>layout-input-field-max-width</td><td>Maximale Breite des Control-Bereichs im Gridfield.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3> <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
<p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p> <p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p>
<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>
styleguide.css
-1
View File
@@ -2,7 +2,6 @@
@import "./styles/02-base.css"; @import "./styles/02-base.css";
@import "./styles/03-typography-helpers.css"; @import "./styles/03-typography-helpers.css";
@import "./styles/10-components-interactive-elements.css"; @import "./styles/10-components-interactive-elements.css";
@import "./styles/11-components-gridfield.css";
@import "./styles/20-patterns-portal-header.css"; @import "./styles/20-patterns-portal-header.css";
@import "./styles/21-patterns-options-row.css"; @import "./styles/21-patterns-options-row.css";
@import "./styles/22-patterns-object-card.css"; @import "./styles/22-patterns-object-card.css";
styles/01-foundations.css
-4
View File
@@ -81,10 +81,6 @@
--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);
--layout-gridfield-label-column-width: var(--layout-input-label-width);
--layout-gridfield-column-gap: var(--spacing-small);
--layout-gridfield-row-gap: var(--spacing-small);
--layout-gridfield-field-max-width: var(--layout-input-field-max-width);
--layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px); --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
--layout-search-field-width: var(--dimension-search-field-width); --layout-search-field-width: var(--dimension-search-field-width);
--layout-mode-toggle-local-height: var(--compact-interaction-height); --layout-mode-toggle-local-height: var(--compact-interaction-height);
styles/10-components-interactive-elements.css
+4 -4
View File
@@ -520,10 +520,9 @@
} }
#component-pulldown .sg-labeled-input-row { #component-pulldown .sg-labeled-input-row {
display: grid; flex-direction: column;
grid-template-columns: max-content minmax(0, 1fr); align-items: flex-start;
align-items: center; gap: var(--spacing-small);
column-gap: var(--spacing-small);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
@@ -554,6 +553,7 @@
.sg-labeled-input-row { .sg-labeled-input-row {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: var(--spacing-small);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
styles/11-components-gridfield.css
-52
View File
@@ -1,52 +0,0 @@
/* ========================================================= */
/* Components: Gridfield */
/* ========================================================= */
.sg-gridfield-demo {
display: inline-flex;
flex-direction: column;
gap: var(--spacing-small);
width: fit-content;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-form-preview);
}
.sg-gridfield-row {
display: grid;
grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
column-gap: var(--layout-gridfield-column-gap);
align-items: center;
width: 100%;
max-width: var(--layout-gridfield-field-max-width);
}
.sg-gridfield-row .sg-label {
min-width: 0;
margin: 0;
line-height: 1;
color: var(--text-control-default);
}
.sg-gridfield-row .sg-interaction-element,
.sg-gridfield-row .sg-pulldown-demo,
.sg-gridfield-row .sg-pulldown {
width: 100%;
min-width: 0;
max-width: 100%;
}
@media (max-width: 48rem) {
.sg-gridfield-demo {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.sg-gridfield-row {
grid-template-columns: 1fr;
row-gap: var(--layout-gridfield-row-gap);
align-items: start;
max-width: 100%;
}
}