Initial commit: add styleguide project
This commit is contained in:
@@ -0,0 +1,235 @@
|
||||
---
|
||||
name: styleguide erstellung
|
||||
description: Verwenden für jede Weiterentwicklung des Styleguides. Erzwingt eine sauber kaskadierende, skalierbare Design-System-Architektur mit klarer Trennung von Foundations, semantischen Tokens, Components, Patterns, Layouts, Templates und Usage Guidelines. Nutze diesen Skill immer, wenn CSS, HTML, Tokens, Components, Patterns, Layouts, Templates, Dokumentation oder Styleguide-Strukturen geändert, erweitert oder geprüft werden.
|
||||
---
|
||||
|
||||
# Styleguide-Erstellung
|
||||
|
||||
## Ziel
|
||||
|
||||
Pflege und erweitere den Styleguide als skalierbares Design-System für große Webportale.
|
||||
|
||||
Jede Änderung muss:
|
||||
|
||||
- sauber kaskadieren,
|
||||
- der richtigen Styleguide-Ebene zugeordnet sein,
|
||||
- bestehende Bausteine respektieren,
|
||||
- langfristig wartbar und wiederverwendbar sein,
|
||||
- zentral über Foundation Tokens und semantische Tokens in `styleguide.css` steuerbar bleiben,
|
||||
- ohne lokale Sonderlösungen, visuelle Nachbauten oder Workarounds auskommen.
|
||||
|
||||
## Verbindliche Struktur und Kaskade
|
||||
|
||||
Der Styleguide wird nach dieser Kaskade entwickelt:
|
||||
|
||||
```text
|
||||
Foundations / Grundlagen
|
||||
→ Semantische Tokens / Design Tokens
|
||||
→ Components / Komponenten
|
||||
→ Patterns / Muster
|
||||
→ Layouts
|
||||
→ Templates / Seitentemplates
|
||||
→ Usage Guidelines / Anwendungsrichtlinien
|
||||
```
|
||||
|
||||
Jede neue oder geänderte Lösung muss der passenden Ebene zugeordnet werden; Component- und Pattern-Kapitel dokumentieren dabei die semantischen Tokens, die dort verwendet werden.
|
||||
|
||||
## Ebenenregeln
|
||||
|
||||
### Foundations
|
||||
|
||||
Foundations sind die einzige Quelle für konkrete visuelle Werte, z. B. Farben, Typografie, Spacing, Grid, Icons, Shadows, Border-Radius, Motion, Breakpoints, Z-Index und Containergrößen.
|
||||
|
||||
Neue oder geänderte Foundation-Werte nur nach Rückfrage und expliziter Freigabe einführen.
|
||||
|
||||
### Semantische Tokens / Design Tokens
|
||||
|
||||
Semantische Tokens abstrahieren Foundation Tokens nach Bedeutung, Zweck oder Verwendung im Interface und werden zentral in `styleguide.css` gepflegt.
|
||||
|
||||
Sie benennen nicht den konkreten visuellen Wert, sondern die Rolle im System, z. B. `surface-button-active`, `text-button-process` oder `layout-input-label-width`.
|
||||
|
||||
Regeln:
|
||||
|
||||
- Keine hardcoded Design Values außerhalb der Foundations.
|
||||
- Semantische Tokens sind Aliase oder Kaskaden auf Foundation Tokens.
|
||||
- Neue oder geänderte semantische Tokens an der fachlich passenden Stelle in `styleguide.css` ergänzen.
|
||||
- Struktur, Reihenfolge, Gruppierung, Kommentarlogik und Benennungssystematik von `styleguide.css` einhalten.
|
||||
- HTML-Dateien dürfen keine lokalen Token-Blöcke, keine eigenen `:root`-Definitionen und keine abweichenden Token-Definitionen enthalten.
|
||||
- HTML-Dateien dürfen semantische Tokens nur aus `styleguide.css` referenzieren.
|
||||
|
||||
Ergänzungen semantischer Tokens dokumentieren mit:
|
||||
|
||||
- Token-Name
|
||||
- Token-Typ: Foundation oder semantischer Token für Component, Pattern, Layout oder Template
|
||||
- Wert oder Alias-Ziel
|
||||
- kurzer Zweck
|
||||
|
||||
Wenn Foundation Tokens ergänzt oder geändert werden, `foundations.html` nachführen.
|
||||
Wenn semantische Tokens für Components, Patterns, Layouts oder Templates ergänzt oder geändert werden, die passende Token-Dokumentation nachführen, insbesondere `semantic-tokens-components.html`, sofern dort die bestehende Struktur dafür vorgesehen ist.
|
||||
|
||||
### Components
|
||||
|
||||
Components sind kanonische, wiederverwendbare UI-Bausteine.
|
||||
|
||||
Component-Kapitel dokumentieren die semantischen Tokens, die eine Komponente verwendet, jeweils mit zugeordnetem Foundation Token und Verwendungszweck innerhalb der Komponente.
|
||||
|
||||
Ohne explizite Freigabe nicht erlaubt:
|
||||
|
||||
- Component-HTML verändern
|
||||
- Component-Klassen verändern, ergänzen oder entfernen
|
||||
- Component-Nesting verändern
|
||||
- Component-Semantik verändern
|
||||
- Component-Varianten erfinden
|
||||
- Components visuell nachbauen
|
||||
- Component-Internals von außen überschreiben
|
||||
|
||||
### Patterns
|
||||
|
||||
Patterns kombinieren bestehende Components für konkrete Anwendungsfälle.
|
||||
|
||||
Pattern-Kapitel dokumentieren die semantischen Tokens, die ein Pattern verwendet, jeweils mit zugeordnetem Foundation Token und Verwendungszweck innerhalb des Patterns.
|
||||
|
||||
Erlaubt:
|
||||
|
||||
- eigene Pattern-Klassen
|
||||
- eigene Layout-/Wrapper-Strukturen
|
||||
- Pattern-spezifische Responsiveness
|
||||
- Pattern-spezifische Komposition
|
||||
|
||||
Nur erlaubt, wenn bestehende Components unverändert eingebettet werden.
|
||||
|
||||
Verboten ohne Freigabe:
|
||||
|
||||
```css
|
||||
.pattern .component-internal-class { ... }
|
||||
.pattern .sg-card-segment { ... }
|
||||
.pattern .sg-button__label { ... }
|
||||
```
|
||||
|
||||
Wenn ein Pattern Component-Internals stylen müsste, nicht umsetzen. Rückfrage stellen und begründen, ob ein Component-Token, eine Component-Variante oder eine andere architektonische Lösung nötig ist.
|
||||
|
||||
### Layouts
|
||||
|
||||
Layouts regeln Struktur, Container, Raster und Anordnung.
|
||||
|
||||
Layouts dürfen Flächen strukturieren, Spalten und Container definieren, Abstände zwischen größeren Bereichen steuern und responsive Seitenanordnung regeln.
|
||||
|
||||
Layouts dürfen keine Component-Optik ersetzen, keine Pattern-Logik nachbauen, keine Component-Internals überschreiben und keine lokalen Designwerte einführen.
|
||||
|
||||
### Templates
|
||||
|
||||
Templates beschreiben wiederkehrende Seitentypen.
|
||||
|
||||
Templates verwenden bestehende Layouts, Patterns und Components. Sie dürfen keine neuen visuellen Grundlagen, Component-Varianten oder Pattern-Logiken erfinden.
|
||||
|
||||
### Usage Guidelines
|
||||
|
||||
Usage Guidelines dokumentieren die korrekte Verwendung des Systems.
|
||||
|
||||
Sie klären insbesondere:
|
||||
|
||||
- wann welches Pattern verwendet wird,
|
||||
- responsive Verhalten,
|
||||
- Accessibility,
|
||||
- Dos & Don’ts,
|
||||
- Abgrenzung ähnlicher Components, Patterns, Layouts oder Templates.
|
||||
|
||||
Guidelines müssen präzise, praxisnah und konsistent mit der bestehenden Styleguide-Struktur formuliert werden.
|
||||
|
||||
## Arbeitsablauf
|
||||
|
||||
Vor jeder Umsetzung:
|
||||
|
||||
1. Task-Scope bestimmen.
|
||||
2. Bestehenden Code und relevante Dokumentation im Scope analysieren.
|
||||
3. Styleguide-Ebene der Änderung bestimmen.
|
||||
4. Prüfen, ob bestehende Foundation Tokens, semantische Tokens, Components, Patterns, Layouts oder Templates verwendet werden können.
|
||||
5. Offene oder nicht belegte Punkte klären.
|
||||
|
||||
Nicht umsetzen, solange eine notwendige Grundlage fehlt.
|
||||
Wenn etwas nicht eindeutig im Code, in der Dokumentation oder in der Aufgabe belegt ist, Rückfrage stellen.
|
||||
|
||||
## Scope und Grenzen
|
||||
|
||||
Keine Änderungen außerhalb des expliziten Task-Scopes.
|
||||
|
||||
Nicht erlaubt ohne Freigabe:
|
||||
|
||||
- bestehende Components umbauen
|
||||
- Foundation Tokens oder semantische Tokens umbenennen
|
||||
- Kaskade von Foundation Tokens zu semantischen Tokens verändern
|
||||
- CSS-Struktur aufräumen
|
||||
- HTML-Struktur verbessern, wenn nicht beauftragt
|
||||
- neue Foundation-Werte einführen
|
||||
- neue Component-Varianten erfinden
|
||||
- bestehende Dokumentationsstruktur neu sortieren
|
||||
|
||||
Neue HTML-Seiten nur dann in `index.html` ergänzen, wenn tatsächlich neue Seiten angelegt werden. Bei reinen Änderungen bestehender Seiten ist keine `index.html`-Anpassung erforderlich.
|
||||
|
||||
## Anti-Insellösung
|
||||
|
||||
Jede Lösung muss systemfähig sein.
|
||||
|
||||
Verboten:
|
||||
|
||||
- lokale Styles zur Umgehung der Architektur
|
||||
- seitenlokale Sonderregeln statt zentraler Foundation Tokens oder semantischer Tokens
|
||||
- visuelle Nachbauten bestehender Components
|
||||
- Workarounds, die Architekturdefizite verdecken
|
||||
- Legacy-Fehlmuster kopieren
|
||||
- direkte Designwerte in Components, Patterns, Layouts, Templates oder HTML-Dateien
|
||||
|
||||
Technische CSS-Werte sind erlaubt, wenn sie keine Designentscheidung darstellen, z. B.:
|
||||
|
||||
```css
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex: 1 1 auto;
|
||||
```
|
||||
|
||||
Wenn unklar ist, ob ein Wert eine Designentscheidung ist: Rückfrage stellen.
|
||||
|
||||
## Unsicherheiten
|
||||
|
||||
Bewerte relevante Aussagen als:
|
||||
|
||||
- **belegt**: direkt im Code oder in der Dokumentation nachweisbar
|
||||
- **plausibel**: ableitbar, aber nicht eindeutig belegt
|
||||
- **nicht belegt**: benötigt Rückfrage oder Freigabe
|
||||
|
||||
Nicht belegte Punkte dürfen nicht umgesetzt werden.
|
||||
|
||||
## Abschlusscheck
|
||||
|
||||
Vor Abschluss prüfen:
|
||||
|
||||
- richtige Styleguide-Ebene gewählt
|
||||
- Kaskade Foundations → semantische Tokens → Components → Patterns → Layouts → Templates → Usage Guidelines eingehalten
|
||||
- keine hardcoded Design Values außerhalb der Foundations
|
||||
- neue oder geänderte semantische Tokens in `styleguide.css` gepflegt
|
||||
- bestehende Struktur von `styleguide.css` eingehalten
|
||||
- betroffene Dokumentation nachgeführt
|
||||
- Components unverändert verwendet
|
||||
- keine Component-Internals überschrieben
|
||||
- Pattern-CSS steuert nur Komposition, Layout und Responsiveness
|
||||
- Layout-CSS steuert nur Struktur und Anordnung
|
||||
- Templates verwenden bestehende Layouts, Patterns und Components
|
||||
- keine lokalen Token-Blöcke oder `:root`-Definitionen in HTML-Dateien
|
||||
- keine Refactorings außerhalb Scope
|
||||
- keine Insellösungen oder Workarounds eingeführt
|
||||
|
||||
## Ergebnisbericht
|
||||
|
||||
Nach Umsetzung kurz berichten:
|
||||
|
||||
- geänderte Dateien
|
||||
- relevante geprüfte Dateien
|
||||
- gewählte Styleguide-Ebene
|
||||
- verwendete oder ergänzte Foundation Tokens und semantische Tokens
|
||||
- verwendete Components, Patterns, Layouts oder Templates
|
||||
- nachgeführte Dokumentation
|
||||
- offene Punkte oder benötigte Freigaben
|
||||
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@@ -0,0 +1,45 @@
|
||||
# AGENTS.md
|
||||
|
||||
## Verbindliche Arbeitsweise
|
||||
|
||||
- Der Skill `styleguide erstellung` ist in diesem Projekt **immer** zu nutzen.
|
||||
- Dieses Repository wird ausschließlich lokal geführt und hat **kein Git-Repository**.
|
||||
- Alle Arbeiten erfolgen ausschließlich innerhalb dieser Codebase:
|
||||
- `/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide`
|
||||
|
||||
## Rolle des Agents
|
||||
|
||||
Du bist ein professioneller Interface Designer und Design-System-Architekt für große, skalierbare Webportale.
|
||||
|
||||
Du bist dafür verantwortlich, den Styleguide fachlich sauber, kaskadierend, konsistent und langfristig skalierbar zu führen und zu erweitern.
|
||||
|
||||
Deine Aufgabe ist nicht nur die visuelle Umsetzung einzelner Anforderungen, sondern die Weiterentwicklung eines belastbaren Design-Systems für große Webportale.
|
||||
|
||||
## Projektziel
|
||||
|
||||
In diesem Projekt wird ausschließlich ein Styleguide entwickelt und gepflegt, der skalierbare Designs und CSS für Webportale bereitstellt.
|
||||
|
||||
Alle Änderungen müssen darauf einzahlen, dass der Styleguide:
|
||||
|
||||
- sauber kaskadiert,
|
||||
- langfristig wartbar bleibt,
|
||||
- wiederverwendbare UI-Bausteine bereitstellt,
|
||||
- konsistente Portal-Interfaces ermöglicht,
|
||||
- keine lokalen Sonderlösungen erzeugt.
|
||||
|
||||
## Verhältnis zum Skill `styleguide erstellung`
|
||||
|
||||
Diese `AGENTS.md` definiert Rolle, Projektziel und Projektgrenze.
|
||||
|
||||
Die detaillierten Regeln zur Styleguide-Struktur, Architekturhaltung, Tokens, Components, Patterns, Dokumentation, Scope, Konsistenzcheck und Eskalation stehen im Skill `styleguide erstellung` und sind verbindlich.
|
||||
|
||||
Bei Konflikten gilt:
|
||||
|
||||
1. Projektgrenze in dieser `AGENTS.md`
|
||||
2. Skill `styleguide erstellung`
|
||||
3. konkrete Nutzeraufgabe
|
||||
|
||||
## Projektgrenze
|
||||
|
||||
- Keine Dateien außerhalb dieser Codebase lesen oder ändern.
|
||||
- Bei unklaren Pfaden, gemischten Fundstellen oder Aufgaben außerhalb des Styleguides: stoppen und Rückfrage stellen.
|
||||
@@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Cards</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Components – Cards</h1>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Card Styles -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Components -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- Component: Card -->
|
||||
<section id="component-card">
|
||||
<p class="sg-preview-label">Component: Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card Header</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Standard Card mit Header und hellem Body-Segment.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
|
||||
<div class="sg-strong">Alternative Header</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Alternative Farbvariante des Header-Segments.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown" data-component-part="card-header">
|
||||
<div class="sg-strong">Darkbrown Header</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Kein weißer Trenner zwischen darkbrown und hellem Segment.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Group Card -->
|
||||
<section id="component-group-card">
|
||||
<p class="sg-preview-label">Component: Group Card</p>
|
||||
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
|
||||
<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">Card in Group</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Group Cards bündeln mehrere zusammengehörige Cards.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
|
||||
<div class="sg-strong">Weitere Card</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Die Group Card ist eine eigenständige Component.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Transparent Card -->
|
||||
<section id="component-transparent-card">
|
||||
<p class="sg-preview-label">Component: Transparent Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<div class="sg-transparent-card" data-component="transparent-card">
|
||||
<p class="sg-body">
|
||||
Transparente Card ohne Padding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Charts</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Components – Charts</h1>
|
||||
|
||||
<section id="component-score-bar">
|
||||
<p class="sg-preview-label">Component: Score-Balken / Median-Marker</p>
|
||||
|
||||
<div class="sg-score-bar-list" data-component="score-bar-list">
|
||||
<div class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||||
<div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Data Display</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Components – Data Display</h1>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Components -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- Component: Data Table -->
|
||||
<section id="component-data-table">
|
||||
|
||||
<p class="sg-preview-label">Component: Data Table</p>
|
||||
|
||||
<table class="sg-data-table" aria-label="Beispiel Kennzahlen-Tabelle" data-component="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-component-part="data-table-header-cell">Kennzahl</th>
|
||||
<th data-component-part="data-table-header-cell">Wert</th>
|
||||
<th data-component-part="data-table-header-cell">Peer-Median</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">7.7</td>
|
||||
<td data-component-part="data-table-reference-cell">11.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">8.6</td>
|
||||
<td data-component-part="data-table-reference-cell">9.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
|
||||
<td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-table-value-cell" data-component-state="warning">1.23</td>
|
||||
<td data-component-part="data-table-reference-cell">1.43</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,964 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Interactive Elements</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Components – Interactive Elements</h1>
|
||||
|
||||
|
||||
<!-- Component: Link Buttons -->
|
||||
<section id="component-link-buttons">
|
||||
<p class="sg-preview-label">Component: Link-Buttons</p>
|
||||
|
||||
<div class="sg-component-row">
|
||||
<button class="sg-interaction-element sg-button sg-button--inactive" type="button" data-component="button" data-component-state="inactive" disabled aria-disabled="true">
|
||||
Link-Button inaktiv
|
||||
</button>
|
||||
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
Link-Button aktiv
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Prozessbutton -->
|
||||
<section id="component-process-button">
|
||||
<p class="sg-preview-label">Component: Prozessbutton</p>
|
||||
|
||||
<div class="sg-component-row">
|
||||
<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 inaktiv
|
||||
</button>
|
||||
|
||||
<button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
|
||||
Prozess Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Button Tab Navigation -->
|
||||
<section id="component-button-tab-navigation">
|
||||
<p class="sg-preview-label">Component: Tasten-Navigation-gross</p>
|
||||
|
||||
<div class="sg-tab-button-group" role="tablist" aria-label="Tasten Navigation" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Gesamtbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Marktbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Wachstum</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Profitabilität</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Stabilität</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Compact Button Tab Navigation -->
|
||||
<section id="component-button-tab-navigation-compact">
|
||||
<p class="sg-preview-label">Component: Tasten-Navigation-schmal</p>
|
||||
|
||||
<div class="sg-tab-button-group" role="tablist" aria-label="Schmale Tasten Navigation" data-component="tab-navigation" data-component-size="compact">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button sg-tab-button--compact" type="button" role="tab" aria-selected="true" data-component-part="tab-button">PE</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button sg-tab-button--compact" type="button" role="tab" aria-selected="false" data-component-part="tab-button">PE Forward</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button sg-tab-button--compact" type="button" role="tab" aria-selected="false" data-component-part="tab-button">PEG</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button sg-tab-button--compact" type="button" role="tab" aria-selected="false" data-component-part="tab-button">FCF Yield</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Pulldown -->
|
||||
<section id="component-pulldown">
|
||||
<p class="sg-preview-label">Component: Pulldown</p>
|
||||
|
||||
<!--
|
||||
Pulldown examples are shown on the form-area preview background.
|
||||
This wrapper is only the evaluation surface; it is not part of the pulldown component.
|
||||
State meaning:
|
||||
- form-inactive-selectable: selectable but not currently active.
|
||||
- form-active / selected: currently selected and opens the option panel.
|
||||
- form-disabled: technically unavailable and cannot be operated.
|
||||
-->
|
||||
<div class="sg-form-preview-area">
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-inactive-selectable</p>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
|
||||
<!--
|
||||
Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
|
||||
The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
|
||||
-->
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger">
|
||||
Auswahl
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes inaktives Pulldown" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im inaktiven Pulldown">
|
||||
<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>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-active / selected</p>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="selected">
|
||||
<!--
|
||||
The number in brackets shows the count of currently selected options inside this pulldown.
|
||||
Initial state: one option is selected, therefore the trigger label shows Auswahl (1).
|
||||
If no option is selected, the trigger returns to Auswahl and uses form-inactive-selectable.
|
||||
-->
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
|
||||
Auswahl (1)
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
|
||||
<!--
|
||||
Interactive styleguide variant:
|
||||
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.
|
||||
If the panel 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.
|
||||
-->
|
||||
|
||||
<!--
|
||||
Inactive filter rows:
|
||||
These rows are intentionally dimmed with disabled-opacity although they are still operable.
|
||||
They are not HTML-disabled.
|
||||
First click on the row or change in the select activates the row and keeps the preselected value.
|
||||
The remove button returns the row to the inactive preselection state.
|
||||
This is a component-specific inactive state, not the same as form-disabled.
|
||||
-->
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<p class="sg-pulldown-panel__label sg-body">Gesamtscore</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Inaktiver Filter">
|
||||
<option selected>Min +10%</option>
|
||||
<option>Min +20%</option>
|
||||
<option>Min +30%</option>
|
||||
</select>
|
||||
|
||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Filter entfernen" hidden>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<p class="sg-pulldown-panel__label sg-body">Aktienbewertung</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Inaktiver Filter">
|
||||
<option selected>Min +10%</option>
|
||||
<option>Min +20%</option>
|
||||
<option>Min +30%</option>
|
||||
</select>
|
||||
|
||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Filter entfernen" hidden>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-checkbox-field-list sg-pulldown-panel__checkbox-list" aria-label="Checkboxen im Pulldown">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--on-grey sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Checkbox 1" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 1</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--on-grey sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 2" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 2</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--on-grey sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 3" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
|
||||
<option>Nicht verfügbar</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Component: Search Field -->
|
||||
<section id="component-input-single-line" class="sg-input-component">
|
||||
<p class="sg-preview-label">Component: Suchfeld</p>
|
||||
|
||||
<!--
|
||||
Input examples are shown on the form-area preview background.
|
||||
This wrapper is only the evaluation surface; it is not part of the input component.
|
||||
State meaning:
|
||||
- form-inactive-selectable: empty, selectable input with placeholder text.
|
||||
- form-active / selected: input with current value and visible remove button.
|
||||
- form-disabled: unavailable input; no value can be entered and no remove button is shown.
|
||||
-->
|
||||
<div class="sg-form-preview-area">
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-inactive-selectable</p>
|
||||
<span class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Suchfeld"
|
||||
aria-label="Suchfeld ohne Eingabe"
|
||||
>
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count">0 Treffer</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-active / selected</p>
|
||||
<span class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap" data-has-value="true" data-component="single-line-input" data-component-state="active">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-form-active"
|
||||
type="text"
|
||||
value="Produkt"
|
||||
aria-label="Suchfeld mit Eingabe"
|
||||
>
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count">12 Treffer</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||
<span class="sg-search-field-row">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--disabled sg-form-disabled"
|
||||
type="text"
|
||||
value="Nicht verfügbar"
|
||||
aria-label="Deaktiviertes Suchfeld"
|
||||
disabled
|
||||
data-component="single-line-input"
|
||||
data-component-state="disabled"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Single Line Input -->
|
||||
<section id="component-input-field-single-line" class="sg-input-component">
|
||||
<p class="sg-preview-label">Component: Eingabefeld einzeilig</p>
|
||||
|
||||
<div class="sg-form-preview-area">
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-inactive-selectable</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Einzeiliges Eingabefeld"
|
||||
aria-label="Einzeiliges Eingabefeld ohne Eingabe"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-active / selected</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-form-active"
|
||||
type="text"
|
||||
value="Aktive Eingabe"
|
||||
aria-label="Einzeiliges Eingabefeld mit aktiver Eingabe"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--disabled sg-form-disabled"
|
||||
type="text"
|
||||
value="Nicht verfügbar"
|
||||
aria-label="Deaktiviertes einzeiliges Eingabefeld"
|
||||
disabled
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Multi Line Input -->
|
||||
<section id="component-input-field-multi-line" class="sg-input-component">
|
||||
<p class="sg-preview-label">Component: Eingabefeld mehrzeilig</p>
|
||||
|
||||
<div class="sg-form-preview-area">
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-inactive-selectable</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="3"
|
||||
placeholder="Mehrzeiliges Eingabefeld"
|
||||
aria-label="Mehrzeiliges Eingabefeld ohne Eingabe"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-active / selected</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-active"
|
||||
rows="3"
|
||||
aria-label="Mehrzeiliges Eingabefeld mit aktiver Eingabe"
|
||||
>Aktive Eingabe über mehrere Zeilen</textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Label</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-disabled"
|
||||
rows="3"
|
||||
aria-label="Deaktiviertes mehrzeiliges Eingabefeld"
|
||||
disabled
|
||||
>Nicht verfügbar</textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Checkbox Field -->
|
||||
<section id="component-checkbox-field">
|
||||
<p class="sg-preview-label">Component: Kreuzchenfeld / Multiple Choice</p>
|
||||
|
||||
<!--
|
||||
Checkbox examples are shown on the form-area preview background.
|
||||
This wrapper is only the evaluation surface; it is not part of the checkbox component.
|
||||
State meaning:
|
||||
- form-inactive-selectable: not checked, but selectable.
|
||||
- form-active / selected: checked and currently selected.
|
||||
- form-disabled: technically unavailable and cannot be toggled.
|
||||
-->
|
||||
<div class="sg-form-preview-area sg-checkbox-field-list">
|
||||
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<span class="sg-state-example__label sg-table-label">form-inactive-selectable</span>
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Option nicht gewählt, aber auswählbar</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active">
|
||||
<span class="sg-state-example__label sg-table-label">form-active / selected</span>
|
||||
<button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Option gewählt">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Option gewählt</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
|
||||
<span class="sg-state-example__label sg-table-label">form-disabled</span>
|
||||
<button class="sg-checkbox-field sg-checkbox-field--disabled" type="button" role="checkbox" aria-checked="false" aria-label="Option nicht verfügbar" disabled>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Option nicht verfügbar</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Radio Field -->
|
||||
<section id="component-radio-field">
|
||||
<p class="sg-preview-label">Component: Radio Button / Single Choice</p>
|
||||
|
||||
<!--
|
||||
Radio examples are shown on the form-area preview background.
|
||||
This wrapper is only the evaluation surface; it is not part of the radio component.
|
||||
State meaning:
|
||||
- form-inactive-selectable: not selected, but selectable.
|
||||
- form-active / selected: selected radio option.
|
||||
- form-disabled: technically unavailable and cannot be selected.
|
||||
-->
|
||||
<div class="sg-form-preview-area sg-checkbox-field-list">
|
||||
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||||
<span class="sg-state-example__label sg-table-label">form-inactive-selectable</span>
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option wählen">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Option nicht gewählt, aber auswählbar</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="active">
|
||||
<span class="sg-state-example__label sg-table-label">form-active / selected</span>
|
||||
<button class="sg-radio-field sg-form-active" type="button" role="radio" aria-checked="true" aria-label="Option gewählt">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Option gewählt</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
|
||||
<span class="sg-state-example__label sg-table-label">form-disabled</span>
|
||||
<button class="sg-radio-field sg-radio-field--disabled" type="button" role="radio" aria-checked="false" aria-label="Option nicht verfügbar" disabled>
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Option nicht verfügbar</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Mode Toggle -->
|
||||
<section id="component-mode-toggle">
|
||||
<p class="sg-preview-label">Component: Modus Schieber global</p>
|
||||
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-mode-label="Modus Schieber global">
|
||||
<span class="sg-mode-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">relativ</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- Component: Mode Toggle Local -->
|
||||
<section id="component-mode-toggle-local">
|
||||
<p class="sg-preview-label">Component: Modus Schieber lokal</p>
|
||||
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local" type="button" data-active="relative" aria-label="Modus Schieber lokal: relativ aktiv" data-component="mode-toggle-local" data-mode-label="Modus Schieber lokal">
|
||||
<span class="sg-mode-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">relativ</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- Component: Slider -->
|
||||
<section id="component-slider">
|
||||
<p class="sg-preview-label">Component: Slider</p>
|
||||
|
||||
<div class="sg-form-preview-area">
|
||||
<div class="sg-state-example">
|
||||
<p class="sg-state-example__label sg-table-label">form-active / selected</p>
|
||||
<label class="sg-slider-row" data-component="slider" data-component-state="active">
|
||||
<span class="sg-label">Wert</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider"
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-label="Slider"
|
||||
>
|
||||
<output class="sg-slider-value sg-body" for="slider">6.5</output>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Sandwich Menu Button -->
|
||||
<section id="component-sandwich-menu-button">
|
||||
<p class="sg-preview-label">Component: Sandwich-Menü-Button Portal (groß)</p>
|
||||
|
||||
<div class="sg-component-row">
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Portal-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 Portal-Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Component: Sandwich-Menü-Button Objekt (klein)</p>
|
||||
|
||||
<div class="sg-component-row">
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-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 Objekt-Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Help Icon -->
|
||||
<section id="component-help-icon">
|
||||
<p class="sg-preview-label">Component: Fragezeichen-Icon</p>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Component: Hyperlink -->
|
||||
<section id="component-hyperlink">
|
||||
<p class="sg-preview-label">Component: Hyperlink</p>
|
||||
|
||||
<p class="sg-body">
|
||||
Dies ist ein Text mit einem <a class="sg-hyperlink" href="#" data-component="hyperlink">Hyperlink</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||||
const modeLabel = toggle.dataset.modeLabel || 'Modus Schieber';
|
||||
toggle.dataset.active = nextState;
|
||||
toggle.setAttribute(
|
||||
'aria-label',
|
||||
`${modeLabel}: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-tab-button-group').forEach((group) => {
|
||||
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||
otherButton.setAttribute('aria-selected', String(otherButton === button));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||||
const input = wrap.querySelector('.sg-input-single-line');
|
||||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||||
|
||||
const updateState = () => {
|
||||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||||
};
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
if (input.disabled || clearButton.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
input.value = '';
|
||||
updateState();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
updateState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-slider-row').forEach((row) => {
|
||||
const slider = row.querySelector('.sg-slider');
|
||||
const valueOutput = row.querySelector('.sg-slider-value');
|
||||
|
||||
if (!slider || !valueOutput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateSliderState = () => {
|
||||
const min = Number(slider.min || 0);
|
||||
const max = Number(slider.max || 100);
|
||||
const value = Number(slider.value || 0);
|
||||
const denominator = max - min;
|
||||
const progress = denominator > 0 ? ((value - min) / denominator) * 100 : 0;
|
||||
|
||||
slider.style.setProperty('--sg-slider-progress', `${progress}%`);
|
||||
valueOutput.textContent = value.toFixed(1);
|
||||
};
|
||||
|
||||
slider.addEventListener('input', updateSliderState);
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', () => {
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||||
if (!pulldownDemo) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
|
||||
if (selectionMode !== 'multiple') {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.addEventListener('click', () => {
|
||||
if (radio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const group = radio.closest('.sg-form-preview-area');
|
||||
if (!group) {
|
||||
return;
|
||||
}
|
||||
|
||||
group.querySelectorAll('.sg-radio-field').forEach((otherRadio) => {
|
||||
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0);
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
selectedCount > 0 ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
|
||||
);
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
// Pulldown behavior: pulldown demos open their panel below the trigger.
|
||||
// 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.
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
demo.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
demo.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Filter rows inside the opened pulldown start as inactive preselected rows.
|
||||
// They are visually dimmed but remain operable; clicking or changing them activates the row.
|
||||
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
||||
const select = row.querySelector('.sg-pulldown');
|
||||
const removeButton = row.querySelector('.sg-pulldown-panel__remove');
|
||||
|
||||
const updateFilterRowState = () => {
|
||||
const isActive = row.dataset.active === 'true';
|
||||
row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
removeButton.hidden = !isActive;
|
||||
};
|
||||
|
||||
row.addEventListener('click', (event) => {
|
||||
if (event.target === removeButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.dataset.active !== 'true') {
|
||||
row.dataset.active = 'true';
|
||||
updateFilterRowState();
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
row.dataset.active = 'true';
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
removeButton.addEventListener('click', () => {
|
||||
row.dataset.active = 'false';
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
wrap.dataset.open = String(nextState);
|
||||
button.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||
|
||||
if (!button || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = wrap.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
|
||||
const otherButton = otherWrap.querySelector('.sg-help-icon');
|
||||
otherWrap.dataset.open = 'false';
|
||||
if (otherButton) {
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((menuWrap) => {
|
||||
const menuButton = menuWrap.querySelector('.sg-sandwich-button');
|
||||
menuWrap.dataset.open = 'false';
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
wrap.dataset.align = 'left';
|
||||
wrap.dataset.open = String(nextState);
|
||||
button.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
wrap.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Global close behavior for overlay-style controls.
|
||||
// A click outside sandwich menus and pulldown demos closes both overlay types.
|
||||
document.addEventListener('click', (event) => {
|
||||
if (
|
||||
event.target.closest('.sg-sandwich-menu-wrap')
|
||||
|| event.target.closest('.sg-pulldown-demo')
|
||||
|| event.target.closest('.sg-help-icon-wrap')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Typography</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Components – Typography</h1>
|
||||
|
||||
<section id="component-typography">
|
||||
<p class="sg-preview-label">Component: Typography</p>
|
||||
|
||||
<div class="sg-typography-preview" data-component="typography-preview">
|
||||
<p class="sg-brand-title" data-component-part="brand-title">Portal Titel</p>
|
||||
<h1 class="sg-heading-h1" data-component-part="heading-h1">H1 Überschrift</h1>
|
||||
<h2 class="sg-heading-h2" data-component-part="heading-h2">H2 Überschrift</h2>
|
||||
<p class="sg-body" data-component-part="body-text">Body / Fließtext</p>
|
||||
<p class="sg-strong" data-component-part="strong-text">Strong / hervorgehobener Text</p>
|
||||
<p class="sg-section-title" data-component-part="section-title">Section Title</p>
|
||||
<p class="sg-bar-label" data-component-part="bar-label">Bar Label</p>
|
||||
<p class="sg-table-label" data-component-part="table-label">Table Label</p>
|
||||
<p class="sg-table-value" data-component-part="table-value">Table Value</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Foundations</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Foundations</h1>
|
||||
|
||||
<section id="foundations-colors">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Colors</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>darkblue</td><td>#4661A9</td><td>Primäre Card-Kopfsegmente, Portalheader, Toggle-Handle sowie primäre Chart-Werte ohne Positiv-Negativ-Darstellung.</td></tr>
|
||||
<tr><td>darkgreen</td><td>#4D646E</td><td>Alternative Card-Kopfsegmente.</td></tr>
|
||||
<tr><td>darkbrown</td><td>#665F57</td><td>Gedämpfte alternative Card-Kopfsegmente.</td></tr>
|
||||
<tr><td>light-grey</td><td>#E2E5E9</td><td>Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe.</td></tr>
|
||||
<tr><td>medium-grey</td><td>#D4D6DB</td><td>Aktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern.</td></tr>
|
||||
<tr><td>dark-grey</td><td>#7B879D</td><td>Ausgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente.</td></tr>
|
||||
<tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
|
||||
<tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
|
||||
<tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
|
||||
<tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>
|
||||
<tr><td>font-dark</td><td>#414959</td><td>Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.</td></tr>
|
||||
<tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
|
||||
<tr><td>font-hyperlink</td><td>#FF6900</td><td>Links in Texten, Prozessbuttons und Page-Navigations-Cards.</td></tr>
|
||||
<tr><td>process-inactive</td><td>#FFAE79</td><td>Inaktive Hintergrundfläche des Prozessbuttons.</td></tr>
|
||||
<tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portalhintergrund.</td></tr>
|
||||
<tr><td>background-purple-light</td><td>#656C7D</td><td>Group Cards und gruppierende Card-Flächen.</td></tr>
|
||||
<tr><td>transparent</td><td>transparent</td><td>Transparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-states">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">States</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>form-area</td><td>background: light-grey</td><td>Hintergrund von Formularbereichen, Optionszeilen und Formular-Preview-Flächen. Die Fläche gehört nicht zum einzelnen Formularelement.</td></tr>
|
||||
<tr><td>form-active</td><td>background: white; color: font-dark</td><td>Aktive oder ausgewählte Eingabefelder, Checkboxen, Radios, Pulldown-Trigger und Pulldown-Optionen. Bei Pulldowns zeigt die Zahl in Klammern die Anzahl gewählter Optionen.</td></tr>
|
||||
<tr><td>form-inactive-selectable</td><td>background: white; color: font-dark</td><td>Nicht aktive, aber auswählbare Formularfelder, Checkboxen, Radios und Pulldown-Trigger. Dieser Zustand nutzt keine Transparenz.</td></tr>
|
||||
<tr><td>form-disabled</td><td>background: white; color: dark-grey; opacity: disabled-opacity</td><td>Fachlich nicht verfügbare oder technisch deaktivierte Formularoptionen. Dieser Zustand ist nicht bedienbar.</td></tr>
|
||||
<tr><td>pulldown-panel-open</td><td>background: medium-grey</td><td>Geöffnete Pulldown-Fläche. Das Panel öffnet unter dem Trigger, schließt bei Klick außerhalb und richtet sich bei Bildschirmrand automatisch links oder rechts aus.</td></tr>
|
||||
<tr><td>overlay-panel-open</td><td>background: medium-grey oder light-grey je nach Komponente</td><td>Ausklappbare Overlays wie Pulldown-Panels, Hilfetexte und Sandwich-Menüs. Es ist immer nur das jeweils relevante Overlay geöffnet.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-typography">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Typography</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>body</td><td>Open Sans, 1rem, Regular</td><td>Standardtext im Portal.</td></tr>
|
||||
<tr><td>brand</td><td>Open Sans, 1.6rem, Regular</td><td>Portal-Brand im Portal Header.</td></tr>
|
||||
<tr><td>h1</td><td>Open Sans, 1.5rem, Regular</td><td>Hauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext.</td></tr>
|
||||
<tr><td>h2</td><td>Open Sans, 1.25rem, Regular</td><td>Zwischenüberschriften; kleiner als H1 und 25% größer als Fließtext.</td></tr>
|
||||
<tr><td>strong</td><td>Open Sans, 1rem, Semibold</td><td>Hervorgehobener Text, Labels und Button-Text.</td></tr>
|
||||
<tr><td>section-title</td><td>Open Sans, 1rem, Regular</td><td>Section-Titel; aktuell identisch mit body, aber separat benannt.</td></tr>
|
||||
<tr><td>bar-label</td><td>Open Sans, 1rem, Semibold</td><td>Labels bei Score-Balken.</td></tr>
|
||||
<tr><td>table-label</td><td>Open Sans, 0.8rem, Regular</td><td>Tabellen- und Grafikbeschriftungen sowie kurze Hilfetexte und Tooltip-Inhalte.</td></tr>
|
||||
<tr><td>table-value</td><td>Open Sans, 0.8rem, Semibold</td><td>Hervorgehobene Tabellen- und Grafikwerte.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-spacing">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Spacing</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>spacing-small</td><td>0.3rem</td><td>Kleine Abstände zwischen Interaktionselementen, Card-Segmenten, Pulldown-Optionen, Overlay-Triggern und eng zusammengehörigen Cards.</td></tr>
|
||||
<tr><td>spacing-large</td><td>1rem</td><td>Große Abstände zwischen Cards und Gruppen.</td></tr>
|
||||
<tr><td>card-segment-padding</td><td>0.75rem vertikal / 1rem horizontal (Desktop), 0.5rem horizontal (Mobile)</td><td>Innenabstand von Card-Segmenten; auf Mobile wird das horizontale Padding reduziert.</td></tr>
|
||||
<tr><td>interaction-padding</td><td>0.25rem vertikal / 1rem horizontal</td><td>Innenabstand von Interaktionselementen.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-dimensions">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Dimensions</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>interaction-height</td><td>2rem</td><td>Einheitliche Höhe für Buttons, Tabs, Pulldowns, Eingabefelder und Sandwich-Menü-Buttons.</td></tr>
|
||||
<tr><td>compact-interaction-height</td><td>1.5rem</td><td>Einheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal.</td></tr>
|
||||
<tr><td>compact-interaction-padding</td><td>0.15rem vertikal / 0.75rem horizontal</td><td>Innenabstand schmaler Interaktionselemente.</td></tr>
|
||||
<tr><td>small-interaction-element-size</td><td>1.25rem</td><td>Eigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons.</td></tr>
|
||||
<tr><td>disabled-opacity</td><td>0.45</td><td>Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.</td></tr>
|
||||
<tr><td>sandwich-line-width</td><td>1.25rem</td><td>Länge der Striche im Sandwich-Menü-Button.</td></tr>
|
||||
<tr><td>sandwich-line-height</td><td>4px</td><td>Dicke der Striche im Sandwich-Menü-Button.</td></tr>
|
||||
<tr><td>sandwich-line-gap</td><td>3px</td><td>Abstand zwischen den Strichen im Sandwich-Menü-Button.</td></tr>
|
||||
<tr><td>score-bar-height</td><td>1rem</td><td>Höhe horizontaler Score-Balken.</td></tr>
|
||||
<tr><td>score-marker-width</td><td>6px</td><td>Breite des Median-Markers.</td></tr>
|
||||
<tr><td>score-marker-height</td><td>score-bar-height + 2px</td><td>Median-Marker ragt oben und unten je 1px über den Score-Balken hinaus.</td></tr>
|
||||
<tr><td>chart-height-bar</td><td>24rem</td><td>Basis-Höhe für Bar Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.</td></tr>
|
||||
<tr><td>chart-height-line</td><td>18rem</td><td>Basis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.</td></tr>
|
||||
<tr><td>chart-axis-label-column-width</td><td>4rem</td><td>Breite der Y-Achsenbeschriftungsspalte bei Charts.</td></tr>
|
||||
<tr><td>chart-axis-label-gap</td><td>5px</td><td>Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.</td></tr>
|
||||
<tr><td>chart-bar-width</td><td>2rem</td><td>Basisbreite von Balken in Bar Charts.</td></tr>
|
||||
<tr><td>chart-grid-line-width</td><td>1px</td><td>Linienstärke von Gridlines und Achsen in Charts.</td></tr>
|
||||
<tr><td>chart-line-width</td><td>2px</td><td>Linienstärke der Datenlinie im Line Chart.</td></tr>
|
||||
<tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern.</td></tr>
|
||||
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
||||
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
||||
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-radius">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Radius</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>radius-card</td><td>8px</td><td>Cards, Group Cards, Formularflächen, Optionszeilen und geöffnete Overlay-Flächen.</td></tr>
|
||||
<tr><td>radius-interaction</td><td>4px</td><td>Buttons, Eingabefelder, Pulldown-Trigger, Checkboxen und Modus-Schieber.</td></tr>
|
||||
<tr><td>radius-graph-bar</td><td>2px</td><td>Score-Balken und Graphik-Balken.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="foundations-shadows-borders">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Shadows / Borders</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Wert</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>shadow-none</td><td>none</td><td>Kein Schatten für nicht-overlay Flächen.</td></tr>
|
||||
<tr><td>shadow-overlay</td><td>0 10px 24px rgba(0, 0, 0, 0.22)</td><td>Standard-Schatten für aufklappbare Flächen wie Pulldown-, Menü- und Help-Panels.</td></tr>
|
||||
<tr><td>border-none</td><td>none</td><td>Es werden keine Borders verwendet.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Portal Styleguide</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="sg-index">
|
||||
|
||||
<h1 class="sg-main-heading">Portal Styleguide</h1>
|
||||
|
||||
<section class="sg-index-section">
|
||||
<h2 class="sg-sub-heading">Foundations</h2>
|
||||
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./foundations.html">Foundations</a></li>
|
||||
<li><a href="./semantic-tokens-components.html">Semantic Tokens Components</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sg-index-section">
|
||||
<h2 class="sg-sub-heading">Components</h2>
|
||||
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./components/cards.html">Cards</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>
|
||||
<li><a href="./components/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sg-index-section">
|
||||
<h2 class="sg-sub-heading">Patterns</h2>
|
||||
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./patterns/portal-header.html">Portal Header</a></li>
|
||||
<li><a href="./patterns/options-row.html">Options Row</a></li>
|
||||
<li><a href="./patterns/object-card.html">Object Card</a></li>
|
||||
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
|
||||
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
|
||||
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
|
||||
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sg-index-section">
|
||||
<h2 class="sg-sub-heading">Layouts</h2>
|
||||
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Card Gruppe mit Tastennavigation</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Card Gruppe mit Tastennavigation</h1>
|
||||
<section id="pattern-card-gruppe-mit-tastennavigation">
|
||||
<p class="sg-preview-label">Pattern: Card Gruppe mit Tastennavigation</p>
|
||||
|
||||
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
|
||||
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Tasten Navigation" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="content-block-card-1" id="content-block-tab-1" data-component-part="tab-button">Taste 1</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-2" id="content-block-tab-2" data-component-part="tab-button">Taste 2</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-3" id="content-block-tab-3" data-component-part="tab-button">Taste 3</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panels">
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-1" role="tabpanel" aria-labelledby="content-block-tab-1">
|
||||
<article class="sg-card sg-content-block-card-group__card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
|
||||
<div class="sg-strong">Card 1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nunc sed velit dignissim sodales ut eu sem integer. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
|
||||
<article class="sg-card sg-content-block-card-group__card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
|
||||
<div class="sg-strong">Card 2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam maecenas ultricies mi eget mauris. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
|
||||
<article class="sg-card sg-content-block-card-group__card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
|
||||
<div class="sg-strong">Card 3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
|
||||
|
||||
if (tabGroup) {
|
||||
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
|
||||
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
const activateTab = (targetTab) => {
|
||||
tabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||||
});
|
||||
|
||||
panels.forEach((panel) => {
|
||||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||||
});
|
||||
};
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => {
|
||||
activateTab(tab);
|
||||
});
|
||||
|
||||
tab.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
const direction = event.key === 'ArrowRight' ? 1 : -1;
|
||||
const nextIndex = (index + direction + tabs.length) % tabs.length;
|
||||
const nextTab = tabs[nextIndex];
|
||||
nextTab.focus();
|
||||
activateTab(nextTab);
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,948 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Layout Card Listen Seite</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Card Listen Seite</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="Card Listen Seite">
|
||||
<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>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" 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="false" data-component-part="tab-button" data-component-state="inactive">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="true" data-component-part="tab-button" data-component-state="active">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<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 sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</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-card-list-page__title-row">
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1>
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Hilfe zur Listenansicht und zu den Filteroptionen.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur Listenübersicht">
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<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. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Objektliste">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 1">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 1</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 2">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 2</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 3">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 3</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 4">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 4</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 5">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 5</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 6">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 6</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 7">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 7</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 8">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 8</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 9">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 9</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 10">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 10</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 11">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 11</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 12">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 12</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 13">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 13</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 14">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 14</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 15">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 15</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 16">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 16</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 17">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 17</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 18">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 18</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 19">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 19</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 20">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Objekt 20</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-card-list-page__navigation">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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">
|
||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">mehr laden</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const updateObjectCardGridRowState = () => {
|
||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||||
|
||||
if (cards.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstTop = cards[0].offsetTop;
|
||||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||||
|
||||
if (!hasMultipleRows) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||||
const referenceCard = firstRowCards[0];
|
||||
if (!referenceCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||||
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||||
grid.classList.add('sg-object-card-grid--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-portal-header__tabs').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));
|
||||
});
|
||||
});
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
demo.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
demo.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||
|
||||
if (!button || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = wrap.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
|
||||
const otherButton = otherWrap.querySelector('.sg-help-icon');
|
||||
otherWrap.dataset.open = 'false';
|
||||
if (otherButton) {
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
wrap.dataset.align = 'left';
|
||||
wrap.dataset.open = String(nextState);
|
||||
button.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
wrap.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||||
const input = wrap.querySelector('.sg-input-single-line');
|
||||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||||
|
||||
if (!input || !clearButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateState = () => {
|
||||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||||
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||||
};
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
updateState();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
updateState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.target.closest('.sg-help-icon-wrap') && !event.target.closest('.sg-pulldown-demo')) {
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Formular mit Abschnitten</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Formular mit Abschnitten</h1>
|
||||
<section id="pattern-formular-mit-abschnitten">
|
||||
<p class="sg-preview-label">Pattern: Formular mit Abschnitten</p>
|
||||
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||
<form class="sg-form-sections-card" action="#" method="post">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<h2 class="sg-strong sg-form-sections-card__title">Formular</h2>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-1">
|
||||
<h2 id="form-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Persoenliche Auswahl</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte waehlen Sie Ihre bevorzugte Kontaktart fuer die Rueckmeldung.</p>
|
||||
|
||||
<div class="sg-form-sections-card__option-group" role="radiogroup" aria-label="Kontaktart">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Kontakt per E-Mail">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>E-Mail</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Kontakt per Telefon">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Telefon</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-2">
|
||||
<h2 id="form-kapitel-2" class="sg-strong sg-form-sections-card__chapter-title">Optionale Angaben</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte markieren Sie die zusaetzlichen Informationen, die wir beruecksichtigen sollen.</p>
|
||||
|
||||
<div class="sg-form-sections-card__option-group" aria-label="Zusatzoptionen">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Newsletter abonnieren">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Newsletter abonnieren</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Rueckruf am Vormittag erlauben">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Rueckruf am Vormittag erlauben</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-3">
|
||||
<h2 id="form-kapitel-3" class="sg-strong sg-form-sections-card__chapter-title">Freitext und Details</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte erfassen Sie einen kurzen Betreff und eine genauere Beschreibung Ihres Anliegens.</p>
|
||||
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Betreff</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Betreff eingeben"
|
||||
aria-label="Betreff"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Nachricht</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="3"
|
||||
placeholder="Nachricht eingeben"
|
||||
aria-label="Nachricht"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Prozess Button</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const formCard = document.querySelector('.sg-form-sections-card');
|
||||
if (!formCard) {
|
||||
return;
|
||||
}
|
||||
const processButton = formCard.querySelector('.sg-button--process');
|
||||
if (!processButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateProcessButtonState = () => {
|
||||
const hasCheckedOption = Array.from(formCard.querySelectorAll('[role="radio"], [role="checkbox"]'))
|
||||
.some((field) => field.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(formCard.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasCheckedOption || hasTextInput;
|
||||
|
||||
processButton.disabled = !isActive;
|
||||
processButton.setAttribute('aria-disabled', String(!isActive));
|
||||
processButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
formCard.querySelectorAll('[role="radiogroup"]').forEach((group) => {
|
||||
group.querySelectorAll('[data-component="radio-field"]').forEach((option) => {
|
||||
option.addEventListener('click', () => {
|
||||
const selectedRadio = option.querySelector('.sg-radio-field');
|
||||
if (!selectedRadio || selectedRadio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
group.querySelectorAll('[data-component="radio-field"]').forEach((otherOption) => {
|
||||
const otherRadio = otherOption.querySelector('.sg-radio-field');
|
||||
if (!otherRadio) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isSelected = otherRadio === selectedRadio;
|
||||
otherRadio.setAttribute('aria-checked', String(isSelected));
|
||||
otherRadio.classList.toggle('sg-form-active', isSelected);
|
||||
otherRadio.classList.toggle('sg-radio-field--inactive-selectable', !isSelected);
|
||||
otherOption.setAttribute('data-component-state', isSelected ? 'active' : 'inactive-selectable');
|
||||
});
|
||||
|
||||
updateProcessButtonState();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
formCard.querySelectorAll('[data-component="checkbox-field"]').forEach((option) => {
|
||||
option.addEventListener('click', () => {
|
||||
const checkbox = option.querySelector('.sg-checkbox-field');
|
||||
if (!checkbox || checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
checkbox.classList.toggle('sg-form-active', nextState);
|
||||
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
|
||||
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
|
||||
updateProcessButtonState();
|
||||
});
|
||||
});
|
||||
|
||||
formCard.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateProcessButtonState);
|
||||
});
|
||||
|
||||
updateProcessButtonState();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Navigation Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Navigation Card</h1>
|
||||
<section id="pattern-navigation-card">
|
||||
<p class="sg-preview-label">Pattern: Navigation Card</p>
|
||||
|
||||
<div class="sg-preview-area sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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">
|
||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Object Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Object Card</h1>
|
||||
<section id="pattern-object-card">
|
||||
<p class="sg-preview-label">Pattern: Object Card</p>
|
||||
<p class="sg-body">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Alcon Inc.</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" 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 sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const updateObjectCardGridRowState = () => {
|
||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||||
|
||||
if (cards.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Measure in native responsive state first (no shared-width lock).
|
||||
// Reading offsetTop after reset forces layout with current viewport width.
|
||||
const firstTop = cards[0].offsetTop;
|
||||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||||
|
||||
if (!hasMultipleRows) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||||
const referenceCard = firstRowCards[0];
|
||||
if (!referenceCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||||
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||||
grid.classList.add('sg-object-card-grid--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Object Group Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Object Group Card</h1>
|
||||
<section id="pattern-object-group-card">
|
||||
<p class="sg-preview-label">Pattern: Object Group Card</p>
|
||||
<p class="sg-body sg-object-group-card__hint">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Alcon Inc.</div>
|
||||
</header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const updateObjectCardGridRowState = () => {
|
||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||||
|
||||
if (cards.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Measure in native responsive state first (no shared-width lock).
|
||||
// Reading offsetTop after reset forces layout with current viewport width.
|
||||
const firstTop = cards[0].offsetTop;
|
||||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||||
|
||||
if (!hasMultipleRows) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||||
const referenceCard = firstRowCards[0];
|
||||
if (!referenceCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||||
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||||
grid.classList.add('sg-object-card-grid--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,377 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Options Row</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Options Row</h1>
|
||||
<section id="pattern-options-row">
|
||||
<p class="sg-preview-label">Pattern: Options Row</p>
|
||||
|
||||
<p class="sg-table-label" style="color: var(--text-options-row-description);">
|
||||
Desktop/Tablet: gleiche Breite wie das zugehörige Element; linke Optionen linksbündig, rechte Optionen rechtsbündig.
|
||||
</p>
|
||||
|
||||
<p class="sg-table-label" style="color: var(--text-options-row-description);">
|
||||
Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Pulldown demo logic:
|
||||
// Pulldowns with checkbox options stay open while options are toggled,
|
||||
// because users may select or deselect several options in one opened panel.
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
demo.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
demo.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||
|
||||
if (!button || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = wrap.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
|
||||
const otherButton = otherWrap.querySelector('.sg-help-icon');
|
||||
otherWrap.dataset.open = 'false';
|
||||
if (otherButton) {
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
wrap.dataset.align = 'left';
|
||||
wrap.dataset.open = String(nextState);
|
||||
button.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
wrap.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-help-icon-wrap') || event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||||
const input = wrap.querySelector('.sg-input-single-line');
|
||||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||||
|
||||
const updateState = () => {
|
||||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||||
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||||
};
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
updateState();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
updateState();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,492 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Portal Header</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Portal Header</h1>
|
||||
|
||||
<section id="pattern-portal-header">
|
||||
<p class="sg-preview-label">Pattern: Portal Header</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Desktop/Tablet: Header skaliert über die verfügbare Breite.
|
||||
</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Mobile: gleiche Struktur, ebenfalls volle verfügbare Breite; kein eigener visueller Zustand.
|
||||
</p>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Portal Header ohne Options Row
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" 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>
|
||||
|
||||
<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 sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||
Nächstes Element (Abstand nach unten: spacing-large)
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Portal Header mit Options Row
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" 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>
|
||||
|
||||
<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 sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||
Nächstes Element (Abstand nach unten: spacing-large)
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.sg-portal-header__tabs').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');
|
||||
|
||||
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));
|
||||
});
|
||||
});
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
demo.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
demo.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||
|
||||
if (!button || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = wrap.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
|
||||
const otherButton = otherWrap.querySelector('.sg-help-icon');
|
||||
otherWrap.dataset.open = 'false';
|
||||
if (otherButton) {
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
wrap.dataset.align = 'left';
|
||||
wrap.dataset.open = String(nextState);
|
||||
button.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > window.innerWidth) {
|
||||
wrap.dataset.align = 'right';
|
||||
}
|
||||
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||||
const input = wrap.querySelector('.sg-input-single-line');
|
||||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||||
|
||||
if (!input || !clearButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateState = () => {
|
||||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||||
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||||
};
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
updateState();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
updateState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (event.target.closest('.sg-help-icon-wrap') || event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Semantic Tokens Components</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Semantic Tokens Components</h1>
|
||||
|
||||
<section id="semantic-cards">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Cards</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Cards</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>surface-card</td><td>color-light-grey</td><td>Grundfläche der Card.</td></tr>
|
||||
<tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr>
|
||||
<tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr>
|
||||
<tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr>
|
||||
<tr><td>surface-card-header-alternative2</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche (im CSS derzeit als surface-card-header-muted geführt).</td></tr>
|
||||
<tr><td>divider-card-segment</td><td>color-white</td><td>Trenner zwischen Segmenten.</td></tr>
|
||||
<tr><td>text-card-header</td><td>color-font-light</td><td>Header-Textfarbe.</td></tr>
|
||||
<tr><td>text-card-body</td><td>color-font-dark</td><td>Standard-Textfarbe im Body.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Group Card</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>surface-card-group</td><td>color-background-purple-light</td><td>Fläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Text Group Box</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>surface-card-transparent</td><td>color-transparent</td><td>Transparente Fläche der Text-Group-Box ohne Card-Segmente.</td></tr>
|
||||
<tr><td>text-group-box</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box (im CSS derzeit als text-card-transparent geführt).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-interactive">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Interactive Elements</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Button</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>surface-button-active</td><td>color-medium-grey</td><td>Fläche aktiver Standard-Buttons.</td></tr>
|
||||
<tr><td>surface-button-inactive</td><td>color-light-grey</td><td>Fläche inaktiver Standard-Buttons.</td></tr>
|
||||
<tr><td>surface-button-process</td><td>color-font-hyperlink</td><td>Fläche von Prozess-/CTA-Buttons.</td></tr>
|
||||
<tr><td>surface-button-process-inactive</td><td>color-process-inactive</td><td>Fläche inaktiver Prozess-/CTA-Buttons.</td></tr>
|
||||
<tr><td>text-button-process</td><td>color-font-light</td><td>Textfarbe auf Prozess-/CTA-Buttons.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Tabs</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>surface-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>
|
||||
<tr><td>surface-tab-unselected</td><td>color-white</td><td>Fläche nicht ausgewählter Tabs.</td></tr>
|
||||
<tr><td>text-tab-selected</td><td>color-font-light</td><td>Textfarbe des ausgewählten Tabs.</td></tr>
|
||||
<tr><td>text-tab-unselected</td><td>color-dark-grey</td><td>Textfarbe nicht ausgewählter Tabs.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Form Controls</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>surface-control-default</td><td>color-white</td><td>Standardfläche für Input-/Auswahl-Controls.</td></tr>
|
||||
<tr><td>surface-control-active</td><td>color-white</td><td>Fläche aktiver Controls.</td></tr>
|
||||
<tr><td>surface-control-inactive</td><td>color-white</td><td>Fläche inaktiver, aber wählbarer Controls.</td></tr>
|
||||
<tr><td>surface-control-disabled</td><td>color-white</td><td>Fläche deaktivierter Controls.</td></tr>
|
||||
<tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr>
|
||||
<tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr>
|
||||
<tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</td></tr>
|
||||
<tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr>
|
||||
<tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
|
||||
<tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</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>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</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>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
|
||||
<tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</td></tr>
|
||||
<tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
|
||||
<tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
|
||||
<tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
|
||||
<tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
|
||||
<tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
|
||||
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Portal-Sandwich-Menü-Panels (groß).</td></tr>
|
||||
<tr><td>surface-menu-panel-object</td><td>color-light-grey</td><td>Fläche des Objekt-Sandwich-Menü-Panels (klein).</td></tr>
|
||||
<tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Portal-Sandwich-Menü.</td></tr>
|
||||
<tr><td>text-menu-link-object</td><td>color-font-dark</td><td>Linktextfarbe im Objekt-Sandwich-Menü.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Toggle / Checkbox / Radio / Help</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>surface-toggle-track</td><td>color-medium-grey</td><td>Toggle-Track-Fläche.</td></tr>
|
||||
<tr><td>surface-toggle-handle</td><td>color-darkblue</td><td>Toggle-Handle-Fläche.</td></tr>
|
||||
<tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal).</td></tr>
|
||||
<tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.</td></tr>
|
||||
<tr><td>surface-checkbox-default</td><td>color-light-grey</td><td>Standardfläche der Checkbox.</td></tr>
|
||||
<tr><td>surface-checkbox-on-context</td><td>color-white</td><td>Checkbox-Fläche auf Kontextflächen.</td></tr>
|
||||
<tr><td>surface-radio-default</td><td>color-white</td><td>Standardfläche des Radio-Buttons.</td></tr>
|
||||
<tr><td>icon-radio-mark</td><td>color-font-dark</td><td>Markierungsfarbe im Radio-Button.</td></tr>
|
||||
<tr><td>surface-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons.</td></tr>
|
||||
<tr><td>surface-help-panel</td><td>color-light-grey</td><td>Fläche des Help-Panels.</td></tr>
|
||||
<tr><td>text-help-icon</td><td>color-font-dark</td><td>Textfarbe im Help-Icon.</td></tr>
|
||||
<tr><td>text-help-panel</td><td>color-font-dark</td><td>Textfarbe im Help-Panel.</td></tr>
|
||||
<tr><td>icon-sandwich-line-portal</td><td>color-font-dark</td><td>Linienfarbe des Portal-Sandwich-Icons (groß).</td></tr>
|
||||
<tr><td>icon-sandwich-line-object</td><td>color-font-dark</td><td>Linienfarbe des Objekt-Sandwich-Icons (klein).</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Slider</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>surface-slider-track</td><td>color-medium-grey</td><td>Grundfläche des Slider-Strichs.</td></tr>
|
||||
<tr><td>surface-slider-progress</td><td>color-dark-grey</td><td>Ausgewählter Bereich links vom Slider-Knopf.</td></tr>
|
||||
<tr><td>surface-slider-thumb</td><td>color-dark-grey</td><td>Gefüllte Fläche des Slider-Knopfs (ohne Linie).</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Preview Area</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>surface-form-preview</td><td>color-light-grey</td><td>Fläche von Formular-/Control-Preview-Bereichen.</td></tr>
|
||||
<tr><td>text-hyperlink</td><td>color-font-hyperlink</td><td>Linkfarbe in interaktiven Texten.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-charts">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Charts</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Score Bar</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>surface-score-bar-track</td><td>color-light-grey</td><td>Hintergrund der Score-Bar.</td></tr>
|
||||
<tr><td>chart-value-positive</td><td>color-signal-green</td><td>Füllfarbe positiver Werte.</td></tr>
|
||||
<tr><td>chart-value-neutral</td><td>color-signal-yellow</td><td>Füllfarbe neutraler Werte.</td></tr>
|
||||
<tr><td>chart-value-negative</td><td>color-signal-red</td><td>Füllfarbe negativer Werte.</td></tr>
|
||||
<tr><td>chart-median-line</td><td>color-font-dark</td><td>Farbe der Median-Markierung.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Bar / Line Chart</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>surface-chart-area</td><td>color-light-grey</td><td>Grundfläche des Charts.</td></tr>
|
||||
<tr><td>chart-value-primary</td><td>color-darkblue</td><td>Primäre Datenreihe.</td></tr>
|
||||
<tr><td>chart-value-reference</td><td>color-medium-grey</td><td>Referenz-/Vergleichsreihe.</td></tr>
|
||||
<tr><td>chart-grid-line</td><td>color-medium-grey</td><td>Gridline-Farbe.</td></tr>
|
||||
<tr><td>chart-axis-line</td><td>color-font-dark</td><td>Achsenfarbe.</td></tr>
|
||||
<tr><td>chart-marker-line</td><td>color-font-dark</td><td>Marker-/Hilfslinienfarbe.</td></tr>
|
||||
<tr><td>text-chart-default</td><td>color-font-dark</td><td>Textfarbe in Achsen/Labels.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-data-display">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Data Display</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Data Table Small</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>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Tabelle.</td></tr>
|
||||
<tr><td>surface-data-table-header</td><td>color-light-grey</td><td>Fläche der Tabellenkopfzeile.</td></tr>
|
||||
<tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Tabellenzellen.</td></tr>
|
||||
<tr><td>surface-data-table-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons im Tabellenkontext.</td></tr>
|
||||
<tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Tabellenzellen.</td></tr>
|
||||
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Tabellenzellen.</td></tr>
|
||||
<tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Tabellen-Help-Icon.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-typography">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Typography</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Typography Preview</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>text-typography-preview</td><td>color-font-light</td><td>Textfarbe in der Typografie-Preview.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-patterns">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Patterns</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Portal Header</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>surface-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
|
||||
<tr><td>surface-portal-header-tab</td><td>color-darkblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>surface-portal-header-tab-active</td><td>color-light-grey</td><td>Fläche aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>surface-portal-header-menu-panel</td><td>surface-menu-panel-portal</td><td>Alias auf Portal-Menü-Panel-Fläche aus Interactive Elements.</td></tr>
|
||||
<tr><td>surface-portal-header-menu-trigger</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche aus Interactive Elements.</td></tr>
|
||||
<tr><td>text-portal-header-brand</td><td>color-font-light</td><td>Textfarbe der Brand.</td></tr>
|
||||
<tr><td>font-size-portal-header-brand</td><td>calc(font-size-brand * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
|
||||
<tr><td>text-portal-header-tab</td><td>color-font-light</td><td>Textfarbe nicht aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>text-portal-header-tab-active</td><td>color-font-dark</td><td>Textfarbe aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>text-portal-header-menu-link</td><td>text-menu-link-portal</td><td>Alias auf Portal-Menü-Link-Textfarbe.</td></tr>
|
||||
<tr><td>icon-portal-header-menu-line</td><td>icon-sandwich-line-portal</td><td>Alias auf Portal-Sandwich-Linienfarbe.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Options Row</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>surface-options-row</td><td>color-light-grey</td><td>Grundfläche der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-input-clear</td><td>surface-input-clear</td><td>Alias auf Clear-Button-Fläche im Input der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-toggle-track</td><td>surface-toggle-track</td><td>Alias auf Toggle-Track-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-toggle-handle</td><td>surface-toggle-handle</td><td>Alias auf Toggle-Handle-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-track</td><td>surface-slider-track</td><td>Alias auf Slider-Track-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-progress</td><td>surface-slider-progress</td><td>Alias auf den ausgewählten Slider-Bereich innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-thumb</td><td>surface-slider-thumb</td><td>Alias auf die Slider-Knopf-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-help-icon</td><td>surface-help-icon</td><td>Alias auf Help-Icon-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-help-panel</td><td>surface-help-panel</td><td>Alias auf Help-Panel-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>divider-options-row-mobile</td><td>color-white</td><td>Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe für Controls in der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-placeholder</td><td>text-control-disabled</td><td>Alias auf Placeholder-/Disabled-Textfarbe in der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-help-icon</td><td>color-font-light</td><td>Textfarbe im Help-Icon der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-help-panel</td><td>text-help-panel</td><td>Alias auf Help-Panel-Textfarbe der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-description</td><td>color-font-light</td><td>Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row.</td></tr>
|
||||
<tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
|
||||
<tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
|
||||
<tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Object Card</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-object-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
|
||||
<tr><td>layout-object-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
|
||||
<tr><td>layout-object-card-height</td><td>dimension-object-card-height</td><td>Fixe Höhe der Object Card im Desktop-Layout.</td></tr>
|
||||
<tr><td>layout-object-card-mobile-width</td><td>dimension-object-card-mobile-width</td><td>Volle verfügbare Breite der Object Card auf Mobile.</td></tr>
|
||||
<tr><td>layout-object-card-mobile-height</td><td>dimension-object-card-mobile-height</td><td>Inhaltsabhängige Höhe der Object Card auf Mobile.</td></tr>
|
||||
<tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
|
||||
<tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt.</td></tr>
|
||||
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</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>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
|
||||
<tr><td>surface-navigation-card-body</td><td>color-white</td><td>Fläche im Body-Segment der Navigation Card.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Card Gruppe mit Tastennavigation</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>surface-content-block-card-title</td><td>color-light-grey</td><td>Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>surface-content-block-card-content</td><td>color-white</td><td>Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>text-content-block-card-title</td><td>color-font-dark</td><td>Textfarbe im Titel-Segment der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>text-content-block-card-content</td><td>color-font-dark</td><td>Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+2182
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user