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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-08-03 16:58:45 +02:00
parent ec82a05cae
commit 095da274cb
7 changed files with 148 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/public-page-components.html
+18
View File
@@ -51,6 +51,24 @@
</div>
</section>
<section id="component-call-to-action-card-three-column">
<p class="sg-preview-label">Component: Call to action Card – Drei-Spalten-Variante</p>
<div class="sg-preview-area">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Call to action Card Drei-Spalten-Variante">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">Mit dem Newsletter immer über neue Inhalte informiert bleiben.</p>
<div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}" required>
</div>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">Prozess Button</button>
</div>
</div>
</article>
</div>
</section>
<section id="component-picture-full-width">
<p class="sg-preview-label">Component: Picture Full Width</p>
docs/styleguide/patterns/public-page-patterns.html
+57
View File
@@ -192,6 +192,63 @@
</div>
</div>
<p class="sg-preview-label">Pattern: Newsletter Form</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Newsletter Form">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">
Mit dem Newsletter immer über neue Inhalte informiert bleiben.
</p>
<div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="email"
placeholder="E-Mail-Adresse"
aria-label="E-Mail-Adresse"
pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}"
required
>
</div>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="submit" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">
Prozess Button
</button>
</div>
</div>
</article>
</div>
</div>
<script>
(() => {
const newsletterForm = document.querySelector('.sg-card--call-to-action-card--three-column');
if (!newsletterForm) {
return;
}
const input = newsletterForm.querySelector('input[type="email"]');
const processButton = newsletterForm.querySelector('.sg-button--process');
if (!input || !processButton) {
return;
}
const updateProcessButtonState = () => {
const isActive = input.checkValidity();
processButton.disabled = !isActive;
processButton.setAttribute('aria-disabled', String(!isActive));
processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');
processButton.classList.toggle('sg-button--process-inactive', !isActive);
};
input.addEventListener('input', updateProcessButtonState);
updateProcessButtonState();
})();
</script>
<p class="sg-preview-label">pattern: Public Call to Action Box</p>
<div class="sg-preview-area">
docs/styleguide/semantic-tokens-components.html
+2 -2
View File
@@ -122,8 +122,8 @@
<tbody>
<tr><td>surface-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
<tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
<tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5)</td><td>Breite der Card im Page-Layout.</td></tr>
<tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</td></tr>
<tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Drei-Spalten-Variante nutzt die volle Content-Breite.</td></tr>
<tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-Variante</td><td>Zweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig.</td></tr>
<tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
</tbody>
</table>
docs/styleguide/styles/44-components-public-page-components.css
+23
View File
@@ -48,6 +48,11 @@
max-width: 100%;
}
.sg-card--call-to-action-card--three-column {
--layout-call-to-action-card-width: var(--dimension-public-content-width);
--layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
}
.sg-card--call-to-action-card .sg-card-segment--body {
display: grid;
grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -69,6 +74,16 @@
justify-content: flex-end;
}
.sg-card--call-to-action-card--three-column .sg-labeled-input-row {
min-width: 0;
}
.sg-card--call-to-action-card--three-column .sg-input-single-line {
width: 100%;
min-width: 0;
max-width: 100%;
}
.sg-call-to-action-card--align-right {
margin-left: auto;
}
@@ -92,4 +107,12 @@
.sg-card--call-to-action-card {
width: 100%;
}
.sg-card--call-to-action-card--three-column {
--layout-call-to-action-card-content-columns: minmax(0, 1fr);
}
.sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
justify-content: flex-end;
}
}