Remove gridfield and tune pulldown spacing
This commit is contained in:
@@ -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>
|
||||
@@ -28,7 +28,6 @@
|
||||
|
||||
<ul class="sg-index-list">
|
||||
<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/charts.html">Charts</a></li>
|
||||
<li><a href="./components/data-display.html">Data Display</a></li>
|
||||
|
||||
@@ -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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
@import "./styles/02-base.css";
|
||||
@import "./styles/03-typography-helpers.css";
|
||||
@import "./styles/10-components-interactive-elements.css";
|
||||
@import "./styles/11-components-gridfield.css";
|
||||
@import "./styles/20-patterns-portal-header.css";
|
||||
@import "./styles/21-patterns-options-row.css";
|
||||
@import "./styles/22-patterns-object-card.css";
|
||||
|
||||
@@ -81,10 +81,6 @@
|
||||
--layout-input-label-width: var(--dimension-input-label-width);
|
||||
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-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-search-field-width: var(--dimension-search-field-width);
|
||||
--layout-mode-toggle-local-height: var(--compact-interaction-height);
|
||||
|
||||
@@ -520,10 +520,9 @@
|
||||
}
|
||||
|
||||
#component-pulldown .sg-labeled-input-row {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-small);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -554,6 +553,7 @@
|
||||
.sg-labeled-input-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user