Commit current styleguide updates
This commit is contained in:
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Write",
|
||||||
|
"Edit",
|
||||||
|
"Bash"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,144 +1,137 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
name: styleguide erstellung
|
name: styleguide-erstellung
|
||||||
description: Verwenden für jede Weiterentwicklung oder Prüfung des zentralen Styleguides: CSS, HTML, Tokens, Components, Patterns, Layouts, Templates, Doku oder Styleguide-Struktur. Erzwingt ein kaskadierendes, portalübergreifendes Design-System ohne lokale Insellösungen, Workarounds, Hardcoded Design Values oder redundante UI-Bausteine.
|
description: Verwenden für Arbeiten am zentralen Styleguide: CSS, HTML, Foundation Tokens, semantische Tokens, Components, Patterns, Layouts, Templates, Pages, Doku oder Styleguide-Struktur. Erzwingt ein kaskadierendes, portalübergreifendes Design-System. Keine lokalen Styles, Insel-Tokens, Overrides, Workarounds, hardcoded Design Values, redundanten UI-Bausteine oder visuellen Nachbauten.
|
||||||
---
|
---
|
||||||
|
|
||||||
# Styleguide-Erstellung
|
# Styleguide-Erstellung
|
||||||
|
|
||||||
## Ziel
|
## Ziel
|
||||||
|
|
||||||
Pflege den Styleguide als zentrales Design-System für mehrere modulare Webportale.
|
Den Styleguide als zentrales Design-System für mehrere Webportale pflegen.
|
||||||
|
|
||||||
- Core: allgemeine Foundations, semantische Tokens, Components, Patterns und Guidelines für alle Portale.
|
Zwingende Kaskade:
|
||||||
- Portal-spezifisch: nur klar benannte Layouts/Templates/Pages, z. B. mit Portalname im Dateinamen.
|
|
||||||
- Ergebnis: cleanes, produktionsreifes Template ohne lokale Styles, Overrides, Workarounds, Legacy-Reste oder visuelle Nachbauten.
|
|
||||||
|
|
||||||
## Kaskade
|
`Foundation Tokens → semantische Tokens → Components → Patterns → Layouts → Templates/Pages → Usage Guidelines`
|
||||||
|
|
||||||
Immer diese Ebene wählen und einhalten:
|
Ergebnis muss clean, produktionsreif und frei von lokalen Insellösungen, Legacy-Resten und visuellen Nachbauten sein.
|
||||||
|
|
||||||
```text
|
Downstream-Portale sollen Layout und Variation so weit wie möglich über CSS, semantische Tokens und vorhandene Bausteine lösen. HTML-Struktur nur ändern, wenn Semantik, Accessibility, Component-Grenzen oder fachliche Datenstruktur es erfordern.
|
||||||
Foundations → semantische Tokens → Components → Patterns → Layouts → Templates/Pages → Usage Guidelines
|
|
||||||
```
|
|
||||||
|
|
||||||
Regeln:
|
## Token-Kaskade
|
||||||
|
|
||||||
- Foundations sind die einzige Quelle konkreter Designwerte: Farben, Typografie, Spacing, Radius, Shadows, Motion, Breakpoints, Z-Index, Containergrößen.
|
- Foundation Tokens sind die einzige Quelle roher Designwerte: Farben, Typografie, Spacing, Radius, Shadows, Motion, Breakpoints, Z-Index, Containergrößen.
|
||||||
- Neue Foundation Tokens nur nach expliziter Freigabe; bestehende Foundation Tokens bevorzugt wiederverwenden.
|
- Neue Foundation Tokens nur nach expliziter Freigabe; bestehende bevorzugt wiederverwenden.
|
||||||
- Semantische Tokens sind Aliase/Kaskaden auf Foundation Tokens; nie hardcoded Design Values.
|
- Semantische Tokens kontextualisieren Foundation Tokens für konkrete Verwendung, z. B. Component, Pattern, Layout oder Page.
|
||||||
- Components, Patterns, Layouts, Templates, Pages und HTML dürfen keine eigenen Foundation Tokens, lokalen `:root`-Blöcke oder hardcoded Design Values enthalten.
|
- Semantische Tokens müssen immer auf Foundation Tokens verweisen; nie auf hardcoded Design Values.
|
||||||
- Jede neue/geänderte CSS-Datei muss in `styleguide.css` importiert sein; `styleguide.css` ist der einzige CSS-Einstiegspunkt.
|
- Components, Patterns, Layouts, Templates, Pages und HTML dürfen keine direkten Foundation-Token-Zugriffe, lokalen `:root`-Blöcke, Insel-Tokens oder hardcoded Design Values enthalten.
|
||||||
|
- Lokale Tokens sind nur erlaubt, wenn sie echte semantische Tokens der passenden Ebene sind, zentral in der zuständigen CSS-Datei gepflegt und über `styleguide.css` importiert werden.
|
||||||
|
|
||||||
|
Technische CSS-Werte ohne Designentscheidung sind erlaubt, z. B. `display`, `position`, `overflow`, `width: 100%`, `height: auto`, `flex`, `min-width: 0`.
|
||||||
|
|
||||||
|
## Core vs. Portal
|
||||||
|
|
||||||
|
- Core: Foundations, globale semantische Tokens, Components und generische Patterns.
|
||||||
|
- Portal-spezifisch: nur klar benannte Layouts, Templates oder Pages mit Portalname im Dateinamen.
|
||||||
|
- Portal-spezifische Dateien dürfen Core-Bausteine komponieren, aber nicht duplizieren, überschreiben oder visuell nachbauen.
|
||||||
|
- Wird eine portal-spezifische Lösung mehrfach relevant, in den Core abstrahieren.
|
||||||
|
- Fachlogik und Dateninterpretation gehören ins jeweilige Portal/Fachmodul, nicht in den Styleguide.
|
||||||
|
|
||||||
## Ebenenregeln
|
## Ebenenregeln
|
||||||
|
|
||||||
### Core vs. Portal
|
|
||||||
|
|
||||||
- Foundations, globale semantische Tokens, Components und generische Patterns sind portalübergreifend.
|
|
||||||
- Portal-spezifische Layouts/Templates/Pages dürfen Core-Bausteine komponieren, aber nicht duplizieren, überschreiben oder visuell nachbauen.
|
|
||||||
- Portal-spezifische Dateien müssen eindeutig nach Portal benannt sein.
|
|
||||||
- Wird eine portal-spezifische Lösung für mehrere Portale relevant, abstrahiere sie in den Core.
|
|
||||||
- Fachliche Bedeutung oder Dateninterpretation gehört ins jeweilige Portal/owning Fachmodul, nicht in den Styleguide.
|
|
||||||
|
|
||||||
### Components
|
### Components
|
||||||
|
|
||||||
- Components sind kanonische UI-Bausteine.
|
- Components sind kanonische UI-Bausteine.
|
||||||
- Ohne Freigabe nicht verändern: HTML, Klassen, Nesting, Semantik, Varianten.
|
- Ohne Freigabe keine Änderung an HTML, Klassen, Nesting, Semantik oder Varianten.
|
||||||
- Component-Internals nie von außen überschreiben.
|
- Component-Internals nie von außen überschreiben.
|
||||||
- Components nie visuell nachbauen.
|
- Components nie visuell nachbauen.
|
||||||
|
- Component-spezifische semantische Tokens in der zuständigen Component-Datei definieren; keine Insel-Tokens im Markup oder in Pages.
|
||||||
|
|
||||||
### Patterns
|
### Patterns
|
||||||
|
|
||||||
- Patterns komponieren bestehende Components für Anwendungsfälle.
|
- Patterns komponieren bestehende Components für wiederkehrende Anwendungsfälle.
|
||||||
- Erlaubt: Pattern-Klassen, Wrapper, Layout, Responsiveness.
|
- Erlaubt: Wrapper, Pattern-Klassen, Layout, Responsiveness.
|
||||||
- Verboten: Component-Optik duplizieren, Component-Internals stylen, Components ersetzen.
|
- Verboten: Component-Optik duplizieren, Component-Internals stylen, Components ersetzen.
|
||||||
- Falls ein Pattern Component-Internals stylen müsste: stoppen und Component-Token/-Variante oder andere Architekturentscheidung vorschlagen.
|
- Pattern-spezifische semantische Tokens nur für Pattern-Kontext definieren und aus Foundations ableiten.
|
||||||
|
- Wenn ein Pattern Component-Internals stylen müsste: stoppen und Component-Token, Variante oder Architekturentscheidung vorschlagen.
|
||||||
|
|
||||||
### Layouts und Templates/Pages
|
### Layouts, Templates und Pages
|
||||||
|
|
||||||
- Layouts regeln Struktur, Container, Raster, Anordnung und Responsiveness.
|
- Layouts regeln Struktur, Container, Raster, Anordnung und Responsiveness.
|
||||||
- Templates/Pages sind reine Komposition aus Layouts, Patterns und Components.
|
- Templates/Pages sind Komposition aus Layouts, Patterns und Components.
|
||||||
- Sie dürfen keine neuen Foundations, Token-Logiken, Component-Varianten, lokalen Styles oder visuellen Regeln einführen.
|
- Layout, Abstände und Varianten primär über CSS und semantische Tokens lösen, nicht über zusätzliche HTML-Struktur.
|
||||||
|
- HTML-Struktur nur für Semantik, Accessibility, Component-Grenzen oder fachliche Datenstruktur erweitern.
|
||||||
### Dokumentation
|
- Keine neuen Foundations, Component-Varianten, lokalen Styles, Insel-Tokens oder visuellen Regeln einführen.
|
||||||
|
|
||||||
Nachführen, wenn betroffen:
|
|
||||||
|
|
||||||
- `index.html` bei neuen HTML-Seiten
|
|
||||||
- `foundations.html` bei Foundation-Änderungen
|
|
||||||
- semantische Token-Seiten bei Token-Änderungen
|
|
||||||
- betroffene Component-, Pattern-, Layout-, Template- oder Page-Doku
|
|
||||||
|
|
||||||
## CSS-Struktur
|
## CSS-Struktur
|
||||||
|
|
||||||
- Foundation Tokens: nur in vorgesehenen Foundation-/Base-Dateien, insbesondere `01-foundations.css` und, falls vorhanden/strukturell vorgesehen, `02-base.css`.
|
- `styleguide.css` ist der einzige CSS-Einstiegspunkt. Jede neue/geänderte CSS-Datei muss dort importiert sein.
|
||||||
- Semantische Tokens: nur in vorgesehenen zentralen Token-Bereichen oder klar zugeordneten Component-/Pattern-/Layout-/Template-Dateien; immer über `styleguide.css` importiert.
|
- Foundation Tokens nur in vorgesehenen Foundation-/Base-Dateien, insbesondere `01-foundations.css` und ggf. `02-base.css`.
|
||||||
- Components, Patterns, Layouts und Templates liegen in eigenen Dateien der passenden Ebene; keine Ebenen vermischen.
|
- Semantische Tokens nur in zentralen Token-Bereichen oder in der zuständigen Component-/Pattern-/Layout-/Template-Datei.
|
||||||
- Neue CSS-Datei nur bei klar neuer Verantwortung; sonst bestehende Datei erweitern.
|
- Components, Patterns, Layouts und Templates liegen in Dateien der passenden Ebene; keine Ebenen vermischen.
|
||||||
- Portal-spezifische CSS-Dateien nur für klar abgegrenzte Layouts/Templates/Pages und mit Portalname im Dateinamen.
|
- Neue CSS-Dateien nur bei klar neuer Verantwortung; sonst bestehende Datei erweitern.
|
||||||
- Import-Reihenfolge: Foundations/Base → globale semantische Tokens → Components → Patterns → allgemeine Layouts → portal-spezifische Layouts → allgemeine Templates/Pages → portal-spezifische Templates/Pages.
|
- Keine verwaisten oder unimportierten CSS-Dateien stehen lassen.
|
||||||
|
|
||||||
|
Import-Reihenfolge:
|
||||||
|
|
||||||
|
`Foundations/Base → globale semantische Tokens → Components → Patterns → allgemeine Layouts → portal-spezifische Layouts → allgemeine Templates/Pages → portal-spezifische Templates/Pages`
|
||||||
|
|
||||||
## Arbeitsablauf
|
## Arbeitsablauf
|
||||||
|
|
||||||
Vor Umsetzung:
|
Vor Umsetzung:
|
||||||
|
|
||||||
1. Task-Scope bestimmen.
|
1. Scope bestimmen.
|
||||||
2. Relevanten Code und Doku im Scope prüfen.
|
2. Relevanten Code und Doku prüfen.
|
||||||
3. Ebene bestimmen.
|
3. Richtige Ebene bestimmen.
|
||||||
4. Core oder portal-spezifische Erweiterung bestimmen.
|
4. Core oder portal-spezifisch entscheiden.
|
||||||
5. Bestehende Tokens, Components, Patterns, Layouts und Templates auf Wiederverwendung prüfen.
|
5. Bestehende Foundations, semantische Tokens, Components, Patterns, Layouts und Templates auf Wiederverwendung prüfen.
|
||||||
6. Nötige Doku-Nachführung bestimmen.
|
6. Prüfen, ob Layout per CSS statt zusätzlicher HTML-Struktur lösbar ist.
|
||||||
7. Bei nicht belegten Punkten Rückfrage stellen.
|
7. Betroffene Doku bestimmen.
|
||||||
|
8. Nicht belegte Punkte nicht umsetzen; bei Bedarf Rückfrage stellen.
|
||||||
|
|
||||||
Nicht belegte Punkte nicht umsetzen. Aussagen klassifizieren als: belegt, plausibel, nicht belegt.
|
Aussagen bei Unsicherheit klassifizieren als: belegt, plausibel, nicht belegt.
|
||||||
|
|
||||||
|
## Dokumentation
|
||||||
|
|
||||||
|
Nachführen, wenn betroffen:
|
||||||
|
|
||||||
|
- `index.html` bei neuen HTML-Seiten
|
||||||
|
- `foundations.html` bei Foundation-Änderungen
|
||||||
|
- Token-Doku bei semantischen Token-Änderungen
|
||||||
|
- betroffene Component-, Pattern-, Layout-, Template- oder Page-Doku
|
||||||
|
|
||||||
## Verbote
|
## Verbote
|
||||||
|
|
||||||
Nie einführen oder stehen lassen:
|
Nie einführen oder stehen lassen:
|
||||||
|
|
||||||
- lokale Styles, lokale `:root`-Blöcke, lokale Token-Blöcke
|
- lokale Styles, lokale `:root`-Blöcke oder lokale Token-Blöcke
|
||||||
|
- Insel-Tokens in Components, Patterns, Layouts, Templates, Pages oder HTML
|
||||||
|
- direkte Foundation-Token-Zugriffe außerhalb semantischer Token-Definitionen
|
||||||
- hardcoded Design Values außerhalb Foundations
|
- hardcoded Design Values außerhalb Foundations
|
||||||
- überlagernde Korrektur-Styles statt Ursachenbehebung
|
- Overrides statt Ursachenbehebung
|
||||||
|
- Workarounds, Quickfixes oder Legacy-Fehlmuster
|
||||||
- visuelle Nachbauten bestehender Components/Patterns
|
- visuelle Nachbauten bestehender Components/Patterns
|
||||||
- portal-spezifische Duplikate von Core-Bausteinen
|
- portal-spezifische Duplikate von Core-Bausteinen
|
||||||
- Workarounds, Quickfixes, Legacy-Fehlmuster
|
- unnötige HTML-Wrapper nur für Optik/Layout
|
||||||
- unimportierte oder verwaiste CSS-Dateien
|
- unimportierte oder verwaiste CSS-Dateien
|
||||||
- Refactorings außerhalb Scope ohne Freigabe
|
- Refactorings außerhalb Scope ohne Freigabe
|
||||||
|
|
||||||
Technische CSS-Werte ohne Designentscheidung sind erlaubt, z. B. `display`, `position`, `overflow`, `width: 100%`, `height: auto`, `flex`, `min-width: 0`.
|
## Abschluss
|
||||||
|
|
||||||
## Selbstbereinigung vor Abschluss
|
Vor Abschluss den bearbeiteten Scope aktiv bereinigen:
|
||||||
|
|
||||||
Vor jeder Abschlussmeldung aktiv bereinigen:
|
- Insellösungen, Insel-Tokens, Overrides, Workarounds und Legacy-Reste entfernen.
|
||||||
|
- lokale Korrekturen auf die richtige Ebene zurückführen: Foundation Token, semantischer Token, Component, Pattern, Layout oder Template.
|
||||||
- lokale Insellösungen, Overrides, Workarounds, Legacy-Reste und unsaubere Zwischenlösungen im bearbeiteten Scope entfernen
|
- Doku und `styleguide.css` aktualisieren.
|
||||||
- lokale Korrekturen auf die richtige Ebene zurückführen: Foundation, semantischer Token, Component, Pattern, Layout oder Template
|
- sicherstellen, dass Layout-Änderungen primär über CSS und semantische Tokens gelöst sind.
|
||||||
- keine Aufgabe als fertig melden, solange lokale Styles, hardcoded Werte, visuelle Nachbauten, doppelte Token, unimportierte CSS-Dateien oder veraltete Doku vorhanden sind
|
- erst fertig melden, wenn der Scope clean und produktionsreif ist.
|
||||||
|
|
||||||
## Abschlusscheck
|
|
||||||
|
|
||||||
Vor Abschluss bestätigen:
|
|
||||||
|
|
||||||
- `AGENTS.md` und dieser Skill beachtet
|
|
||||||
- richtige Ebene und Core/Portal-Zuordnung gewählt
|
|
||||||
- Kaskade eingehalten
|
|
||||||
- keine lokalen Styles, Overrides, Workarounds, Legacy-Reste oder hardcoded Design Values
|
|
||||||
- neue/geänderte Foundation Tokens korrekt gepflegt und freigegeben
|
|
||||||
- neue/geänderte semantische Tokens korrekt gepflegt, importiert und dokumentiert
|
|
||||||
- alle relevanten CSS-Dateien in `styleguide.css` importiert
|
|
||||||
- Components unverändert bzw. nur mit Freigabe geändert
|
|
||||||
- Patterns bauen auf Components; Layouts/Templates/Pages bauen auf Patterns/Components
|
|
||||||
- betroffene Doku nachgeführt
|
|
||||||
- bearbeiteter Scope ist clean und produktionsreif
|
|
||||||
|
|
||||||
## Ergebnisbericht
|
|
||||||
|
|
||||||
Kurz berichten:
|
Kurz berichten:
|
||||||
|
|
||||||
- geänderte und geprüfte Dateien
|
- geänderte/geprüfte Dateien
|
||||||
- Ebene und Core/Portal-Einordnung
|
- gewählte Ebene und Core/Portal-Zuordnung
|
||||||
- verwendete/ergänzte Tokens und Bausteine
|
- verwendete oder ergänzte Foundation/semantische Tokens
|
||||||
|
- verwendete oder ergänzte Bausteine
|
||||||
|
- ob Layout per CSS statt Struktur gelöst wurde
|
||||||
- nachgeführte Doku
|
- nachgeführte Doku
|
||||||
- entfernte Insellösungen/Workarounds, falls vorhanden
|
- entfernte Insellösungen/Workarounds
|
||||||
- Bestätigung von Abschlusscheck und Selbstbereinigung
|
- offene Punkte oder nötige Freigaben
|
||||||
- offene Punkte/Freigaben
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -221,7 +221,7 @@
|
|||||||
Interactive styleguide variant:
|
Interactive styleguide variant:
|
||||||
The panel opens and closes via the pulldown button above.
|
The panel opens and closes via the pulldown button above.
|
||||||
It closes when clicking outside, when another pulldown opens, or when a sandwich menu opens.
|
It closes when clicking outside, when another pulldown opens, or when a sandwich menu opens.
|
||||||
If the panel would overflow the viewport, it aligns from the opposite side of the trigger.
|
If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite side of the trigger.
|
||||||
Cross-dependencies between pulldowns are application logic and are not defined in this component.
|
Cross-dependencies between pulldowns are application logic and are not defined in this component.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@@ -623,10 +623,10 @@
|
|||||||
|
|
||||||
<div class="sg-state-example">
|
<div class="sg-state-example">
|
||||||
<p class="sg-state-example__label sg-table-label">form-invalid</p>
|
<p class="sg-state-example__label sg-table-label">form-invalid</p>
|
||||||
<div class="sg-input-validation-stack">
|
<div class="sg-labeled-input-row">
|
||||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
|
|
||||||
<span class="sg-radio-field-row">
|
|
||||||
<span class="sg-label">Label</span>
|
<span class="sg-label">Label</span>
|
||||||
|
<span class="sg-input-validation-stack">
|
||||||
|
<span class="sg-radio-field-row">
|
||||||
<span class="sg-radio-activatable-group__choices">
|
<span class="sg-radio-activatable-group__choices">
|
||||||
<span class="sg-radio-activatable-group__choice">
|
<span class="sg-radio-activatable-group__choice">
|
||||||
<button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
|
<button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
|
||||||
@@ -642,8 +642,8 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
|
||||||
<span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
|
<span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1173,7 +1173,7 @@
|
|||||||
|
|
||||||
// Pulldown behavior: pulldown demos open their panel below the trigger.
|
// Pulldown behavior: pulldown demos open their panel below the trigger.
|
||||||
// Opening one closes all sandwich menus and any other open pulldown demo.
|
// Opening one closes all sandwich menus and any other open pulldown demo.
|
||||||
// If the panel would overflow the viewport, it aligns from the opposite trigger edge.
|
// If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite trigger edge.
|
||||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
|
||||||
@@ -1217,8 +1217,9 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const triggerRect = trigger.getBoundingClientRect();
|
||||||
const panelRect = panel.getBoundingClientRect();
|
const panelRect = panel.getBoundingClientRect();
|
||||||
if (panelRect.right > window.innerWidth) {
|
if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
|
||||||
demo.dataset.align = 'right';
|
demo.dataset.align = 'right';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,58 +0,0 @@
|
|||||||
# AGENTS.md — Skill: styleguide-anwendung
|
|
||||||
|
|
||||||
## Zweck
|
|
||||||
|
|
||||||
Dieser Skill regelt verbindlich die fachlich korrekte Anwendung des zentralen Styleguides in konsumierenden Portalen.
|
|
||||||
|
|
||||||
## Scope
|
|
||||||
|
|
||||||
- Gilt nur fuer konsumierende Portal-Repositories.
|
|
||||||
- Gilt fuer die Anwendung von Tokens, Components, Patterns, Layouts und Templates aus dem Styleguide.
|
|
||||||
|
|
||||||
## Verbindliche Regeln
|
|
||||||
|
|
||||||
1. Reuse first: Styleguide-Bausteine MUESSEN 1:1 angewendet werden; visuelle Nachbauten sind verboten.
|
|
||||||
2. Components MUESSEN in Struktur, Klassenlogik und Semantik unveraendert bleiben.
|
|
||||||
3. Wenn ein passender Baustein existiert, SIND lokale Sondervarianten und Inselloesungen verboten.
|
|
||||||
4. Lokale Designentscheidungen ausserhalb des Styleguide-Systems sind verboten (Farben, Spacing, Typography, Radius, Shadow, States).
|
|
||||||
5. Ueberschreibungen von Component-Internals aus dem Portal-Kontext sind verboten.
|
|
||||||
6. Portal-spezifische Regeln sind nur zulaessig, wenn kein passender Baustein existiert, der Need fachlich belegt ist und keine Duplikation entsteht.
|
|
||||||
7. Jede lokale Abweichung MUSS minimal, rueckbaubar, klar begruendet und auf den konkreten Portal-Kontext begrenzt sein.
|
|
||||||
8. `public/assets/styles.css` ist read-only; manuelle Portal-Styles darin sind verboten.
|
|
||||||
9. `public/assets/styleguide.upstream.css` ist read-only; Upstream wird nie lokal gepatcht.
|
|
||||||
10. Eigene Portal-Styles duerfen ausschliesslich in `public/assets/styles.portal.css` gepflegt werden.
|
|
||||||
|
|
||||||
## 1:1-Uebernahmepflicht (kritisch)
|
|
||||||
|
|
||||||
Wenn ein Pattern oder Component aus dem Styleguide vorgegeben ist, gilt:
|
|
||||||
|
|
||||||
1. HTML-Struktur wird 1:1 uebernommen (kein vereinfachtes oder umgebautes Markup).
|
|
||||||
2. Klassenbezeichnungen werden 1:1 uebernommen (keine Umbenennungen, keine Teilmengen).
|
|
||||||
3. Alle dokumentierten States werden umgesetzt (z. B. default, hover, focus, active, disabled, selected).
|
|
||||||
4. Alle dokumentierten Interaktionen/Funktionalitaeten werden umgesetzt (keine Teilimplementierung).
|
|
||||||
5. Accessibility-Merkmale werden 1:1 uebernommen (ARIA, Labels, Keyboard-Fokus, semantische Elemente).
|
|
||||||
6. "Sinngemaesse" Nachimplementierung ist unzulaessig; erlaubt ist nur die vollstaendige Uebernahme oder eine explizit freigegebene Abweichung.
|
|
||||||
|
|
||||||
## Guardrails
|
|
||||||
|
|
||||||
- Keine Umgehung des Styleguides durch Inline-Styles oder seitenlokale Ad-hoc-CSS-Dateien.
|
|
||||||
- Keine erneute Einfuehrung von Legacy-CSS-Bloecken oder lokalen Vollkopien von Styleguide-Regeln.
|
|
||||||
- Keine Mischung von Upstream-Logik und Portal-Logik in derselben Quelldatei.
|
|
||||||
- Konflikte mit Upstream werden nicht durch Hotfixes in Output-Dateien geloest.
|
|
||||||
|
|
||||||
## Arbeitsmodus bei Aenderungen
|
|
||||||
|
|
||||||
1. Zuerst pruefen: Deckt ein bestehender Styleguide-Baustein den Fall ab.
|
|
||||||
2. Wenn ja: unveraendert uebernehmen (Pfad endet hier).
|
|
||||||
3. Wenn nein: minimalen Portal-Zusatz in `styles.portal.css` umsetzen, ohne Component-Internals zu beruehren.
|
|
||||||
4. Betroffene Views auf visuelle und funktionale Regressionen testen.
|
|
||||||
5. Lokale Abweichung im Commit mit kurzer fachlicher Begruendung dokumentieren.
|
|
||||||
|
|
||||||
## Abnahmekriterien
|
|
||||||
|
|
||||||
- Vorhandene Styleguide-Bausteine wurden priorisiert und nicht lokal dupliziert.
|
|
||||||
- Keine Portalregel greift in Component-Internals ein.
|
|
||||||
- Alle lokalen Regeln sind auf das notwendige Minimum begrenzt.
|
|
||||||
- `styles.css` und `styleguide.upstream.css` sind frei von manuellen Portal-Handedits.
|
|
||||||
- Lokale Regeln in `styles.portal.css` sind fachlich begruendet und rueckbaubar dokumentiert.
|
|
||||||
- Vorgegebene Patterns/Components sind in HTML, Klassen, States, Interaktionen und A11y vollstaendig 1:1 uebernommen.
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
# Integrationsstrategie Styleguide -> WebApp_Aktienberater
|
|
||||||
|
|
||||||
Stand: 18. Mai 2026
|
|
||||||
Scope: Nur Einbindungsstrategie und Migrationsvorgehen fuer CSS. Keine Frontend-Umbauten in diesem Dokument.
|
|
||||||
|
|
||||||
## 1. Zielbild
|
|
||||||
|
|
||||||
`public/assets/styles.css` bleibt die produktiv eingebundene Datei, wird aber kuenftig deterministisch aus zwei klar getrennten Schichten erzeugt:
|
|
||||||
|
|
||||||
1. `styleguide` (upstream, read-only im Projektkontext)
|
|
||||||
2. `portal` (lokale App-spezifische Regeln)
|
|
||||||
|
|
||||||
Es gibt keine weitere manuelle Vollkopie von CSS-Bloecken in die Produktionsdatei.
|
|
||||||
|
|
||||||
## 2. Aktueller Ist-Zustand (belegt)
|
|
||||||
|
|
||||||
- Produktivseiten binden `public/assets/styles.css` ein.
|
|
||||||
- Es gibt keine lokale Styleguide-Kopie mehr im Zielrepo.
|
|
||||||
- `public/assets/styles.css` enthaelt derzeit einen Mischstand aus Styleguide-Teil plus Legacy-Teil.
|
|
||||||
|
|
||||||
Konsequenz: Updates und Debugging sind aktuell fehleranfaellig, weil keine harte Trennung zwischen upstream und lokal besteht.
|
|
||||||
|
|
||||||
## 3. Verbindliche Struktur (Soll)
|
|
||||||
|
|
||||||
Neue Quellstruktur im Zielrepo:
|
|
||||||
|
|
||||||
- `public/assets/styleguide.upstream.css`
|
|
||||||
Upstream-Quelle (aus dem Styleguide-Repo uebernommen, im Zielrepo read-only behandeln)
|
|
||||||
- `public/assets/styles.portal.css`
|
|
||||||
Lokale Portal-Ergaenzungen/Overrides (einzige lokale CSS-Quelle fuer App-spezifische Abweichungen)
|
|
||||||
- `public/assets/styles.css`
|
|
||||||
Build-Output fuer Produktivbetrieb (generiert, nicht manuell gepflegt)
|
|
||||||
|
|
||||||
## 4. Build-Reihenfolge (verbindlich)
|
|
||||||
|
|
||||||
Die Reihenfolge ist fix:
|
|
||||||
|
|
||||||
1. `public/assets/styleguide.upstream.css`
|
|
||||||
2. `public/assets/styles.portal.css`
|
|
||||||
3. Ausgabe nach `public/assets/styles.css`
|
|
||||||
|
|
||||||
Damit gilt:
|
|
||||||
|
|
||||||
- Standard liegt im Styleguide.
|
|
||||||
- Lokale Abweichungen liegen nur im Portal-Layer.
|
|
||||||
- Keine dritte Ebene mit ad-hoc CSS in Produktivdateien.
|
|
||||||
|
|
||||||
## 5. Migrationsphasen
|
|
||||||
|
|
||||||
### Phase A: Freeze und Trennung
|
|
||||||
|
|
||||||
- Bestehenden Zustand einfrieren (Baseline-Commit).
|
|
||||||
- Legacy-Abschnitte in `public/assets/styles.css` identifizieren.
|
|
||||||
- Lokale, weiterhin benoetigte Regeln nach `public/assets/styles.portal.css` verschieben.
|
|
||||||
|
|
||||||
### Phase B: Build-Einfuehrung
|
|
||||||
|
|
||||||
- Build-Skript einfuehren, das die zwei Quellen in fixer Reihenfolge zusammenfuehrt.
|
|
||||||
- `public/assets/styles.css` nur noch als Build-Output behandeln.
|
|
||||||
|
|
||||||
### Phase C: Bereinigung
|
|
||||||
|
|
||||||
- Doppelte `:root`-Definitionen und ueberschneidende Token schrittweise entfernen.
|
|
||||||
- Jede entfernte Legacy-Regel gegen produktive Screens verifizieren.
|
|
||||||
|
|
||||||
### Phase D: Regelbetrieb
|
|
||||||
|
|
||||||
- Neue UI-Änderungen nur noch in:
|
|
||||||
- Styleguide-Repo (globale Patterns/Tokens) oder
|
|
||||||
- `styles.portal.css` (projektlokale Spezifika)
|
|
||||||
|
|
||||||
## 5a. Verbindliche Migrationsreihenfolge
|
|
||||||
|
|
||||||
Die Ablösung erfolgt in fester Reihenfolge:
|
|
||||||
|
|
||||||
1. Login
|
|
||||||
2. Hauptliste
|
|
||||||
3. Detail
|
|
||||||
4. Admin
|
|
||||||
|
|
||||||
Pro Schritt gilt:
|
|
||||||
|
|
||||||
- Legacy-Regeln nur fuer den jeweiligen Bereich ablösen.
|
|
||||||
- Smoke-Test direkt nach jeder Ablösung.
|
|
||||||
- Erst nach bestandenem Test den naechsten Bereich migrieren.
|
|
||||||
|
|
||||||
## 5b. Verbindliche Exit-Kriterien (Legacy entfernt)
|
|
||||||
|
|
||||||
Die Migration ist erst abgeschlossen, wenn alle Punkte erfuellt sind:
|
|
||||||
|
|
||||||
1. `public/assets/styles.css` ist reiner Build-Output aus:
|
|
||||||
- `public/assets/styleguide.upstream.css`
|
|
||||||
- `public/assets/styles.portal.css`
|
|
||||||
2. In `public/assets/styles.css` existiert kein Legacy-Blockmarker mehr:
|
|
||||||
- `LEGACY STYLES`
|
|
||||||
- `To be migrated step by step to styleguide system`
|
|
||||||
3. Keine manuellen Produktivregeln mehr direkt in `public/assets/styles.css`.
|
|
||||||
4. Alle weiterhin benoetigten lokalen Abweichungen liegen ausschliesslich in `public/assets/styles.portal.css`.
|
|
||||||
5. Doppelte oder konkurrierende `:root`-Definitionen aus Legacy wurden entfernt.
|
|
||||||
|
|
||||||
## 6. Update-Prozess bei Styleguide-Änderungen
|
|
||||||
|
|
||||||
Ja, es braucht regulaere Updates im Zielrepo, sobald der Styleguide geaendert wurde.
|
|
||||||
|
|
||||||
Minimalprozess:
|
|
||||||
|
|
||||||
1. Neuen Styleguide-Stand nach `public/assets/styleguide.upstream.css` uebernehmen.
|
|
||||||
2. `public/assets/styles.css` neu bauen.
|
|
||||||
3. Kurztest der betroffenen Seiten (mindestens: Login, Hauptliste, Detail, Admin).
|
|
||||||
4. Falls Konflikte auftreten: nur `styles.portal.css` anpassen, nicht upstream patchen.
|
|
||||||
|
|
||||||
## 7. Guardrails
|
|
||||||
|
|
||||||
- Keine manuellen Hotfixes direkt in `public/assets/styles.css`.
|
|
||||||
- Keine Vermischung von Upstream-Regeln und Portalregeln in derselben Quelldatei.
|
|
||||||
- Keine erneute Vollkopie alter Legacy-Bloecke.
|
|
||||||
- Jede Portal-Abweichung braucht kurze Begruendung im Commit.
|
|
||||||
|
|
||||||
## 7a. Verbindliche Abnahme-Checkliste je Migrationsschritt
|
|
||||||
|
|
||||||
Vor dem Abschluss eines jeden Schritts:
|
|
||||||
|
|
||||||
1. Seite rendert ohne visuelle Regressionen in den betroffenen Hauptbereichen.
|
|
||||||
2. Interaktive Elemente bleiben funktionsfaehig (Buttons, Tabs, Filter, States).
|
|
||||||
3. Keine neuen direkten Anpassungen in `public/assets/styles.css`.
|
|
||||||
4. Diff zeigt nur:
|
|
||||||
- Upstream-Update (`styleguide.upstream.css`) und/oder
|
|
||||||
- lokale Portal-Regeln (`styles.portal.css`) und Build-Output.
|
|
||||||
5. Commit-Text dokumentiert kurz, welcher Legacy-Abschnitt abgeloest wurde.
|
|
||||||
|
|
||||||
## 8. Verantwortungsgrenze
|
|
||||||
|
|
||||||
- Styleguide-Repo: Design-System-Wahrheit (Tokens, Components, Patterns).
|
|
||||||
- WebApp_Aktienberater: Integration, lokale Komposition, produktive Einbindung.
|
|
||||||
|
|
||||||
Damit bleibt das System updatefaehig und driftarm, ohne laufende Frontend-Umsetzung zu blockieren.
|
|
||||||
@@ -264,13 +264,14 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const triggerRect = trigger.getBoundingClientRect();
|
||||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||||
if (!panel) {
|
if (!panel) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const panelRect = panel.getBoundingClientRect();
|
const panelRect = panel.getBoundingClientRect();
|
||||||
if (panelRect.right > window.innerWidth) {
|
if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
|
||||||
demo.dataset.align = 'right';
|
demo.dataset.align = 'right';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,312 +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 – Page Layout Basic</title>
|
|
||||||
<link rel="stylesheet" href="../styleguide.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1 class="sg-main-heading">Layout – Page Layout Basic</h1>
|
|
||||||
|
|
||||||
<main aria-label="Page Layout Basic">
|
|
||||||
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
|
||||||
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
|
||||||
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
|
||||||
|
|
||||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
|
||||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
|
||||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
|
||||||
<span class="sg-sandwich-button__line"></span>
|
|
||||||
<span class="sg-sandwich-button__line"></span>
|
|
||||||
<span class="sg-sandwich-button__line"></span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
|
||||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
|
||||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
|
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
|
||||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
|
||||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
|
||||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
|
||||||
Sortierung
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
|
||||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 1</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 2</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 3</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 4</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
|
||||||
<span>Menüpunkt 5</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
|
||||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
|
||||||
Region
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
|
||||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 1</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 2</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 3</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
|
||||||
<span>Menüpunkt 4</span>
|
|
||||||
</li>
|
|
||||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
|
||||||
<span>Menüpunkt 5</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-search-field-row">
|
|
||||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
|
||||||
<input
|
|
||||||
class="sg-interaction-element sg-input-single-line"
|
|
||||||
type="text"
|
|
||||||
placeholder="Suche"
|
|
||||||
aria-label="Suche"
|
|
||||||
>
|
|
||||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
|
||||||
</span>
|
|
||||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
|
||||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
|
||||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
|
||||||
|
|
||||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
|
||||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
|
||||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
|
||||||
|
|
||||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-transparent-card sg-page-layout-basic__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
|
||||||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
|
||||||
<p class="sg-body">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
|
||||||
<div class="sg-group-card__header-row">
|
|
||||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
|
||||||
<div class="sg-strong">Inhalt</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
|
||||||
<p class="sg-body">
|
|
||||||
Zeile 01<br>
|
|
||||||
Zeile 02<br>
|
|
||||||
Zeile 03<br>
|
|
||||||
Zeile 04<br>
|
|
||||||
Zeile 05<br>
|
|
||||||
Zeile 06<br>
|
|
||||||
Zeile 07<br>
|
|
||||||
Zeile 08<br>
|
|
||||||
Zeile 09<br>
|
|
||||||
Zeile 10<br>
|
|
||||||
Zeile 11<br>
|
|
||||||
Zeile 12<br>
|
|
||||||
Zeile 13<br>
|
|
||||||
Zeile 14<br>
|
|
||||||
Zeile 15<br>
|
|
||||||
Zeile 16<br>
|
|
||||||
Zeile 17<br>
|
|
||||||
Zeile 18<br>
|
|
||||||
Zeile 19<br>
|
|
||||||
Zeile 20<br>
|
|
||||||
Zeile 21<br>
|
|
||||||
Zeile 22<br>
|
|
||||||
Zeile 23<br>
|
|
||||||
Zeile 24<br>
|
|
||||||
Zeile 25<br>
|
|
||||||
Zeile 26<br>
|
|
||||||
Zeile 27<br>
|
|
||||||
Zeile 28<br>
|
|
||||||
Zeile 29<br>
|
|
||||||
Zeile 30
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="../scripts/help-icon-overlays.js"></script>
|
|
||||||
<script>
|
|
||||||
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
|
|
||||||
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
|
||||||
const isActive = otherButton === button;
|
|
||||||
otherButton.setAttribute('aria-selected', String(isActive));
|
|
||||||
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
|
||||||
const button = wrap.querySelector('.sg-sandwich-button');
|
|
||||||
|
|
||||||
if (!button) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.addEventListener('click', (event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
const nextState = wrap.dataset.open !== 'true';
|
|
||||||
|
|
||||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
|
||||||
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
|
||||||
otherWrap.dataset.open = 'false';
|
|
||||||
if (otherButton) {
|
|
||||||
otherButton.setAttribute('aria-expanded', 'false');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
wrap.dataset.open = String(nextState);
|
|
||||||
button.setAttribute('aria-expanded', String(nextState));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const updatePulldownSelectionState = (demo) => {
|
|
||||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
|
||||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
|
||||||
|
|
||||||
if (!trigger || selectableOptions.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
|
||||||
return option.getAttribute('aria-checked') === 'true';
|
|
||||||
}).length;
|
|
||||||
|
|
||||||
selectableOptions.forEach((option) => {
|
|
||||||
const optionRow = option.closest('.sg-pulldown-option');
|
|
||||||
if (!optionRow) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
optionRow.classList.toggle(
|
|
||||||
'sg-pulldown-option--selected',
|
|
||||||
option.getAttribute('aria-checked') === 'true'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
|
||||||
|
|
||||||
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
|
||||||
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
|
||||||
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
|
||||||
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
|
||||||
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
|
||||||
trigger.setAttribute(
|
|
||||||
'aria-label',
|
|
||||||
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
|
||||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
|
||||||
|
|
||||||
if (!trigger) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
trigger.addEventListener('click', (event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
const nextState = demo.dataset.open !== 'true';
|
|
||||||
|
|
||||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
|
||||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
|
||||||
otherDemo.dataset.open = 'false';
|
|
||||||
if (otherTrigger) {
|
|
||||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
demo.dataset.align = 'left';
|
|
||||||
demo.dataset.open = String(nextState);
|
|
||||||
trigger.setAttribute('aria-expanded', String(nextState));
|
|
||||||
updatePulldownSelectionState(demo);
|
|
||||||
});
|
|
||||||
|
|
||||||
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
|
|
||||||
option.addEventListener('click', (event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
const nextChecked = option.getAttribute('aria-checked') !== 'true';
|
|
||||||
option.setAttribute('aria-checked', String(nextChecked));
|
|
||||||
updatePulldownSelectionState(demo);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
updatePulldownSelectionState(demo);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
|
||||||
toggle.addEventListener('click', () => {
|
|
||||||
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
|
||||||
toggle.dataset.active = nextState;
|
|
||||||
toggle.dataset.componentState = nextState;
|
|
||||||
toggle.setAttribute(
|
|
||||||
'aria-label',
|
|
||||||
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -202,7 +202,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -272,7 +272,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -342,7 +342,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -402,7 +402,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -452,7 +452,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -502,7 +502,7 @@
|
|||||||
|
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-navigation-card-center">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -624,13 +624,14 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const triggerRect = trigger.getBoundingClientRect();
|
||||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||||
if (!panel) {
|
if (!panel) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const panelRect = panel.getBoundingClientRect();
|
const panelRect = panel.getBoundingClientRect();
|
||||||
if (panelRect.right > window.innerWidth) {
|
if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
|
||||||
demo.dataset.align = 'right';
|
demo.dataset.align = 'right';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
/* ========================================================= */
|
|
||||||
/* Layouts: Page Layout Basic */
|
|
||||||
/* ========================================================= */
|
|
||||||
|
|
||||||
.sg-page-layout-basic__heading-block {
|
|
||||||
margin-top: var(--spacing-large);
|
|
||||||
margin-bottom: var(--spacing-large);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user