Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@@ -0,0 +1 @@
|
||||
2026.05.18.1
|
||||
@@ -0,0 +1,212 @@
|
||||
<!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 class="sg-page-cards">
|
||||
|
||||
<h1 class="sg-main-heading">Components – Cards</h1>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Card Styles -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Components -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- Component: Cards -->
|
||||
<section id="component-card">
|
||||
<p class="sg-preview-label">Component: Cards</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 1</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">Card 2</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">Card 3</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: Content Card -->
|
||||
<section id="component-content-card">
|
||||
<p class="sg-preview-label">Component: Content Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Content Card</div>
|
||||
</div>
|
||||
|
||||
<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 luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue. Donec sed lorem in urna sagittis.
|
||||
</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 sg-group-card--margin-after-large" 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>
|
||||
|
||||
<p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
|
||||
|
||||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
|
||||
<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="Gruppenmenü ö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="Gruppenmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Gruppenüberschrift anpassen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">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 enthält hier zusätzlich eine H2-Überschrift.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Multisegment Card -->
|
||||
<section id="component-multisegment-card">
|
||||
<p class="sg-preview-label">Component: Multisegment Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card" data-component="multisegment-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Multisegment Card</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-segment">
|
||||
<p class="sg-body">Erstes graues Segment mit Textinhalt.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-segment">
|
||||
<p class="sg-body">Zweites graues Segment mit Textinhalt.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-segment">
|
||||
<p class="sg-body">Erstes weißes Segment.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-segment">
|
||||
<p class="sg-body">Zweites weißes Segment.</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 mit standardisiertem Card-Padding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!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-form-preview-area sg-chart-preview-area">
|
||||
<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">Äpfel</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">Birnen</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">Zitronen</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-gesamtscore-balken">
|
||||
<p class="sg-preview-label">Component: Gesamtscore-Balken</p>
|
||||
|
||||
<div class="sg-form-preview-area sg-chart-preview-area">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!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>
|
||||
|
||||
<!-- Component: Data Columns -->
|
||||
<section id="component-data-columns">
|
||||
|
||||
<p class="sg-preview-label">Component: Data Columns</p>
|
||||
|
||||
<table class="sg-data-table" aria-label="Beispiel Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">7.7</td>
|
||||
<td data-component-part="data-columns-reference-cell">11.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">8.6</td>
|
||||
<td data-component-part="data-columns-reference-cell">9.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-columns-value-cell" data-component-state="warning">1.23</td>
|
||||
<td data-component-part="data-columns-reference-cell">1.43</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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,45 @@
|
||||
# Portal Sync Flow
|
||||
|
||||
## Ziel
|
||||
|
||||
Der Styleguide bleibt in diesem Repository die Source of Truth. Das Portal holt:
|
||||
|
||||
- den deploy-relevanten CSS-Upstream versioniert als `public/assets/styleguide.upstream.css`
|
||||
- die vollstaendige Styleguide-Dokumentation gespiegelt nach `docs/styleguide`
|
||||
|
||||
## Vorbereitung
|
||||
|
||||
- Version in `VERSION` erhoehen, sobald ein freigegebener Stand vorliegt.
|
||||
- Aenderungen im Styleguide committen und pushen.
|
||||
|
||||
## Sync ausfuehren
|
||||
|
||||
Beispiel:
|
||||
|
||||
```bash
|
||||
./scripts/sync_styleguide_to_webapp_aktienberater.sh \
|
||||
--commit-portal
|
||||
```
|
||||
|
||||
Optional kann der Zielpfad ueberschrieben werden:
|
||||
|
||||
```bash
|
||||
./scripts/sync_styleguide_to_webapp_aktienberater.sh \
|
||||
--portal-repo "/absoluter/pfad/zum/portalrepo" \
|
||||
--commit-portal
|
||||
```
|
||||
|
||||
## Ergebnis im Portalrepo
|
||||
|
||||
- `public/assets/styleguide.upstream.css` aktualisiert
|
||||
- `public/assets/styleguide.upstream.meta.json` aktualisiert (Version, Commit, Zeitstempel)
|
||||
- `docs/styleguide` gespiegelt (mit `--delete`, ohne `.git`, `.codex`, `AGENTS.md`, `scripts/`)
|
||||
- Optional: automatischer Commit + Push im Portalrepo
|
||||
|
||||
## Standardprozess je Release
|
||||
|
||||
1. Styleguide aendern
|
||||
2. `VERSION` erhoehen
|
||||
3. Styleguide commit + push
|
||||
4. Sync-Skript ausfuehren
|
||||
5. Portal Smoke-Test
|
||||
@@ -0,0 +1,58 @@
|
||||
# AGENTS.md — Skill: styleguide-anwendung
|
||||
|
||||
## Zweck
|
||||
|
||||
Dieser Skill regelt verbindlich die fachlich korrekte Anwendung des zentralen Styleguides in konsumierenden Portalen.
|
||||
|
||||
## Scope
|
||||
|
||||
- Gilt nur fuer konsumierende Portal-Repositories.
|
||||
- Gilt fuer die Anwendung von Tokens, Components, Patterns, Layouts und Templates aus dem Styleguide.
|
||||
|
||||
## Verbindliche Regeln
|
||||
|
||||
1. Reuse first: Styleguide-Bausteine MUESSEN 1:1 angewendet werden; visuelle Nachbauten sind verboten.
|
||||
2. Components MUESSEN in Struktur, Klassenlogik und Semantik unveraendert bleiben.
|
||||
3. Wenn ein passender Baustein existiert, SIND lokale Sondervarianten und Inselloesungen verboten.
|
||||
4. Lokale Designentscheidungen ausserhalb des Styleguide-Systems sind verboten (Farben, Spacing, Typography, Radius, Shadow, States).
|
||||
5. Ueberschreibungen von Component-Internals aus dem Portal-Kontext sind verboten.
|
||||
6. Portal-spezifische Regeln sind nur zulaessig, wenn kein passender Baustein existiert, der Need fachlich belegt ist und keine Duplikation entsteht.
|
||||
7. Jede lokale Abweichung MUSS minimal, rueckbaubar, klar begruendet und auf den konkreten Portal-Kontext begrenzt sein.
|
||||
8. `public/assets/styles.css` ist read-only; manuelle Portal-Styles darin sind verboten.
|
||||
9. `public/assets/styleguide.upstream.css` ist read-only; Upstream wird nie lokal gepatcht.
|
||||
10. Eigene Portal-Styles duerfen ausschliesslich in `public/assets/styles.portal.css` gepflegt werden.
|
||||
|
||||
## 1:1-Uebernahmepflicht (kritisch)
|
||||
|
||||
Wenn ein Pattern oder Component aus dem Styleguide vorgegeben ist, gilt:
|
||||
|
||||
1. HTML-Struktur wird 1:1 uebernommen (kein vereinfachtes oder umgebautes Markup).
|
||||
2. Klassenbezeichnungen werden 1:1 uebernommen (keine Umbenennungen, keine Teilmengen).
|
||||
3. Alle dokumentierten States werden umgesetzt (z. B. default, hover, focus, active, disabled, selected).
|
||||
4. Alle dokumentierten Interaktionen/Funktionalitaeten werden umgesetzt (keine Teilimplementierung).
|
||||
5. Accessibility-Merkmale werden 1:1 uebernommen (ARIA, Labels, Keyboard-Fokus, semantische Elemente).
|
||||
6. "Sinngemaesse" Nachimplementierung ist unzulaessig; erlaubt ist nur die vollstaendige Uebernahme oder eine explizit freigegebene Abweichung.
|
||||
|
||||
## Guardrails
|
||||
|
||||
- Keine Umgehung des Styleguides durch Inline-Styles oder seitenlokale Ad-hoc-CSS-Dateien.
|
||||
- Keine erneute Einfuehrung von Legacy-CSS-Bloecken oder lokalen Vollkopien von Styleguide-Regeln.
|
||||
- Keine Mischung von Upstream-Logik und Portal-Logik in derselben Quelldatei.
|
||||
- Konflikte mit Upstream werden nicht durch Hotfixes in Output-Dateien geloest.
|
||||
|
||||
## Arbeitsmodus bei Aenderungen
|
||||
|
||||
1. Zuerst pruefen: Deckt ein bestehender Styleguide-Baustein den Fall ab.
|
||||
2. Wenn ja: unveraendert uebernehmen (Pfad endet hier).
|
||||
3. Wenn nein: minimalen Portal-Zusatz in `styles.portal.css` umsetzen, ohne Component-Internals zu beruehren.
|
||||
4. Betroffene Views auf visuelle und funktionale Regressionen testen.
|
||||
5. Lokale Abweichung im Commit mit kurzer fachlicher Begruendung dokumentieren.
|
||||
|
||||
## Abnahmekriterien
|
||||
|
||||
- Vorhandene Styleguide-Bausteine wurden priorisiert und nicht lokal dupliziert.
|
||||
- Keine Portalregel greift in Component-Internals ein.
|
||||
- Alle lokalen Regeln sind auf das notwendige Minimum begrenzt.
|
||||
- `styles.css` und `styleguide.upstream.css` sind frei von manuellen Portal-Handedits.
|
||||
- Lokale Regeln in `styles.portal.css` sind fachlich begruendet und rueckbaubar dokumentiert.
|
||||
- Vorgegebene Patterns/Components sind in HTML, Klassen, States, Interaktionen und A11y vollstaendig 1:1 uebernommen.
|
||||
@@ -0,0 +1,136 @@
|
||||
# Integrationsstrategie Styleguide -> WebApp_Aktienberater
|
||||
|
||||
Stand: 18. Mai 2026
|
||||
Scope: Nur Einbindungsstrategie und Migrationsvorgehen fuer CSS. Keine Frontend-Umbauten in diesem Dokument.
|
||||
|
||||
## 1. Zielbild
|
||||
|
||||
`public/assets/styles.css` bleibt die produktiv eingebundene Datei, wird aber kuenftig deterministisch aus zwei klar getrennten Schichten erzeugt:
|
||||
|
||||
1. `styleguide` (upstream, read-only im Projektkontext)
|
||||
2. `portal` (lokale App-spezifische Regeln)
|
||||
|
||||
Es gibt keine weitere manuelle Vollkopie von CSS-Bloecken in die Produktionsdatei.
|
||||
|
||||
## 2. Aktueller Ist-Zustand (belegt)
|
||||
|
||||
- Produktivseiten binden `public/assets/styles.css` ein.
|
||||
- Es gibt keine lokale Styleguide-Kopie mehr im Zielrepo.
|
||||
- `public/assets/styles.css` enthaelt derzeit einen Mischstand aus Styleguide-Teil plus Legacy-Teil.
|
||||
|
||||
Konsequenz: Updates und Debugging sind aktuell fehleranfaellig, weil keine harte Trennung zwischen upstream und lokal besteht.
|
||||
|
||||
## 3. Verbindliche Struktur (Soll)
|
||||
|
||||
Neue Quellstruktur im Zielrepo:
|
||||
|
||||
- `public/assets/styleguide.upstream.css`
|
||||
Upstream-Quelle (aus dem Styleguide-Repo uebernommen, im Zielrepo read-only behandeln)
|
||||
- `public/assets/styles.portal.css`
|
||||
Lokale Portal-Ergaenzungen/Overrides (einzige lokale CSS-Quelle fuer App-spezifische Abweichungen)
|
||||
- `public/assets/styles.css`
|
||||
Build-Output fuer Produktivbetrieb (generiert, nicht manuell gepflegt)
|
||||
|
||||
## 4. Build-Reihenfolge (verbindlich)
|
||||
|
||||
Die Reihenfolge ist fix:
|
||||
|
||||
1. `public/assets/styleguide.upstream.css`
|
||||
2. `public/assets/styles.portal.css`
|
||||
3. Ausgabe nach `public/assets/styles.css`
|
||||
|
||||
Damit gilt:
|
||||
|
||||
- Standard liegt im Styleguide.
|
||||
- Lokale Abweichungen liegen nur im Portal-Layer.
|
||||
- Keine dritte Ebene mit ad-hoc CSS in Produktivdateien.
|
||||
|
||||
## 5. Migrationsphasen
|
||||
|
||||
### Phase A: Freeze und Trennung
|
||||
|
||||
- Bestehenden Zustand einfrieren (Baseline-Commit).
|
||||
- Legacy-Abschnitte in `public/assets/styles.css` identifizieren.
|
||||
- Lokale, weiterhin benoetigte Regeln nach `public/assets/styles.portal.css` verschieben.
|
||||
|
||||
### Phase B: Build-Einfuehrung
|
||||
|
||||
- Build-Skript einfuehren, das die zwei Quellen in fixer Reihenfolge zusammenfuehrt.
|
||||
- `public/assets/styles.css` nur noch als Build-Output behandeln.
|
||||
|
||||
### Phase C: Bereinigung
|
||||
|
||||
- Doppelte `:root`-Definitionen und ueberschneidende Token schrittweise entfernen.
|
||||
- Jede entfernte Legacy-Regel gegen produktive Screens verifizieren.
|
||||
|
||||
### Phase D: Regelbetrieb
|
||||
|
||||
- Neue UI-Änderungen nur noch in:
|
||||
- Styleguide-Repo (globale Patterns/Tokens) oder
|
||||
- `styles.portal.css` (projektlokale Spezifika)
|
||||
|
||||
## 5a. Verbindliche Migrationsreihenfolge
|
||||
|
||||
Die Ablösung erfolgt in fester Reihenfolge:
|
||||
|
||||
1. Login
|
||||
2. Hauptliste
|
||||
3. Detail
|
||||
4. Admin
|
||||
|
||||
Pro Schritt gilt:
|
||||
|
||||
- Legacy-Regeln nur fuer den jeweiligen Bereich ablösen.
|
||||
- Smoke-Test direkt nach jeder Ablösung.
|
||||
- Erst nach bestandenem Test den naechsten Bereich migrieren.
|
||||
|
||||
## 5b. Verbindliche Exit-Kriterien (Legacy entfernt)
|
||||
|
||||
Die Migration ist erst abgeschlossen, wenn alle Punkte erfuellt sind:
|
||||
|
||||
1. `public/assets/styles.css` ist reiner Build-Output aus:
|
||||
- `public/assets/styleguide.upstream.css`
|
||||
- `public/assets/styles.portal.css`
|
||||
2. In `public/assets/styles.css` existiert kein Legacy-Blockmarker mehr:
|
||||
- `LEGACY STYLES`
|
||||
- `To be migrated step by step to styleguide system`
|
||||
3. Keine manuellen Produktivregeln mehr direkt in `public/assets/styles.css`.
|
||||
4. Alle weiterhin benoetigten lokalen Abweichungen liegen ausschliesslich in `public/assets/styles.portal.css`.
|
||||
5. Doppelte oder konkurrierende `:root`-Definitionen aus Legacy wurden entfernt.
|
||||
|
||||
## 6. Update-Prozess bei Styleguide-Änderungen
|
||||
|
||||
Ja, es braucht regulaere Updates im Zielrepo, sobald der Styleguide geaendert wurde.
|
||||
|
||||
Minimalprozess:
|
||||
|
||||
1. Neuen Styleguide-Stand nach `public/assets/styleguide.upstream.css` uebernehmen.
|
||||
2. `public/assets/styles.css` neu bauen.
|
||||
3. Kurztest der betroffenen Seiten (mindestens: Login, Hauptliste, Detail, Admin).
|
||||
4. Falls Konflikte auftreten: nur `styles.portal.css` anpassen, nicht upstream patchen.
|
||||
|
||||
## 7. Guardrails
|
||||
|
||||
- Keine manuellen Hotfixes direkt in `public/assets/styles.css`.
|
||||
- Keine Vermischung von Upstream-Regeln und Portalregeln in derselben Quelldatei.
|
||||
- Keine erneute Vollkopie alter Legacy-Bloecke.
|
||||
- Jede Portal-Abweichung braucht kurze Begruendung im Commit.
|
||||
|
||||
## 7a. Verbindliche Abnahme-Checkliste je Migrationsschritt
|
||||
|
||||
Vor dem Abschluss eines jeden Schritts:
|
||||
|
||||
1. Seite rendert ohne visuelle Regressionen in den betroffenen Hauptbereichen.
|
||||
2. Interaktive Elemente bleiben funktionsfaehig (Buttons, Tabs, Filter, States).
|
||||
3. Keine neuen direkten Anpassungen in `public/assets/styles.css`.
|
||||
4. Diff zeigt nur:
|
||||
- Upstream-Update (`styleguide.upstream.css`) und/oder
|
||||
- lokale Portal-Regeln (`styles.portal.css`) und Build-Output.
|
||||
5. Commit-Text dokumentiert kurz, welcher Legacy-Abschnitt abgeloest wurde.
|
||||
|
||||
## 8. Verantwortungsgrenze
|
||||
|
||||
- Styleguide-Repo: Design-System-Wahrheit (Tokens, Components, Patterns).
|
||||
- WebApp_Aktienberater: Integration, lokale Komposition, produktive Einbindung.
|
||||
|
||||
Damit bleibt das System updatefaehig und driftarm, ohne laufende Frontend-Umsetzung zu blockieren.
|
||||
@@ -0,0 +1,211 @@
|
||||
<!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>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</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-portal-overrides">
|
||||
<h2 class="sg-sub-heading sg-text-on-dark">Naurua Overrides</h2>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Portal</th>
|
||||
<th>Abweichung</th>
|
||||
<th>Verwendung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NAURUA</td><td>darkblue → #354A52; body → Avenir, sans-serif</td><td>Portalgebundene Foundation-Overrides für das zweite Portal. Die Überschreibung greift nur, wenn das Root-Element `data-portal="naurua"` setzt.</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-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 für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie 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>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
|
||||
<tr><td>object-group-card-min-width</td><td>550px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>object-group-card-max-width</td><td>800px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
|
||||
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
|
||||
<tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
|
||||
<tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
|
||||
<tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Reservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
|
||||
<tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
|
||||
<tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
|
||||
<tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>
|
||||
<tr><td>notifications-text-segment-fixed-height</td><td>150px</td><td>Desktop-Höhe des ersten Text-Segments im Standard-Pattern Notifications.</td></tr>
|
||||
<tr><td>notifications-text-segment-fixed-height-small</td><td>80px</td><td>Desktop-Höhe des ersten Text-Segments in der Variante Pattern Notifications small.</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>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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>
|
||||
<li><a href="./semantic-tokens-patterns.html">Semantic Tokens Patterns</a></li>
|
||||
<li><a href="./semantic-tokens-layouts.html">Semantic Tokens Layouts</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/notifications.html">Notifications</a></li>
|
||||
<li><a href="./patterns/content-cards-group.html">Content Cards Group</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>
|
||||
<li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
|
||||
<li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
|
||||
<li><a href="./patterns/delete-confirmation-overlay.html">Overlay Card</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sg-index-section">
|
||||
<h2 class="sg-sub-heading">Layouts</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
|
||||
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
|
||||
<ul class="sg-index-list">
|
||||
<li><a href="./patterns/company-card.html">Company Card</a></li>
|
||||
<li><a href="./patterns/vsf-list-card.html">VSF List Card</a></li>
|
||||
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
|
||||
<li><a href="./patterns/vsf-list-detailseite.html">VSF List Detailseite</a></li>
|
||||
<li><a href="./patterns/vsf-meldungen.html">VSF Meldungen</a></li>
|
||||
<li><a href="./patterns/vsf-listen-uebersicht-seite-v2.html">VSF Listen Übersicht Seite V2</a></li>
|
||||
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
|
||||
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!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>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-4" id="content-block-tab-4" data-component-part="tab-button">Taste 4</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-5" id="content-block-tab-5" data-component-part="tab-button">Taste 5</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-6" id="content-block-tab-6" data-component-part="tab-button">Taste 6</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-7" id="content-block-tab-7" data-component-part="tab-button">Taste 7</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">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 1">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.1</div>
|
||||
</div>
|
||||
<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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 2">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 3">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-4" role="tabpanel" aria-labelledby="content-block-tab-4" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 4">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 4.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 4.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 4.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-5" role="tabpanel" aria-labelledby="content-block-tab-5" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 5">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 5.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 5.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 5.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-6" role="tabpanel" aria-labelledby="content-block-tab-6" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 6">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 6.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 6.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 6.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-7" role="tabpanel" aria-labelledby="content-block-tab-7" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 7">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 7.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 7.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 7.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</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 tabList = tabGroup.querySelector('[role="tablist"]');
|
||||
|
||||
const applyMobileBalancedTabRows = () => {
|
||||
if (!tabList) {
|
||||
return;
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.style.removeProperty('--sg-tab-mobile-row-slots');
|
||||
});
|
||||
|
||||
if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxItemsPerRow = 3;
|
||||
const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
|
||||
const baseRowSize = Math.floor(tabs.length / rowCount);
|
||||
const rowRemainder = tabs.length % rowCount;
|
||||
let tabStartIndex = 0;
|
||||
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
|
||||
const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
|
||||
for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
|
||||
const tab = tabs[tabStartIndex + itemOffset];
|
||||
if (tab) {
|
||||
tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
|
||||
}
|
||||
}
|
||||
tabStartIndex += rowSize;
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
applyMobileBalancedTabRows();
|
||||
window.addEventListener('resize', applyMobileBalancedTabRows);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Card Listen Seite Fundamentalanalyse Mobile</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Fundamentalanalyse Mobile</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="Fundamentalanalyse Seite mobil">
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
|
||||
<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="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 1</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 2</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 3</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
|
||||
<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="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,162 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Layout Company Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Company Card</h1>
|
||||
<section id="layout-company-card">
|
||||
<p class="sg-preview-label">Layout: Company Card</p>
|
||||
<p class="sg-body">Dieses Layout basiert auf der Object Card und zeigt initial eine einzelne Company Card Instanz.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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>
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Content Cards Group</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Content Cards Group</h1>
|
||||
<section id="pattern-content-cards-group">
|
||||
<p class="sg-preview-label">Pattern: Content Cards Group</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Gruppe aus Content Cards">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 1</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 2</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 3</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Overlay Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern - Overlay Card</h1>
|
||||
|
||||
<section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
|
||||
<p class="sg-preview-label">Pattern: Overlay Card</p>
|
||||
|
||||
<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-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" href="#!" data-overlay-open-dialog="delete">Objekt löschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content">
|
||||
<p class="sg-body">Objekt-Inhalt der Card. Während das Löschfenster sichtbar ist, wird dieses Objekt um 50% ausgegraut.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment">
|
||||
<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-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title"><strong>Möchtest du Alcon Inc. wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="DELETE"
|
||||
aria-label="Löschbestätigung durch DELETE"
|
||||
data-delete-confirmation-input
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button
|
||||
class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
|
||||
type="button"
|
||||
disabled
|
||||
aria-disabled="true"
|
||||
data-delete-confirmation-submit
|
||||
data-overlay-dialog-close
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const confirmationInput = document.querySelector('[data-delete-confirmation-input]');
|
||||
const confirmationSubmitButton = document.querySelector('[data-delete-confirmation-submit]');
|
||||
|
||||
if (confirmationInput && confirmationSubmitButton) {
|
||||
const updateDeleteConfirmationState = () => {
|
||||
const isValid = confirmationInput.value === 'DELETE';
|
||||
|
||||
confirmationSubmitButton.disabled = !isValid;
|
||||
confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
confirmationInput.addEventListener('input', updateDeleteConfirmationState);
|
||||
updateDeleteConfirmationState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</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,602 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Multiselektions-Pulldown</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Multiselektions-Pulldown</h1>
|
||||
<section id="pattern-multiselektions-pulldown">
|
||||
<p class="sg-preview-label">Pattern: Multiselektions-Pulldown</p>
|
||||
|
||||
<div class="sg-options-row" aria-label="Multiselektions-Pulldown Wrapper" data-pattern="multiselektions-pulldown">
|
||||
<div class="sg-options-row__left" data-pattern-part="multiselektions-pulldown-trigger-area">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="active" data-force-active="true">
|
||||
<span class="sg-activatable-control">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Multiselektions-Pulldown mit aktiver Auswahl" data-label-base="Multiselektions-Pulldown" data-component-part="pulldown-trigger">
|
||||
Multiselektions-Pulldown
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Multiselektions-Pulldown" data-component-part="pulldown-panel">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Multiselektions-Inhalt">
|
||||
<form class="sg-form-sections-card" action="#" method="post">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-1">
|
||||
<h2 id="multiselect-block-1" class="sg-strong sg-form-sections-card__chapter-title">Block 1</h2>
|
||||
|
||||
<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="Checkbox 1 wählen" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 1</span>
|
||||
</label>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-1-label">Slider 1</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-1-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-2-label">Slider 2</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="9.5"
|
||||
aria-labelledby="multiselect-slider-2-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">9.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-3-label">Slider 3</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="5.0"
|
||||
aria-labelledby="multiselect-slider-3-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">5.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-4-label">Slider 4</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-4-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2">
|
||||
<h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-5-label">Slider 5</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="3.0"
|
||||
aria-labelledby="multiselect-slider-5-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">3.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-6-label">Slider 6</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="2.5"
|
||||
aria-labelledby="multiselect-slider-6-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">2.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-7-label">Slider 7</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="1.6"
|
||||
aria-labelledby="multiselect-slider-7-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">1.6</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-3">
|
||||
<h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
|
||||
|
||||
<div id="component-radio-activatable" class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Radio Auswahl: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-radio-group-label">Radio Auswahl</span>
|
||||
<span class="sg-radio-activatable-group__choices">
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 1</span>
|
||||
</span>
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 2 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 2</span>
|
||||
</span>
|
||||
</span>
|
||||
</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">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4">
|
||||
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</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">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</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">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const setLocalActivationState = (toggle, isActive) => {
|
||||
const sliderRow = toggle.closest('.sg-slider-row[data-activatable="true"]');
|
||||
if (sliderRow) {
|
||||
const slider = sliderRow.querySelector('.sg-slider');
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
|
||||
slider.classList.toggle('sg-form-active', isActive);
|
||||
slider.classList.toggle('sg-form-inactive-selectable', !isActive);
|
||||
slider.disabled = !isActive;
|
||||
return;
|
||||
}
|
||||
|
||||
const radioGroup = toggle.closest('[data-activatable-radio-group="true"]');
|
||||
if (radioGroup) {
|
||||
const radios = radioGroup.querySelectorAll('.sg-radio-field');
|
||||
radioGroup.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
radios.forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
if (!isActive) {
|
||||
radio.setAttribute('aria-checked', 'false');
|
||||
}
|
||||
const checked = radio.getAttribute('aria-checked') === 'true';
|
||||
radio.classList.toggle('sg-form-active', checked);
|
||||
radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const pulldownRow = toggle.closest('[data-pulldown-filter-row]');
|
||||
if (pulldownRow) {
|
||||
const select = pulldownRow.querySelector('.sg-pulldown');
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
pulldownRow.dataset.active = isActive ? 'true' : 'false';
|
||||
select.disabled = !isActive;
|
||||
pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
|
||||
toggle.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
|
||||
const isActive = nextState === 'relative';
|
||||
toggle.dataset.active = nextState;
|
||||
toggle.setAttribute('aria-label', toggle.getAttribute('aria-label').replace(/(an|aus)$/, isActive ? 'an' : 'aus'));
|
||||
setLocalActivationState(toggle, isActive);
|
||||
});
|
||||
});
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
const forceActive = demo.dataset.forceActive === 'true';
|
||||
|
||||
if (!trigger || selectableOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||
return option.getAttribute('aria-checked') === 'true';
|
||||
}).length;
|
||||
|
||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||
trigger.textContent = forceActive
|
||||
? labelBase
|
||||
: (selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase);
|
||||
trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
|
||||
trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
|
||||
trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
|
||||
);
|
||||
};
|
||||
|
||||
const updateMultiselectLabelAlignment = () => {
|
||||
document.querySelectorAll('.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel').forEach((panel) => {
|
||||
const labels = panel.querySelectorAll(
|
||||
'.sg-slider-row[data-activatable="true"] > .sg-label, .sg-radio-activatable-group > .sg-label, [data-pulldown-filter-row] > .sg-pulldown-panel__label'
|
||||
);
|
||||
|
||||
let maxWidth = 0;
|
||||
labels.forEach((label) => {
|
||||
const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width);
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
});
|
||||
|
||||
if (maxWidth > 0) {
|
||||
panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
|
||||
} else {
|
||||
panel.style.removeProperty('--sg-multiselect-label-column-width');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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', () => {
|
||||
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
|
||||
if (activatableOption) {
|
||||
checkbox.setAttribute('aria-checked', 'true');
|
||||
checkbox.classList.add('sg-form-active');
|
||||
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
|
||||
activatableOption.dataset.componentState = 'active';
|
||||
}
|
||||
|
||||
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-radio-field').forEach((radio) => {
|
||||
radio.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (radio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
|
||||
if (!activatableGroup) {
|
||||
return;
|
||||
}
|
||||
if (activatableGroup.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
|
||||
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
|
||||
radios.forEach((otherRadio) => {
|
||||
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
|
||||
otherRadio.disabled = false;
|
||||
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
|
||||
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-activatable-radio-group="true"]').forEach((group) => {
|
||||
const isActive = group.dataset.componentState === 'active';
|
||||
group.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
});
|
||||
});
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
window.addEventListener('resize', updateMultiselectLabelAlignment);
|
||||
|
||||
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';
|
||||
|
||||
if (demo.dataset.activatable === 'true') {
|
||||
trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
|
||||
trigger.classList.remove('sg-pulldown--inactive-selectable');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
otherDemo.dataset.open = 'false';
|
||||
if (otherTrigger) {
|
||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
panel.style.left = '0px';
|
||||
panel.style.right = 'auto';
|
||||
|
||||
const initialRect = panel.getBoundingClientRect();
|
||||
let offsetX = 0;
|
||||
const maxRight = window.innerWidth;
|
||||
|
||||
if (initialRect.right > maxRight) {
|
||||
offsetX -= initialRect.right - maxRight;
|
||||
}
|
||||
|
||||
if (initialRect.left + offsetX < 0) {
|
||||
offsetX += 0 - (initialRect.left + offsetX);
|
||||
}
|
||||
|
||||
panel.style.left = `${offsetX}px`;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
||||
const select = row.querySelector('.sg-pulldown');
|
||||
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
select.disabled = !isActive;
|
||||
};
|
||||
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
})();
|
||||
</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,264 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Notifications</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Notifications</h1>
|
||||
|
||||
<section id="pattern-notifications">
|
||||
<p class="sg-preview-label">Pattern: Notifications</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-notifications-with-title">
|
||||
<p class="sg-preview-label">Pattern: Notification with title</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-notifications-small">
|
||||
<p class="sg-preview-label">Pattern: Notifications small</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const updateNotificationsPatternRowState = () => {
|
||||
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
|
||||
grid.classList.remove('sg-notifications-pattern--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-notifications-pattern--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||
window.addEventListener('resize', updateNotificationsPatternRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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,130 @@
|
||||
<!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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<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,319 @@
|
||||
<!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 src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo'],
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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,434 @@
|
||||
<!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: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
|
||||
</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>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line"
|
||||
type="text"
|
||||
placeholder="Suche"
|
||||
aria-label="Suche"
|
||||
>
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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,64 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Text Layouts</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Text Layouts</h1>
|
||||
<section id="pattern-text-layouts">
|
||||
<p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text 60% Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,469 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Card Listen Seite Fundamentalanalyse Drawer</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Drawer</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="VSF Fundamentalanalyse Drawer Seite">
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
|
||||
<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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-inline-header-row" data-pattern-part="card-header">
|
||||
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Ticker: WDC<br>
|
||||
Region: Amerika<br>
|
||||
Sub-Region: Nordamerika<br>
|
||||
Land: Vereinigte Staaten von Amerika
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
ISIN: US9581021055<br>
|
||||
Industrie: Computer Hardware
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
|
||||
<p id="vsf-business-model-text" class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width" hidden>
|
||||
Produkte und Lösungen<br>
|
||||
Western Digital Corporation produziert Festplatten (Hard Disk Drives, HDD) in verschiedenen Formfaktoren und Kapazitäten. Zentrale Produktkategorien umfassen Marken wie WD Blue für allgemeine Computing-Anwendungen, WD Purple und WD Purple Pro für Überwachungssysteme, WD Red, WD Red Plus und WD Red Pro für Netzwerkspeicher (NAS) und kleine Büroumgebungen, WD Black für Gaming und Hochleistung, WD Gold für Unternehmensanwendungen sowie Ultrastar für Rechenzentren. Ergänzt werden diese durch externe Gehäuse wie My Passport und My Book sowie Netzwerkspeichersysteme der My Cloud-Serie. Seit der Abspaltung des Flash-Geschäfts 2025 konzentriert sich das Unternehmen ausschliesslich auf HDD-Technologien.<br><br>
|
||||
Zielmärkte und Kunden<br>
|
||||
Die wichtigsten Kundensegmente umfassen Endverbraucher für Desktop-Computer und Gaming, kleine Büros und Home-Office-Nutzer für NAS-Systeme, Überwachungsanbieter für Sicherheitslösungen, Unternehmen für Server- und Enterprise-Speicher sowie Rechenzentren für Hochkapazitäts-Datenspeicherung. Geografisch bedient das Unternehmen globale Märkte mit Schwerpunkt in Nordamerika, Europa, Asien-Pazifik und aufstrebenden Regionen wie Südostasien. Die Produktion erfolgt primär in Thailand und früher in Malaysia.<br><br>
|
||||
Geschäftsmodell<br>
|
||||
Western Digital agiert als vertikal integrierter Hersteller von Datenspeichergeräten mit Fokus auf Festplatten-Produktion. Die Wertschöpfungskette umfasst Forschung und Entwicklung zu magnetischen Aufzeichnungstechnologien, Fertigung von Platten, Köpfen und Controllern sowie Montage in San-Jose-basierten Einrichtungen und asiatischen Fabriken. Durch Akquisitionen wie HGST (2012) und frühere Read-Rite hat es Assets in Medien und Komponenten aufgebaut, was eine hohe Eigenfertigung ermöglicht. Das Modell basiert auf skalierbarer Massenproduktion für standardisierte Speicherplattformen.<br><br>
|
||||
Erlösstruktur<br>
|
||||
Die Umsatzquellen gliedern sich in Segmente für Client-Computing (WD Blue, WD Black), Überwachung (WD Purple), NAS und SMB (WD Red-Serie), Enterprise (WD Gold) und Rechenzentren (Ultrastar). Der Verkauf erfolgt mechanisch über Direktverkäufe an Original Equipment Manufacturer (OEM), Distributoren und Einzelhändler sowie über eigene Kanäle für externe Produkte. Die Konzentration liegt bei Enterprise- und Datacenter-Segmenten mit höheren Kapazitäten, während Client-Segmente Volumen generieren; keine Abonnements oder transaktionsbasierten Modelle.<br><br>
|
||||
Marktposition und Wettbewerbsvorteile<br>
|
||||
Western Digital hält eine führende Marktstellung als grösster traditioneller HDD-Hersteller weltweit nach der HGST-Integration. Strukturelle Vorteile umfassen vertikale Integration in Plattenmedien, Schreib-/Leseköpfe und Controller-Technologie sowie heliumgefüllte Hochkapazitätsmodelle bis 14 TB. Patente in Riesen-Magnetowiderstands-Köpfen (GMR) und Produktionskapazitäten in effizienten Fabriken sichern Skaleneffekte gegenüber Wettbewerbern.
|
||||
</p>
|
||||
<button id="vsf-business-model-toggle" class="sg-interaction-element sg-button" type="button" aria-controls="vsf-business-model-text" aria-expanded="false">Geschäftsmodell anzeigen</button>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="sg-transparent-card sg-analysis-intro-block" data-component="transparent-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-card-list-page__title-row">Fundamentalanalyse vom 12.5.2026 <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></h2>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Nächste Analyse: nicht bekannt
|
||||
</p>
|
||||
</div>
|
||||
<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="Fundamentalanalyse 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="vsf-fundamental-tab-panel-1" id="vsf-fundamental-tab-1" data-component-part="tab-button">Gesamtbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-2" id="vsf-fundamental-tab-2" data-component-part="tab-button">Marktbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-3" id="vsf-fundamental-tab-3" data-component-part="tab-button">Wachstum</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-4" id="vsf-fundamental-tab-4" 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" aria-controls="vsf-fundamental-tab-panel-5" id="vsf-fundamental-tab-5" data-component-part="tab-button">Stabilität</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-6" id="vsf-fundamental-tab-6" data-component-part="tab-button">TAM</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-7" id="vsf-fundamental-tab-7" data-component-part="tab-button">Zyklus</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-8" id="vsf-fundamental-tab-8" data-component-part="tab-button">Moat</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-9" id="vsf-fundamental-tab-9" data-component-part="tab-button">Technologie</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panels">
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Gesamtbewertung">
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Gesamtbewertung">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state"><strong class="sg-score-bar-label">(9.9)</strong> attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--white" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
<strong>Attraktiv. Starke Profitabilitäts- und Gewinnwachstumsdynamik durch KI-Nachfrage, solide Bilanz. Ambitionierte Bewertung setzt perfekte Ausführung voraus.</strong>
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Western Digital repräsentiert eine hochgradig zyklische, aber aktuell von einem strukturellen KI-Trend getragene Wachstumsgeschichte. Die zentrale Investment-These lautet: Das Unternehmen profitiert kurzfristig von einer außergewöhnlichen Nachfrage nach Hochkapazitäts-Festplatten für Rechenzentren, was zu einer explosiven Ergebnisdynamik führt, jedoch zu einer ambitionierten Bewertung, die eine perfekte Ausführung voraussetzt.
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Die entscheidenden Stärken sind die starke Profitabilitätsverbesserung mit hohen Kapitalrenditen, die robuste finanzielle Stabilität mit niedriger Verschuldung sowie die Skalenvorteile aus der vertikalen Integration. Dem stehen klare Risiken gegenüber: ein extrem hohes zyklisches Risiko mit Nachfrageschwankungen bis zu 40 Prozent, eine nur mäßig verteidigungsfähige Wettbewerbsposition unter Druck durch chinesische Konkurrenten und disruptive Technologien sowie eine Bewertung, die einen erheblichen Aufschlag auf das historische Niveau darstellt. Der zentrale Zielkonflikt liegt zwischen dem außergewöhnlichen kurzfristigen Wachstum und der langfristigen Nachhaltigkeit des Geschäftsmodells in einer hart umkämpften, kapitalintensiven Branche.
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Die Qualität des Unternehmens ist aufgrund seiner zyklischen Natur und der angreifbaren Wettbewerbsvorteile als mittel einzustufen. Für einen GARP-Investor ist das Investment aktuell neutral bis nicht attraktiv. Zwar sind Timing-Faktoren durch die zyklische Erholung und den KI-Rückenwind günstig, die extreme Bewertung (KGV nahe 44-47) spiegelt dieses Momentum jedoch bereits vollständig wider und bietet kein Margin of Safety. Das Investment eignet sich nur für risikobewusste Anleger, die auf eine Fortsetzung des KI-Superzyklus spekulieren.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Unterschied zur letzten Analyse vom 1.5.2026">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Unterschied zur letzten Analyse vom 1.5.2026 <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Die Investment-Story hat sich insgesamt verbessert, da sich die strukturellen Wachstumstreiber konkretisiert und die Profitabilität deutlich beschleunigt hat.</p>
|
||||
<p class="sg-body">Die entscheidenden Veränderungen betreffen das Wachstumstempo und die Margenentwicklung. Das Umsatzwachstum beschleunigte sich auf 25 Prozent im Jahresvergleich, angetrieben von einer 28-prozentigen Zunahme im Cloud-Segment. Die bereinigte Bruttomarge stieg um 770 Basispunkte auf 46,1 Prozent, unterstützt durch eine günstigere Produktmischung und Skaleneffekte. Zudem wurde die Prognose für das kommende Quartal auf ein Wachstum von 40 Prozent angehoben, was auf eine anhaltend starke Nachfrage hindeutet.</p>
|
||||
<p class="sg-body">Diese Entwicklungen bestätigen die ursprüngliche These eines durch künstliche Intelligenz getriebenen Speicher-Superzyklus und stärken sie sogar. Das verbesserte Profitabilitätsniveau und die höheren Wachstumsprognosen senken das Risiko einer kurzfristigen zyklischen Abschwächung, während die Bewertung weiterhin unter dem historischen Durchschnitt bleibt. Das Chance-Risiko-Profil hat sich somit zugunsten der Chancen verschoben.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Marktbewertung">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Marktbewertung Kennzahlen" 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Die Aktie von Western Digital wird mit einem Kurs-Gewinn-Verhältnis für das nächste Jahr von knapp 44 bis 47 bewertet. Dies stellt einen erheblichen Aufschlag gegenüber dem historischen Fünfjahresdurchschnitt von etwa 19,5 dar. Diese Bewertungsprämie ist durch ein außergewöhnliches Ergebniswachstum begründet. Für das Geschäftsjahr 2026 erwarten Analysten ein bereinigtes Ergebnis je Aktie, das sich um etwa 81 bis 100 Prozent erhöht. Für das folgende Jahr wird ein weiterer Anstieg auf rund 13,82 Dollar prognostiziert.</p>
|
||||
<p class="sg-body">Diese Dynamik speist sich aus der künstlichen Intelligenz getriebenen Nachfrage nach hochkapazitiven Festplatten in Rechenzentren. Das Cloud-Segment des Unternehmens wächst mit 28 bis 40 Prozent im Jahresvergleich und generiert mittlerweile 89 Prozent der Umsätze. Zugleich expandiert die Bruttomarge strukturell, was auf Preissetzungsmacht und positive Produktmix-Effekte hindeutet. Das gegenwärtige Bewertungsniveau setzt allerdings eine perfekte Ausführung voraus. Sollte der Superzyklus der künstlichen Intelligenz schwächer ausfallen oder es zu Überkapazitäten bei Halbleitern kommen, droht eine Bewertungskorrektur. Zum jetzigen Zeitpunkt erscheint die Bewertung ambitioniert, aber im Kontext des beschleunigten Ergebniswachstums nicht irrational. Anleger zahlen für das Umsatzmomentum und die strukturelle Margenverbesserung, nicht jedoch für überdurchschnittliche Langzeitgewinne.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Wachstum">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Wachstum Kennzahlen" 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Profitabilität">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Profitabilität Kennzahlen" 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Stabilität">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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">Score:</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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Stabilität Kennzahlen" 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-6" role="tabpanel" aria-labelledby="vsf-fundamental-tab-6" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="TAM">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Der Gesamtmarkt für Datenspeicher wird bis zum Jahr 2030 auf rund 200 Milliarden Dollar geschätzt. Dieses Wachstum wird durch exponentiell steigende Datenmengen angetrieben, wobei Technologien wie Cloud-Computing und das Training künstlicher Intelligenz zentrale Treiber mit hohen jährlichen Zuwachsraten sind. Western Digital adressiert primär den NAND-Flash-Markt, in dem es mit einem Marktanteil von 15 bis 18 Prozent hinter dem Marktführer liegt.</p>
|
||||
<p class="sg-body">Der Wettbewerb ist in einem Dreier-Oligopol intensiv und verschärft sich durch den Kapazitätsausbau eines chinesischen Konkurrenten. Realistischer Expansionsspielraum für Western Digital wird auf einen Marktanteilsgewinn von 5 bis 10 Prozent geschätzt, angetrieben durch überdurchschnittliches Bit-Wachstum und die positive Nachfrage im KI-Bereich. Der direkt adressierbare Markt konzentriert sich auf Enterprise-SSDs und Cloud-Speicher, da der Markt für Consumer-Festplatten rückläufig ist. Überproportionales Wachstum wäre möglich, wenn das Unternehmen KI-spezifische Speicherlösungen priorisiert, allerdings limitiert Preisdruck die Marge.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-7" role="tabpanel" aria-labelledby="vsf-fundamental-tab-7" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Zyklus">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Zyklus.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-8" role="tabpanel" aria-labelledby="vsf-fundamental-tab-8" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Moat">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Moat.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-9" role="tabpanel" aria-labelledby="vsf-fundamental-tab-9" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Technologie">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie <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></div></div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Technologie.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
|
||||
<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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
const businessModelToggleButton = document.getElementById('vsf-business-model-toggle');
|
||||
const businessModelText = document.getElementById('vsf-business-model-text');
|
||||
|
||||
if (businessModelToggleButton && businessModelText) {
|
||||
businessModelToggleButton.addEventListener('click', () => {
|
||||
const isExpanded = businessModelToggleButton.getAttribute('aria-expanded') === 'true';
|
||||
const nextExpanded = !isExpanded;
|
||||
|
||||
businessModelText.hidden = !nextExpanded;
|
||||
businessModelToggleButton.setAttribute('aria-expanded', String(nextExpanded));
|
||||
businessModelToggleButton.textContent = nextExpanded
|
||||
? 'Geschäftsmodell ausblenden'
|
||||
: 'Geschäftsmodell anzeigen';
|
||||
});
|
||||
}
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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));
|
||||
});
|
||||
});
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
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,69 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Card Listen Seite Fundamentalanalyse Mobile</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Mobile</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="VSF Fundamentalanalyse Seite mobil">
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
|
||||
<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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 1</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 2</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 3</div>
|
||||
</div>
|
||||
<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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout">
|
||||
<div class="sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
|
||||
<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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,926 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Card Listen Seite</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Card Listen Seite</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="VSF 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>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="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>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||||
<div class="sg-card-list-page__title-row">
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF 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 VSF 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>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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>
|
||||
|
||||
<div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Company Liste">
|
||||
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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="company-card" aria-label="Company Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||
<div class="sg-strong">Netflix, 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Score:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||
<td data-component-part="data-columns-reference-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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">Wachstum:</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">Profitabilität:</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" 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">Stabilität:</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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||
<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 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>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||||
|
||||
document.querySelectorAll('.sg-object-card__action').forEach((button) => {
|
||||
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
if (mobileBreakpoint.matches) {
|
||||
window.location.href = './vsf-card-listen-fundamentalanalyse-mobile.html';
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = './vsf-card-listen-fundamentalanalyse-drawer.html';
|
||||
});
|
||||
});
|
||||
|
||||
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-pulldown-demo')) {
|
||||
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,507 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Layout VSF List Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF List Card</h1>
|
||||
|
||||
<section id="layout-vsf-list-card">
|
||||
<p class="sg-preview-label">Layout: VSF List Card</p>
|
||||
<p class="sg-body">Diese Layout-Seite zeigt VSF-spezifische List-Card-Layouts als Grundlage fuer weitere Ausdifferenzierungen.</p>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 1: Neue Liste anlegen Karte</h2>
|
||||
<div class="sg-object-card-grid" aria-label="VSF List Card Layout Neue Liste anlegen">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||
<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">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<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" aria-label="Neue Liste anlegen Formular">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
></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">Zuruecksetzen</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">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 2: Maximale Listenzahl erreicht</h2>
|
||||
<div class="sg-object-card-grid" aria-label="VSF List Card Layout maximale Listenzahl erreicht">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Maximale Listenzahl erreicht Karte">
|
||||
<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">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<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" aria-label="Neue Liste anlegen Formular deaktiviert">
|
||||
<p class="sg-vsf-list-card-limit-note">Maximale Listenanzahl erreicht. Du musst eine Liste loeschen oder dein Abonnement upgraden, um mehr Listen anzulegen.</p>
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--disabled sg-form-disabled sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp" disabled aria-disabled="true">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--disabled sg-form-disabled"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
disabled
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-disabled"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
disabled
|
||||
></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--inactive sg-form-sections-card__action" type="button" disabled aria-disabled="true">Zuruecksetzen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-button--disabled sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
|
||||
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List 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">NAME DER LISTE</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" href="#!" data-overlay-open-dialog="edit">Editieren</a>
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Medianscore:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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>
|
||||
</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">Wachstum:</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>
|
||||
</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">Profitabilität:</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>
|
||||
</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">Stabilität:</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const formCard = document.querySelector('#layout-vsf-list-card .sg-object-card-grid:first-of-type .sg-form-sections-card');
|
||||
const processButton = formCard?.querySelector('.sg-button--process');
|
||||
|
||||
const updateProcessButtonState = () => {
|
||||
if (!formCard || !processButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hasPulldownSelection = Array.from(formCard.querySelectorAll('[data-pulldown-option]'))
|
||||
.some((option) => option.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(formCard.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasPulldownSelection || hasTextInput;
|
||||
|
||||
processButton.disabled = !isActive;
|
||||
processButton.setAttribute('aria-disabled', String(!isActive));
|
||||
processButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
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;
|
||||
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';
|
||||
updateProcessButtonState();
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = demo.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
otherDemo.dataset.open = 'false';
|
||||
if (otherTrigger) {
|
||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
});
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
formCard?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateProcessButtonState);
|
||||
});
|
||||
updateProcessButtonState();
|
||||
|
||||
const editInputs = document.querySelectorAll('[data-vsf-edit-input]');
|
||||
const editSaveButton = document.querySelector('[data-vsf-edit-save]');
|
||||
const deleteDialogInput = document.querySelector('[data-vsf-delete-confirmation-input]');
|
||||
const deleteDialogSubmitButton = document.querySelector('[data-vsf-delete-confirmation-submit]');
|
||||
|
||||
if (editInputs.length > 0 && editSaveButton) {
|
||||
const updateEditSaveState = () => {
|
||||
const hasInput = Array.from(editInputs).some((field) => field.value.trim().length > 0);
|
||||
editSaveButton.disabled = !hasInput;
|
||||
editSaveButton.setAttribute('aria-disabled', String(!hasInput));
|
||||
editSaveButton.classList.toggle('sg-button--process-inactive', !hasInput);
|
||||
};
|
||||
|
||||
editInputs.forEach((field) => {
|
||||
field.addEventListener('input', updateEditSaveState);
|
||||
});
|
||||
updateEditSaveState();
|
||||
}
|
||||
|
||||
if (deleteDialogInput && deleteDialogSubmitButton) {
|
||||
const updateDeleteDialogState = () => {
|
||||
const isValid = deleteDialogInput.value === 'DELETE';
|
||||
deleteDialogSubmitButton.disabled = !isValid;
|
||||
deleteDialogSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
deleteDialogSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
deleteDialogInput.addEventListener('input', updateDeleteDialogState);
|
||||
updateDeleteDialogState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('.sg-delete-confirmation-pattern__floating-card').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`);
|
||||
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
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-pulldown-demo') || event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
wrap.dataset.open = 'false';
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,645 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF List Detailseite</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
|
||||
|
||||
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
|
||||
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
||||
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
||||
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="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>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__content">
|
||||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
|
||||
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
|
||||
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
|
||||
<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="Meldungsmenü ö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="Meldungsmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-overlay-open-dialog="meldungen">Meldungen anpassen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
|
||||
Meldungen ausblenden
|
||||
</button>
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
|
||||
<h2 id="vsf-meldungen-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Meldungen</h2>
|
||||
<div class="sg-form-sections-card__option-group" aria-label="Meldungsarten">
|
||||
<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="Meldungsart 1" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 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--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 2" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 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--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 3" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-overlay-dialog-close data-vsf-meldungen-save>Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
|
||||
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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 cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-toggle-target="meldungen"]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const groupCard = button.closest('.sg-group-card');
|
||||
if (!groupCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cards = groupCard.querySelectorAll('.sg-vsf-list-detail-page__notification-card');
|
||||
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
||||
const nextExpanded = !isExpanded;
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.classList.toggle('sg-vsf-list-detail-page__notification-card--hidden', !nextExpanded);
|
||||
card.setAttribute('aria-hidden', String(!nextExpanded));
|
||||
});
|
||||
|
||||
button.setAttribute('aria-expanded', String(nextExpanded));
|
||||
button.textContent = nextExpanded ? (button.dataset.expandedLabel || 'Meldungen ausblenden') : (button.dataset.collapsedLabel || 'Meldungen einblenden');
|
||||
});
|
||||
});
|
||||
|
||||
const closeVsfDialog = (stage) => {
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((otherDialog) => {
|
||||
otherDialog.hidden = true;
|
||||
});
|
||||
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
closeVsfDialog(stage);
|
||||
});
|
||||
});
|
||||
|
||||
const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]');
|
||||
const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]');
|
||||
|
||||
const updateMeldungenSaveState = () => {
|
||||
if (!meldungenSaveButton) {
|
||||
return;
|
||||
}
|
||||
const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true');
|
||||
meldungenSaveButton.disabled = !hasSelection;
|
||||
meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection));
|
||||
meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection);
|
||||
};
|
||||
|
||||
meldungenCheckboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', () => {
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const option = checkbox.closest('[data-component="checkbox-field"]');
|
||||
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);
|
||||
if (option) {
|
||||
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
|
||||
}
|
||||
updateMeldungenSaveState();
|
||||
});
|
||||
});
|
||||
|
||||
updateMeldungenSaveState();
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
|
||||
if (!trigger || selectableOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||
return option.getAttribute('aria-checked') === 'true';
|
||||
}).length;
|
||||
|
||||
selectableOptions.forEach((option) => {
|
||||
const optionRow = option.closest('.sg-pulldown-option');
|
||||
if (!optionRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
optionRow.classList.toggle(
|
||||
'sg-pulldown-option--selected',
|
||||
option.getAttribute('aria-checked') === 'true'
|
||||
);
|
||||
});
|
||||
|
||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||||
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||||
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||||
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||||
);
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = demo.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
otherDemo.dataset.open = 'false';
|
||||
if (otherTrigger) {
|
||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
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);
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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-pulldown-demo')) {
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-overlay-open-dialog]')) {
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
if (stage.dataset.dialogOpen === 'true') {
|
||||
closeVsfDialog(stage);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,656 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Listen Übersicht Seite V2</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Listen Übersicht Seite V2</h1>
|
||||
|
||||
<section class="sg-vsf-list-overview-page-v2" aria-label="VSF Listen Übersicht Seite V2">
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
||||
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
||||
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="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>
|
||||
</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>
|
||||
</article>
|
||||
|
||||
<div class="sg-transparent-card sg-vsf-list-overview-page-v2__intro" aria-label="Intro-Bereich" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1">Meine Listen</h1>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
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 a
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-object-card-grid" aria-label="VSF Listen Cards Übersicht">
|
||||
<div class="sg-object-card sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-vsf-list-card-context" data-pattern="object-group-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">NAME DER LISTE</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" href="#!" data-overlay-open-dialog="edit">Editieren</a>
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-company-count">
|
||||
<p class="sg-body"><strong>7 Unternehmen</strong></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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">Medianscore:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
|
||||
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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>
|
||||
</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">Wachstum:</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>
|
||||
</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">Profitabilität:</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>
|
||||
</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">Stabilität:</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<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" aria-label="Neue Liste anlegen Formular">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
></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">Zuruecksetzen</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">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<main class="sg-vsf-list-overview-page-v2__content" aria-label="Inhaltsbereich">
|
||||
<section class="sg-vsf-list-overview-page-v2__primary" aria-label="Primärer Bereich"></section>
|
||||
<aside class="sg-vsf-list-overview-page-v2__secondary" aria-label="Sekundärer Bereich"></aside>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const editInputs = document.querySelectorAll('[data-vsf-edit-input]');
|
||||
const editSaveButton = document.querySelector('[data-vsf-edit-save]');
|
||||
const deleteDialogInput = document.querySelector('[data-vsf-delete-confirmation-input]');
|
||||
const deleteDialogSubmitButton = document.querySelector('[data-vsf-delete-confirmation-submit]');
|
||||
|
||||
if (editInputs.length > 0 && editSaveButton) {
|
||||
const updateEditSaveState = () => {
|
||||
const hasInput = Array.from(editInputs).some((field) => field.value.trim().length > 0);
|
||||
editSaveButton.disabled = !hasInput;
|
||||
editSaveButton.setAttribute('aria-disabled', String(!hasInput));
|
||||
editSaveButton.classList.toggle('sg-button--process-inactive', !hasInput);
|
||||
};
|
||||
|
||||
editInputs.forEach((field) => {
|
||||
field.addEventListener('input', updateEditSaveState);
|
||||
});
|
||||
updateEditSaveState();
|
||||
}
|
||||
|
||||
if (deleteDialogInput && deleteDialogSubmitButton) {
|
||||
const updateDeleteDialogState = () => {
|
||||
const isValid = deleteDialogInput.value === 'DELETE';
|
||||
deleteDialogSubmitButton.disabled = !isValid;
|
||||
deleteDialogSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
deleteDialogSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
deleteDialogInput.addEventListener('input', updateDeleteDialogState);
|
||||
updateDeleteDialogState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('.sg-delete-confirmation-pattern__floating-card').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`);
|
||||
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
const createListForm = document.querySelector('.sg-vsf-list-overview-page-v2 .sg-object-card-grid .sg-form-sections-card');
|
||||
const createListProcessButton = createListForm?.querySelector('.sg-button--process');
|
||||
|
||||
const updateCreateListProcessButtonState = () => {
|
||||
if (!createListForm || !createListProcessButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hasPulldownSelection = Array.from(createListForm.querySelectorAll('[data-pulldown-option]'))
|
||||
.some((option) => option.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(createListForm.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasPulldownSelection || hasTextInput;
|
||||
|
||||
createListProcessButton.disabled = !isActive;
|
||||
createListProcessButton.setAttribute('aria-disabled', String(!isActive));
|
||||
createListProcessButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
createListForm?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateCreateListProcessButtonState);
|
||||
});
|
||||
createListForm?.querySelectorAll('.sg-pulldown-demo__trigger, [data-pulldown-option]').forEach((control) => {
|
||||
control.addEventListener('click', () => {
|
||||
setTimeout(updateCreateListProcessButtonState, 0);
|
||||
});
|
||||
});
|
||||
updateCreateListProcessButtonState();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,818 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Meldungen</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Meldungen</h1>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
||||
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
||||
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
||||
|
||||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line"
|
||||
type="text"
|
||||
placeholder="Suche"
|
||||
aria-label="Suche"
|
||||
>
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-vsf-list-detail-page__intro-block sg-portal-header-pattern-variant__next-element" aria-label="Meldungen Titel" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
|
||||
</div>
|
||||
|
||||
<section class="sg-vsf-meldungen-layout" aria-label="VSF Meldungen">
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-updates-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-updates-heading">Updates</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Aktualisierung mit hoher Priorität zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Positive Meldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weitere Meldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-kaufsignale-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-kaufsignale-heading">Kaufsignale</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Verkaufssignal zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Positives Kaufsignal zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weitere Signalmeldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-termine-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-termine-heading">Termine</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Terminmeldung mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weiterer Termin mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Dritte Terminmeldung mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
|
||||
<section class="sg-vsf-meldungen-mobile" aria-label="VSF Meldungen für Mobile">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<div class="sg-tab-button-group sg-vsf-meldungen-mobile__tabs" role="tablist" aria-label="Tasten Navigation gross" 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="vsf-meldungen-mobile-panel-updates" id="vsf-meldungen-mobile-tab-updates" data-component-part="tab-button">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-kaufsignale" id="vsf-meldungen-mobile-tab-kaufsignale" data-component-part="tab-button">Kaufsignale</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-termine" id="vsf-meldungen-mobile-tab-termine" data-component-part="tab-button">Termine</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panels">
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-updates">
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen Mobile">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Aktualisierung mit hoher Priorität zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Positive Meldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weitere Meldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-kaufsignale" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-kaufsignale" hidden>
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen Mobile">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Verkaufssignal zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Positives Kaufsignal zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weitere Signalmeldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-termine" hidden>
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen Mobile">
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Terminmeldung mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weiterer Termin mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Dritte Terminmeldung mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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>
|
||||
<script>
|
||||
const updateNotificationsPatternRowState = () => {
|
||||
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
|
||||
grid.classList.remove('sg-notifications-pattern--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-notifications-pattern--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||
window.addEventListener('resize', updateNotificationsPatternRowState);
|
||||
|
||||
const mobileVsfMeldungen = document.querySelector('.sg-vsf-meldungen-mobile');
|
||||
|
||||
if (mobileVsfMeldungen) {
|
||||
const mobileTabs = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tab"]'));
|
||||
const mobilePanels = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
const activateMobileTab = (targetTab) => {
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||||
tab.dataset.componentState = tab === targetTab ? 'active' : 'inactive';
|
||||
});
|
||||
|
||||
mobilePanels.forEach((panel) => {
|
||||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||||
});
|
||||
};
|
||||
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
activateMobileTab(tab);
|
||||
});
|
||||
});
|
||||
|
||||
const initialTab = mobileTabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || mobileTabs[0];
|
||||
if (initialTab) {
|
||||
activateMobileTab(initialTab);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
CSS_FILE="$ROOT_DIR/styleguide.css"
|
||||
|
||||
selectors=(
|
||||
"sg-portal-header"
|
||||
"sg-options-row"
|
||||
"sg-card-list-page-drawer__header"
|
||||
"sg-card-list-page-drawer__content"
|
||||
)
|
||||
|
||||
for selector in "${selectors[@]}"; do
|
||||
block="$(awk -v selector=".$selector" '
|
||||
$0 ~ selector"[[:space:]]*\\{" {in_block=1}
|
||||
in_block {print}
|
||||
in_block && /}/ {exit}
|
||||
' "$CSS_FILE")"
|
||||
|
||||
if [[ -z "$block" ]]; then
|
||||
echo "ERROR: selector .$selector not found in styleguide.css"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if echo "$block" | rg -n "(padding|padding-inline|padding-left|padding-right|inset|inset-inline)([^\n;]*)([0-9]+px)" >/dev/null; then
|
||||
echo "ERROR: hardcoded px inset/padding value found in .$selector"
|
||||
echo "$block"
|
||||
exit 1
|
||||
fi
|
||||
done
|
||||
|
||||
echo "OK: no hardcoded px inset values in guarded pattern selectors"
|
||||
@@ -0,0 +1,129 @@
|
||||
(function initHelpIconOverlayModule() {
|
||||
const CLOSE_HANDLERS = {
|
||||
'.sg-pulldown-demo': (root) => {
|
||||
root.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');
|
||||
}
|
||||
});
|
||||
},
|
||||
'.sg-sandwich-menu-wrap': (root) => {
|
||||
root.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');
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const getViewportWidth = () => {
|
||||
if (window.visualViewport && typeof window.visualViewport.width === 'number') {
|
||||
return window.visualViewport.width;
|
||||
}
|
||||
return window.innerWidth;
|
||||
};
|
||||
|
||||
const getSafeInsetPx = () => {
|
||||
const rootStyles = getComputedStyle(document.documentElement);
|
||||
const spacingSmallRaw = rootStyles.getPropertyValue('--spacing-small').trim();
|
||||
const rootFontSize = parseFloat(rootStyles.fontSize) || 16;
|
||||
const spacingSmallValue = parseFloat(spacingSmallRaw);
|
||||
if (Number.isNaN(spacingSmallValue)) {
|
||||
return 0;
|
||||
}
|
||||
if (spacingSmallRaw.endsWith('rem')) {
|
||||
return spacingSmallValue * rootFontSize;
|
||||
}
|
||||
return spacingSmallValue;
|
||||
};
|
||||
|
||||
const closeAllHelpIcons = (root) => {
|
||||
root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-help-icon');
|
||||
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||
wrap.dataset.open = 'false';
|
||||
if (panel) {
|
||||
panel.style.removeProperty('transform');
|
||||
}
|
||||
if (button) {
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.sgInitHelpIconOverlays = (options = {}) => {
|
||||
const root = options.root || document;
|
||||
const closeOnOpenSelectors = options.closeOnOpenSelectors || [];
|
||||
const outsideClickIgnoreSelectors = options.outsideClickIgnoreSelectors || [];
|
||||
|
||||
root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||
if (wrap.dataset.helpIconInit === 'true') {
|
||||
return;
|
||||
}
|
||||
wrap.dataset.helpIconInit = 'true';
|
||||
|
||||
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';
|
||||
|
||||
closeAllHelpIcons(root);
|
||||
closeOnOpenSelectors.forEach((selector) => {
|
||||
const handler = CLOSE_HANDLERS[selector];
|
||||
if (handler) {
|
||||
handler(root);
|
||||
}
|
||||
});
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'left';
|
||||
wrap.dataset.open = 'true';
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
|
||||
const viewportWidth = getViewportWidth();
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.right > viewportWidth) {
|
||||
wrap.dataset.align = 'right';
|
||||
}
|
||||
const alignedPanelRect = panel.getBoundingClientRect();
|
||||
if (alignedPanelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
|
||||
const clampedRect = panel.getBoundingClientRect();
|
||||
const safeInset = getSafeInsetPx();
|
||||
let shiftX = 0;
|
||||
if (clampedRect.right > (viewportWidth - safeInset)) {
|
||||
shiftX -= clampedRect.right - (viewportWidth - safeInset);
|
||||
}
|
||||
if ((clampedRect.left + shiftX) < safeInset) {
|
||||
shiftX += safeInset - (clampedRect.left + shiftX);
|
||||
}
|
||||
if (shiftX !== 0) {
|
||||
panel.style.transform = `translateX(${shiftX}px)`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
const isInsideIgnoredZone = ['.sg-help-icon-wrap', ...outsideClickIgnoreSelectors]
|
||||
.some((selector) => event.target.closest(selector));
|
||||
if (isInsideIgnoredZone) {
|
||||
return;
|
||||
}
|
||||
closeAllHelpIcons(root);
|
||||
});
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,235 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
STYLEGUIDE_REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
SOURCE_CSS="$STYLEGUIDE_REPO_ROOT/styleguide.css"
|
||||
VERSION_FILE="$STYLEGUIDE_REPO_ROOT/VERSION"
|
||||
|
||||
PORTAL_KEY="vsf"
|
||||
PORTAL_REPO_PATH=""
|
||||
PORTAL_CSS_REL="public/assets/styleguide.upstream.css"
|
||||
PORTAL_BUILT_CSS_REL="public/assets/styles.css"
|
||||
PORTAL_META_REL="public/assets/styleguide.upstream.meta.json"
|
||||
PORTAL_STYLEGUIDE_DOCS_REL="docs/styleguide"
|
||||
PORTAL_BUILD_SCRIPT_REL="scripts/styleguide/build_styles.sh"
|
||||
COMMIT_IN_PORTAL="false"
|
||||
|
||||
usage() {
|
||||
cat <<USAGE
|
||||
Usage:
|
||||
$(basename "$0") [--portal <vsf|naurua>] [--portal-repo <path>] [--commit-portal]
|
||||
|
||||
Options:
|
||||
--portal <name> Portal target. Defaults to vsf.
|
||||
--portal-repo <path> Optional override for portal repository root.
|
||||
--commit-portal Create commit in portal repo after sync.
|
||||
-h, --help Show this help.
|
||||
USAGE
|
||||
}
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case "$1" in
|
||||
--portal)
|
||||
PORTAL_KEY="${2:-}"
|
||||
shift 2
|
||||
;;
|
||||
--portal-repo)
|
||||
PORTAL_REPO_PATH="${2:-}"
|
||||
shift 2
|
||||
;;
|
||||
--commit-portal)
|
||||
COMMIT_IN_PORTAL="true"
|
||||
shift
|
||||
;;
|
||||
-h|--help)
|
||||
usage
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
echo "Unknown argument: $1" >&2
|
||||
usage
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
case "$PORTAL_KEY" in
|
||||
vsf)
|
||||
if [[ -z "$PORTAL_REPO_PATH" ]]; then
|
||||
PORTAL_REPO_PATH="/Users/mathias/Documents/Dokumente Chouchou/Codebases/WebApp_Aktienberater"
|
||||
fi
|
||||
;;
|
||||
naurua)
|
||||
if [[ -z "$PORTAL_REPO_PATH" ]]; then
|
||||
PORTAL_REPO_PATH="/Users/mathias/Documents/Dokumente Chouchou/Codebases/erp_naurua"
|
||||
fi
|
||||
;;
|
||||
*)
|
||||
echo "Unknown portal: $PORTAL_KEY" >&2
|
||||
usage
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
|
||||
if [[ ! -f "$SOURCE_CSS" ]]; then
|
||||
echo "Source CSS not found: $SOURCE_CSS" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [[ ! -f "$VERSION_FILE" ]]; then
|
||||
echo "Version file not found: $VERSION_FILE" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [[ ! -d "$PORTAL_REPO_PATH/.git" ]]; then
|
||||
echo "Portal repo is not a git repository: $PORTAL_REPO_PATH" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
PORTAL_CSS_PATH="$PORTAL_REPO_PATH/$PORTAL_CSS_REL"
|
||||
PORTAL_BUILT_CSS_PATH="$PORTAL_REPO_PATH/$PORTAL_BUILT_CSS_REL"
|
||||
PORTAL_META_PATH="$PORTAL_REPO_PATH/$PORTAL_META_REL"
|
||||
PORTAL_STYLEGUIDE_DOCS_PATH="$PORTAL_REPO_PATH/$PORTAL_STYLEGUIDE_DOCS_REL"
|
||||
PORTAL_BUILD_SCRIPT_PATH="$PORTAL_REPO_PATH/$PORTAL_BUILD_SCRIPT_REL"
|
||||
|
||||
mkdir -p "$(dirname "$PORTAL_CSS_PATH")"
|
||||
mkdir -p "$PORTAL_STYLEGUIDE_DOCS_PATH"
|
||||
|
||||
flatten_css() {
|
||||
local source_file="$1"
|
||||
local source_root="$2"
|
||||
local output_file="$3"
|
||||
|
||||
: > "$output_file"
|
||||
while IFS= read -r line; do
|
||||
if [[ "$line" =~ ^[[:space:]]*@import[[:space:]]+\"([^\"]+)\"[[:space:]]*\;[[:space:]]*$ ]]; then
|
||||
local import_path="${BASH_REMATCH[1]}"
|
||||
local import_abs="$source_root/$import_path"
|
||||
if [[ ! -f "$import_abs" ]]; then
|
||||
echo "Imported CSS not found: $import_abs" >&2
|
||||
exit 1
|
||||
fi
|
||||
cat "$import_abs" >> "$output_file"
|
||||
printf "\n" >> "$output_file"
|
||||
else
|
||||
printf "%s\n" "$line" >> "$output_file"
|
||||
fi
|
||||
done < "$source_file"
|
||||
}
|
||||
|
||||
transform_portal_css() {
|
||||
local source_file="$1"
|
||||
local output_file="$2"
|
||||
|
||||
case "$PORTAL_KEY" in
|
||||
vsf)
|
||||
awk '
|
||||
BEGIN { skip=0 }
|
||||
/^:root\[data-portal="naurua"\] \{/ { skip=1; next }
|
||||
skip && /^}/ { skip=0; next }
|
||||
skip { next }
|
||||
{ print }
|
||||
' "$source_file" > "$output_file"
|
||||
;;
|
||||
naurua)
|
||||
awk '
|
||||
BEGIN { in_override=0 }
|
||||
/^:root\[data-portal="naurua"\] \{/ { print ":root {"; in_override=1; next }
|
||||
in_override && /^}/ { print "}"; in_override=0; next }
|
||||
{ print }
|
||||
' "$source_file" > "$output_file"
|
||||
;;
|
||||
esac
|
||||
}
|
||||
|
||||
assert_no_unimported_styles() {
|
||||
local source_file="$1"
|
||||
local source_root="$2"
|
||||
local styles_dir="$source_root/styles"
|
||||
local missing_imports=()
|
||||
|
||||
if [[ ! -d "$styles_dir" ]]; then
|
||||
return 0
|
||||
fi
|
||||
|
||||
while IFS= read -r css_file; do
|
||||
local rel_path="./styles/$(basename "$css_file")"
|
||||
if ! grep -Eq "^[[:space:]]*@import[[:space:]]+\"$rel_path\"[[:space:]]*;" "$source_file"; then
|
||||
missing_imports+=("$rel_path")
|
||||
fi
|
||||
done < <(find "$styles_dir" -maxdepth 1 -type f -name '*.css' | sort)
|
||||
|
||||
if [[ ${#missing_imports[@]} -gt 0 ]]; then
|
||||
echo "Unimported CSS module files detected in styles/:" >&2
|
||||
for file in "${missing_imports[@]}"; do
|
||||
echo " - $file" >&2
|
||||
done
|
||||
echo "Add missing @import lines in $source_file before syncing." >&2
|
||||
exit 1
|
||||
fi
|
||||
}
|
||||
|
||||
TMP_UPSTREAM_CSS="$(mktemp)"
|
||||
trap 'rm -f "$TMP_UPSTREAM_CSS"' EXIT
|
||||
assert_no_unimported_styles "$SOURCE_CSS" "$STYLEGUIDE_REPO_ROOT"
|
||||
flatten_css "$SOURCE_CSS" "$STYLEGUIDE_REPO_ROOT" "$TMP_UPSTREAM_CSS"
|
||||
transform_portal_css "$TMP_UPSTREAM_CSS" "$PORTAL_CSS_PATH"
|
||||
|
||||
rsync -a --delete \
|
||||
--exclude ".git/" \
|
||||
--exclude ".codex/" \
|
||||
--exclude ".DS_Store" \
|
||||
--exclude "AGENTS.md" \
|
||||
"$STYLEGUIDE_REPO_ROOT/" \
|
||||
"$PORTAL_STYLEGUIDE_DOCS_PATH/"
|
||||
|
||||
STYLEGUIDE_VERSION="$(tr -d '[:space:]' < "$VERSION_FILE")"
|
||||
STYLEGUIDE_COMMIT="$(git -C "$STYLEGUIDE_REPO_ROOT" rev-parse --short HEAD)"
|
||||
SYNCED_AT="$(date -u +"%Y-%m-%dT%H:%M:%SZ")"
|
||||
|
||||
cat > "$PORTAL_META_PATH" <<META
|
||||
{
|
||||
"styleguideVersion": "$STYLEGUIDE_VERSION",
|
||||
"styleguideCommit": "$STYLEGUIDE_COMMIT",
|
||||
"syncedAtUtc": "$SYNCED_AT",
|
||||
"sourceRepo": "$STYLEGUIDE_REPO_ROOT",
|
||||
"mirroredDocsPath": "$PORTAL_STYLEGUIDE_DOCS_REL"
|
||||
}
|
||||
META
|
||||
|
||||
case "$PORTAL_KEY" in
|
||||
vsf)
|
||||
PORTAL_BUILD_SCRIPT_PATH="$PORTAL_REPO_PATH/$PORTAL_BUILD_SCRIPT_REL"
|
||||
if [[ ! -f "$PORTAL_BUILD_SCRIPT_PATH" ]]; then
|
||||
echo "Portal build script not found: $PORTAL_BUILD_SCRIPT_PATH" >&2
|
||||
exit 1
|
||||
fi
|
||||
bash "$PORTAL_BUILD_SCRIPT_PATH"
|
||||
;;
|
||||
naurua)
|
||||
cp "$PORTAL_CSS_PATH" "$PORTAL_BUILT_CSS_PATH"
|
||||
;;
|
||||
esac
|
||||
|
||||
if [[ "$COMMIT_IN_PORTAL" == "true" ]]; then
|
||||
git -C "$PORTAL_REPO_PATH" add -A \
|
||||
"$PORTAL_CSS_REL" \
|
||||
"$PORTAL_BUILT_CSS_REL" \
|
||||
"$PORTAL_META_REL" \
|
||||
"$PORTAL_STYLEGUIDE_DOCS_REL"
|
||||
if ! git -C "$PORTAL_REPO_PATH" diff --cached --quiet; then
|
||||
git -C "$PORTAL_REPO_PATH" commit -m "Sync styleguide $STYLEGUIDE_VERSION"
|
||||
git -C "$PORTAL_REPO_PATH" push
|
||||
echo "Portal repo synced and pushed."
|
||||
else
|
||||
echo "No changes to commit in portal repo."
|
||||
fi
|
||||
else
|
||||
echo "Portal files updated locally (no commit requested)."
|
||||
fi
|
||||
|
||||
echo "Synced $SOURCE_CSS -> $PORTAL_CSS_PATH"
|
||||
echo "Built portal stylesheet: $PORTAL_BUILT_CSS_PATH"
|
||||
echo "Metadata written: $PORTAL_META_PATH"
|
||||
echo "Mirrored styleguide docs: $PORTAL_STYLEGUIDE_DOCS_PATH"
|
||||
@@ -0,0 +1,241 @@
|
||||
<!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-segment-neutral</td><td>color-light-grey</td><td>Neutrale Segmentfläche für gezielte hellgraue Card-Segmente (z. B. <code>sg-card-segment--gray</code>).</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-muted</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche.</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>
|
||||
<tr><td>layout-card-body-content-justify</td><td>flex-start</td><td>Ausrichtung des Inhalts im Body-Segment der Card.</td></tr>
|
||||
<tr><td>layout-card-segment-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.</td></tr>
|
||||
<tr><td>layout-card-segment-padding-top</td><td>card-segment-padding-vertical</td><td>Oberer Innenabstand von Card-Segmenten.</td></tr>
|
||||
<tr><td>layout-card-segment-padding-right</td><td>card-segment-padding-horizontal</td><td>Rechter Innenabstand von Card-Segmenten.</td></tr>
|
||||
<tr><td>layout-card-segment-padding-bottom</td><td>card-segment-padding-vertical</td><td>Unterer Innenabstand von Card-Segmenten.</td></tr>
|
||||
<tr><td>layout-card-segment-padding-left</td><td>card-segment-padding-horizontal</td><td>Linker Innenabstand von Card-Segmenten.</td></tr>
|
||||
<tr><td>layout-card-body-padding-top</td><td>layout-card-segment-padding-top</td><td>Oberer Innenabstand des Card-Body-Segments.</td></tr>
|
||||
<tr><td>layout-card-body-padding-right</td><td>layout-card-segment-padding-right</td><td>Rechter Innenabstand des Card-Body-Segments.</td></tr>
|
||||
<tr><td>layout-card-body-padding-bottom</td><td>layout-card-segment-padding-bottom</td><td>Unterer Innenabstand des Card-Body-Segments.</td></tr>
|
||||
<tr><td>layout-card-body-padding-left</td><td>layout-card-segment-padding-left</td><td>Linker Innenabstand des Card-Body-Segments.</td></tr>
|
||||
<tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="sg-table-label">Verhaltensregel: Für Cards mit ausklappenden Overlays (z. B. Help-Panel, Sandwich-Menü, Pulldown) ist die Komponenten-Variante <code>sg-card--overlay-host</code> zu verwenden, damit Overlays nicht abgeschnitten werden.</p>
|
||||
|
||||
<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">Pattern Card Breiten</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-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</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-card-transparent</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">VSF Drawer 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>surface-vsf-drawer-object-card-header</td><td>color-darkblue</td><td>Header-Fläche der VSF-spezifischen Object Card im Drawer.</td></tr>
|
||||
<tr><td>surface-vsf-drawer-object-card-body</td><td>color-darkblue</td><td>Body-Fläche der VSF-spezifischen Object Card im Drawer.</td></tr>
|
||||
<tr><td>text-vsf-drawer-object-card-heading</td><td>color-font-light</td><td>Textfarbe der H2-Überschrift im Header der VSF Drawer Object Card.</td></tr>
|
||||
<tr><td>text-vsf-drawer-object-card-body</td><td>color-font-light</td><td>Textfarbe der Detailinhalte im Body der VSF Drawer Object Card.</td></tr>
|
||||
<tr><td>layout-vsf-drawer-object-card-column-gap</td><td>spacing-large</td><td>Spaltenabstand des zweispaltigen Textlayouts in der VSF Drawer Object Card.</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>surface-tab-compact-background</td><td>surface-form-preview</td><td>Hintergrundfläche kompakter Tab-Navigationen.</td></tr>
|
||||
<tr><td>surface-tab-compact-unselected</td><td>color-medium-grey</td><td>Fläche nicht aktiver Tabs in der kompakten Variante.</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>
|
||||
<tr><td>layout-tab-navigation-large-padding-inline</td><td>interaction-padding-horizontal</td><td>Horizontaler Innenabstand für große Tab-Navigationen (auf kleinen Viewports reduziert).</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 gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</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>
|
||||
<p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
|
||||
<tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</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>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
|
||||
<tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
|
||||
<tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
|
||||
<tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
|
||||
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
|
||||
<tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
|
||||
<tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</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>text-toggle-label-active</td><td>color-font-light</td><td>Textfarbe des aktiven Toggle-Labels auf der hervorgehobenen Handle-Seite.</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ß.</td></tr>
|
||||
<tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.</td></tr>
|
||||
<tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
|
||||
<tr><td>surface-checkbox-default</td><td>color-white</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>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
|
||||
<tr><td>icon-sandwich-line-portal</td><td>color-font-dark</td><td>Linienfarbe des Sandwich-Icons für große und kleine Variante.</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-medium-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>
|
||||
<tr><td>text-score-state-positive</td><td>chart-value-positive</td><td>Textfarbe positiver Zustandslabels am Gesamtscore-Balken.</td></tr>
|
||||
<tr><td>layout-score-bar-item-columns</td><td>max-content und 1fr</td><td>Standardspalten der Score-Bar-Zeile: dynamische Labelspalte (längstes Label) plus Balkenspur.</td></tr>
|
||||
<tr><td>layout-score-bar-item-gap</td><td>spacing-large</td><td>Abstand zwischen Labelspalte und Balkenspur in der Score-Bar-Zeile.</td></tr>
|
||||
<tr><td>layout-score-bar-item-single-score-columns</td><td>max-content, 1fr und max-content</td><td>Spalten der Score-Bar-Zeile in der Single-Score-Variante: Label, Balken, Zustandslabel.</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>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Data Columns</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 Spaltenliste.</td></tr>
|
||||
<tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Spaltenzellen.</td></tr>
|
||||
<tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Spaltenzellen.</td></tr>
|
||||
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Spaltenzellen.</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>
|
||||
<tr><td>layout-preview-align-items</td><td>flex-start</td><td>Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!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 Layouts</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Semantic Tokens Layouts</h1>
|
||||
|
||||
<section id="semantic-layouts">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layouts</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||||
<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>
|
||||
<tr><td>layout-options-row-mode-toggle-width</td><td>dimension-options-row-mode-toggle-width</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
|
||||
<tr><td>layout-options-row-help-panel-width</td><td>dimension-options-row-help-panel-width</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
|
||||
<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 der Object Card.</td></tr>
|
||||
<tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
|
||||
<tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
|
||||
<tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||||
<tr><td>layout-company-card-analysis-gap-after-moat</td><td>spacing-large</td><td>Vertikaler Abstand zwischen Moat-Zeile und Analyse-Zusammenfassung in der Company Card.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!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 Patterns</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Semantic Tokens Patterns</h1>
|
||||
|
||||
<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 im Pattern</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-midblue</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>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(var(--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>layout-page-content-inset-inline</td><td>card-segment-padding-horizontal</td><td>Gemeinsamer horizontaler Content-Inset für Portal Header, Options Row und Card-Listen-Drawer-Content (Single Source of Spacing Truth auf Pattern-Ebene).</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 im Pattern</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-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>
|
||||
</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 im Pattern</th></tr></thead><tbody>
|
||||
<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">Object 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 im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Notifications</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>layout-notifications-card-flex-basis</td><td>dimension-notifications-card-min-width</td><td>Flex-Basis der Notification Card im Notifications-Pattern; entspricht der gemeinsamen Foundation-Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von <code>.sg-group-card</code>.</td></tr>
|
||||
<tr><td>layout-notifications-card-min-width</td><td>dimension-notifications-card-min-width</td><td>Mindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.</td></tr>
|
||||
<tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr>
|
||||
<tr><td>layout-notifications-text-segment-fixed-height</td><td>dimension-notifications-text-segment-fixed-height</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
|
||||
<tr><td>layout-notifications-text-segment-fixed-height-small</td><td>dimension-notifications-text-segment-fixed-height-small</td><td>Fixe Desktop-Höhe des ersten Text-Segments in der Variante <code>Pattern: Notifications small</code>; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Company Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>text-company-card-data-negative</td><td>chart-value-negative</td><td>Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card.</td></tr>
|
||||
<tr><td>text-company-card-moat-neutral</td><td>chart-value-neutral</td><td>Textfarbe für die neutrale Moat-Ausprägung im Analyse-Segment der Company 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 im Pattern</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 im Pattern</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>
|
||||
<tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
|
||||
<tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Text Layouts</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>surface-text-layout-preview</td><td>color-light-grey</td><td>Hintergrundfläche der Vorschau-Segmente im Pattern Text Layouts.</td></tr>
|
||||
<tr><td>layout-text-layout-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen Textspalten in zwei- und dreispaltigen Varianten.</td></tr>
|
||||
<tr><td>layout-text-layout-two-column-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster für die zweispaltige Text-Variante.</td></tr>
|
||||
<tr><td>layout-text-layout-three-column-columns</td><td>repeat(3, minmax(0, 1fr))</td><td>Spaltenraster für das Pattern Dreispaltig verteilt.</td></tr>
|
||||
<tr><td>text-align-text-layout-column-left</td><td>left</td><td>Textausrichtung der linken Spalte im Pattern Dreispaltig verteilt.</td></tr>
|
||||
<tr><td>text-align-text-layout-column-center</td><td>center</td><td>Textausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt.</td></tr>
|
||||
<tr><td>text-align-text-layout-column-right</td><td>right</td><td>Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">VSF List Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>text-vsf-list-card-limit-note</td><td>color-signal-red</td><td>Hinweistextfarbe für die Meldung bei erreichter maximaler Listenanzahl.</td></tr>
|
||||
<tr><td>layout-vsf-list-card-summary-offset-block-start</td><td>layout-company-card-analysis-gap-after-moat</td><td>Vertikaler Abstand vor dem Summary-Block in der VSF List Card.</td></tr>
|
||||
<tr><td>layout-vsf-list-card-delete-confirmation-target-max-width</td><td>layout-object-group-card-max-width</td><td>Maximalbreite der Delete-Confirmation-Zielkarte innerhalb der VSF-List-Card-Demo.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Multiselektions-Pulldown</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>layout-multiselect-pulldown-label-column-width-fallback</td><td>max-content</td><td>Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Overlay Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||
<tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</td></tr>
|
||||
<tr><td>surface-delete-confirmation-target-dim-overlay</td><td>color-black</td><td>Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster.</td></tr>
|
||||
<tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
|
||||
<tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>spacing-large</td><td>Abstand des Overlays von der oberen Kante des Zielobjekts.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-label-width</td><td>dimension-input-label-width</td><td>Label-Spaltenbreite der einzeiligen Bestätigungseingabe.</td></tr>
|
||||
<tr><td>layout-delete-confirmation-target-dim-opacity</td><td>0.5</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut).</td></tr>
|
||||
<tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "./styles/01-foundations.css";
|
||||
@import "./styles/02-base.css";
|
||||
@import "./styles/03-typography-helpers.css";
|
||||
@import "./styles/10-components-interactive-elements.css";
|
||||
@import "./styles/20-patterns-portal-header.css";
|
||||
@import "./styles/21-patterns-options-row.css";
|
||||
@import "./styles/22-patterns-object-card.css";
|
||||
@import "./styles/23-patterns-object-group-card.css";
|
||||
@import "./styles/24-patterns-navigation-card.css";
|
||||
@import "./styles/25-patterns-form-sections.css";
|
||||
@import "./styles/26-patterns-vsf-list-card.css";
|
||||
@import "./styles/27-patterns-delete-confirmation.css";
|
||||
@import "./styles/28-patterns-notifications.css";
|
||||
@import "./styles/30-layouts-card-list-page.css";
|
||||
@import "./styles/33-layouts-vsf-list-detailseite.css";
|
||||
@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
|
||||
@import "./styles/31-patterns-text-layouts.css";
|
||||
@import "./styles/32-patterns-card-group-keyboard-nav.css";
|
||||
@import "./styles/40-components-cards.css";
|
||||
@import "./styles/41-components-charts.css";
|
||||
@import "./styles/42-components-data-display.css";
|
||||
@import "./styles/43-components-typography.css";
|
||||
@@ -0,0 +1,312 @@
|
||||
/* ========================================================= */
|
||||
/* Foundations */
|
||||
/* ========================================================= */
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-darkblue: #4661A9;
|
||||
--color-midblue: #657FBA;
|
||||
--color-darkgreen: #4D646E;
|
||||
--color-darkbrown: #665F57;
|
||||
--color-light-grey: #E2E5E9;
|
||||
--color-medium-grey: #CDCFD4;
|
||||
--color-dark-grey: #7B879D;
|
||||
--color-black: #000000;
|
||||
--color-white: #FFFFFF;
|
||||
--color-process-inactive: #FFAE79;
|
||||
--color-signal-green: #009101;
|
||||
--color-signal-yellow: #9C7A00;
|
||||
--color-signal-red: #9B3B2F;
|
||||
--color-font-dark: #414959;
|
||||
--color-font-light: #FFFFFF;
|
||||
--color-font-hyperlink: #FF6900;
|
||||
--color-background-purple: #373C4A;
|
||||
--color-background-purple-light: #656C7D;
|
||||
--color-transparent: transparent;
|
||||
|
||||
/* Semantic component tokens: Cards */
|
||||
--surface-card: var(--color-light-grey);
|
||||
--surface-card-body: var(--color-light-grey);
|
||||
--surface-card-segment-neutral: var(--color-light-grey);
|
||||
--surface-card-group: var(--color-background-purple-light);
|
||||
--surface-card-transparent: var(--color-transparent);
|
||||
--surface-card-header-primary: var(--color-darkblue);
|
||||
--surface-card-header-alternative: var(--color-darkgreen);
|
||||
--surface-card-header-muted: var(--color-darkbrown);
|
||||
--divider-card-segment: var(--color-white);
|
||||
--text-card-header: var(--color-font-light);
|
||||
--text-card-body: var(--color-font-dark);
|
||||
--text-card-transparent: var(--color-font-light);
|
||||
--layout-card-body-content-justify: flex-start;
|
||||
--layout-card-segment-content-gap: var(--spacing-small);
|
||||
|
||||
/* Semantic component tokens: Interactive elements */
|
||||
--surface-form-preview: var(--color-light-grey);
|
||||
--surface-control-default: var(--color-white);
|
||||
--surface-control-active: var(--color-white);
|
||||
--surface-control-inactive: var(--color-white);
|
||||
--surface-control-disabled: var(--color-white);
|
||||
--surface-button-active: var(--color-medium-grey);
|
||||
--surface-button-process: var(--color-font-hyperlink);
|
||||
--surface-button-process-inactive: var(--color-process-inactive);
|
||||
--surface-button-inactive: var(--color-light-grey);
|
||||
--surface-tab-selected: var(--color-dark-grey);
|
||||
--surface-tab-unselected: var(--color-white);
|
||||
--surface-tab-compact-background: var(--surface-form-preview);
|
||||
--surface-tab-compact-unselected: var(--color-medium-grey);
|
||||
--surface-input-clear: var(--color-medium-grey);
|
||||
--surface-toggle-track: var(--color-medium-grey);
|
||||
--surface-toggle-handle: var(--color-darkblue);
|
||||
--surface-menu-panel-portal: var(--color-light-grey);
|
||||
--surface-help-icon: var(--color-medium-grey);
|
||||
--surface-help-panel: var(--color-light-grey);
|
||||
--surface-pulldown-panel: var(--color-light-grey);
|
||||
--surface-activatable-remove: var(--surface-control-default);
|
||||
--surface-slider-track: var(--color-medium-grey);
|
||||
--surface-slider-progress: var(--color-dark-grey);
|
||||
--surface-slider-thumb: var(--color-dark-grey);
|
||||
--surface-checkbox-default: var(--color-white);
|
||||
--surface-checkbox-on-context: var(--color-white);
|
||||
--surface-radio-default: var(--color-white);
|
||||
--layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal);
|
||||
--layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal);
|
||||
--layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal);
|
||||
--layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
|
||||
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
|
||||
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
|
||||
--layout-pulldown-panel-form-mobile-width: 90%;
|
||||
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
|
||||
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
|
||||
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
|
||||
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
|
||||
--layout-input-label-width: var(--dimension-input-label-width);
|
||||
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
|
||||
--layout-input-field-max-width: var(--dimension-input-field-max-width);
|
||||
--layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
|
||||
--layout-search-field-width: var(--dimension-search-field-width);
|
||||
--layout-mode-toggle-local-height: var(--compact-interaction-height);
|
||||
--layout-mode-toggle-local-width-factor: 3;
|
||||
--layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
|
||||
--layout-help-panel-width: calc(var(--interaction-height) * 8);
|
||||
--text-control-default: var(--color-font-dark);
|
||||
--text-control-disabled: var(--color-dark-grey);
|
||||
--text-button-process: var(--color-font-light);
|
||||
--text-tab-selected: var(--color-font-light);
|
||||
--text-tab-unselected: var(--color-dark-grey);
|
||||
--text-toggle-label-active: var(--color-font-light);
|
||||
--text-menu-link-portal: var(--color-font-dark);
|
||||
--text-help-icon: var(--color-font-dark);
|
||||
--text-help-panel: var(--color-font-dark);
|
||||
--text-activatable-remove: var(--text-control-default);
|
||||
--text-hyperlink: var(--color-font-hyperlink);
|
||||
--icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
|
||||
--icon-sandwich-line-portal: var(--color-font-dark);
|
||||
--icon-radio-mark: var(--color-font-dark);
|
||||
|
||||
/* Semantic component tokens: Charts */
|
||||
--surface-score-bar-track: var(--color-medium-grey);
|
||||
--surface-chart-area: var(--color-light-grey);
|
||||
--chart-value-positive: var(--color-signal-green);
|
||||
--chart-value-neutral: var(--color-signal-yellow);
|
||||
--chart-value-negative: var(--color-signal-red);
|
||||
--chart-value-primary: var(--color-darkblue);
|
||||
--chart-value-reference: var(--color-medium-grey);
|
||||
--chart-grid-line: var(--color-medium-grey);
|
||||
--chart-axis-line: var(--color-font-dark);
|
||||
--chart-marker-line: var(--color-font-dark);
|
||||
--chart-median-line: var(--color-font-dark);
|
||||
--text-chart-default: var(--color-font-dark);
|
||||
--text-score-state-positive: var(--chart-value-positive);
|
||||
--layout-score-bar-item-columns: max-content 1fr;
|
||||
--layout-score-bar-item-gap: var(--spacing-large);
|
||||
--layout-score-bar-item-single-score-columns: max-content 1fr max-content;
|
||||
|
||||
/* Semantic component tokens: Data display */
|
||||
--surface-data-table: var(--color-light-grey);
|
||||
--surface-data-table-header: var(--color-light-grey);
|
||||
--surface-data-table-cell: var(--color-light-grey);
|
||||
--surface-data-table-help-icon: var(--color-medium-grey);
|
||||
|
||||
--text-data-table-default: var(--color-font-dark);
|
||||
--text-data-table-warning: var(--color-signal-yellow);
|
||||
--text-data-table-help-icon: var(--color-font-dark);
|
||||
|
||||
/* Semantic component tokens: Typography */
|
||||
--text-typography-preview: var(--color-font-light);
|
||||
--layout-preview-align-items: flex-start;
|
||||
|
||||
/* Semantic pattern tokens: Portal header */
|
||||
--surface-portal-header: var(--color-darkblue);
|
||||
--surface-portal-header-tab: var(--color-midblue);
|
||||
--surface-portal-header-tab-active: var(--color-light-grey);
|
||||
--text-portal-header-brand: var(--color-font-light);
|
||||
--font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1);
|
||||
--text-portal-header-tab: var(--color-font-light);
|
||||
--text-portal-header-tab-active: var(--color-font-dark);
|
||||
--layout-page-content-inset-inline: var(--card-segment-padding-horizontal);
|
||||
--surface-options-row: var(--color-light-grey);
|
||||
--surface-options-row-control: var(--surface-control-default);
|
||||
--surface-options-row-control-selected: var(--surface-control-active);
|
||||
--surface-options-row-input-clear: var(--surface-input-clear);
|
||||
--surface-options-row-toggle-track: var(--surface-toggle-track);
|
||||
--surface-options-row-toggle-handle: var(--surface-toggle-handle);
|
||||
--surface-options-row-help-icon: var(--surface-help-icon);
|
||||
--surface-options-row-help-panel: var(--surface-help-panel);
|
||||
--divider-options-row-mobile: var(--color-white);
|
||||
--text-options-row-default: var(--text-control-default);
|
||||
--text-options-row-placeholder: var(--text-control-disabled);
|
||||
--text-options-row-help-icon: var(--color-font-light);
|
||||
--text-options-row-help-panel: var(--text-help-panel);
|
||||
--text-options-row-description: var(--color-font-light);
|
||||
--layout-options-row-margin-top: var(--spacing-small);
|
||||
--layout-options-row-main-gap: var(--spacing-large);
|
||||
--layout-options-row-group-gap: var(--spacing-small);
|
||||
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
|
||||
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
|
||||
--layout-object-card-min-width: var(--dimension-object-card-min-width);
|
||||
--layout-object-card-max-width: var(--dimension-object-card-max-width);
|
||||
--layout-object-card-height: var(--dimension-object-card-height);
|
||||
--layout-object-card-content-grow: var(--dimension-object-card-content-grow);
|
||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
||||
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
|
||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||
--dimension-notifications-card-min-width: 445px;
|
||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
||||
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
|
||||
--layout-notifications-card-max-width: var(--layout-object-card-max-width);
|
||||
--dimension-notifications-text-segment-fixed-height: 150px;
|
||||
--dimension-notifications-text-segment-fixed-height-small: 60px;
|
||||
--layout-notifications-text-segment-fixed-height: var(--dimension-notifications-text-segment-fixed-height);
|
||||
--layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
|
||||
--layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
|
||||
--layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
|
||||
--surface-object-card-lower-segment: var(--color-white);
|
||||
--text-company-card-data-negative: var(--chart-value-negative);
|
||||
--text-company-card-moat-neutral: var(--chart-value-neutral);
|
||||
--layout-company-card-analysis-gap-after-moat: var(--spacing-large);
|
||||
--surface-navigation-card: var(--color-white);
|
||||
--surface-navigation-card-body: var(--color-white);
|
||||
--surface-content-block-card-title: var(--color-light-grey);
|
||||
--surface-content-block-card-content: var(--color-white);
|
||||
--layout-content-cards-group-gap: var(--spacing-small);
|
||||
--surface-card-list-drawer: var(--color-background-purple);
|
||||
--text-content-block-card-title: var(--color-font-dark);
|
||||
--text-content-block-card-content: var(--color-font-dark);
|
||||
--text-card-list-drawer: var(--color-font-dark);
|
||||
--layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
|
||||
--surface-vsf-drawer-object-card-header: var(--color-darkblue);
|
||||
--surface-vsf-drawer-object-card-body: var(--color-darkblue);
|
||||
--text-vsf-drawer-object-card-heading: var(--color-font-light);
|
||||
--text-vsf-drawer-object-card-body: var(--color-font-light);
|
||||
--layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
|
||||
--text-vsf-list-card-limit-note: var(--color-signal-red);
|
||||
--layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat);
|
||||
--layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
|
||||
--surface-text-layout-preview: var(--color-light-grey);
|
||||
--layout-text-layout-column-gap: var(--spacing-large);
|
||||
--layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
|
||||
--layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
|
||||
--text-align-text-layout-column-left: left;
|
||||
--text-align-text-layout-column-center: center;
|
||||
--text-align-text-layout-column-right: right;
|
||||
--surface-delete-confirmation-overlay: var(--color-light-grey);
|
||||
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
|
||||
--text-delete-confirmation-overlay: var(--color-font-dark);
|
||||
--layout-delete-confirmation-target-max-width: 35rem;
|
||||
--layout-delete-confirmation-overlay-width-factor: 0.8;
|
||||
--layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
|
||||
--layout-delete-confirmation-content-gap: var(--spacing-small);
|
||||
--layout-delete-confirmation-actions-gap: var(--spacing-small);
|
||||
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
|
||||
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
|
||||
--layout-delete-confirmation-target-dim-opacity: 0.5;
|
||||
--layer-delete-confirmation-overlay: 50;
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: "Open Sans", sans-serif;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-small: 0.8rem;
|
||||
--font-size-brand: 1.6rem;
|
||||
--font-size-h1: 1.5rem;
|
||||
--font-size-h2: 1.25rem;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-semibold: 600;
|
||||
--line-height-base: 1.5;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-small: 0.3rem;
|
||||
--spacing-large: 1rem;
|
||||
--card-segment-padding-vertical: 0.75rem;
|
||||
--card-segment-padding-horizontal: 1rem;
|
||||
--card-segment-padding-horizontal-mobile: 0.5rem;
|
||||
--interaction-padding-vertical: 0.25rem;
|
||||
--interaction-padding-horizontal: 1rem;
|
||||
|
||||
/* Dimensions */
|
||||
--interaction-height: 2rem;
|
||||
--compact-interaction-height: 1.5rem;
|
||||
--compact-interaction-padding-vertical: 0.15rem;
|
||||
--compact-interaction-padding-horizontal: 0.75rem;
|
||||
--small-interaction-element-size: 1.25rem;
|
||||
--disabled-opacity: 0.7;
|
||||
--sandwich-line-width: 1.25rem;
|
||||
--sandwich-line-height: 4px;
|
||||
--sandwich-line-gap: 3px;
|
||||
--score-bar-height: 1rem;
|
||||
--score-marker-width: 6px;
|
||||
--score-marker-height: calc(var(--score-bar-height) + 2px);
|
||||
--chart-height-bar: 24rem;
|
||||
--chart-height-line: 18rem;
|
||||
--chart-axis-label-column-width: 4rem;
|
||||
--chart-axis-label-gap: 5px;
|
||||
--chart-grid-line-width: 1px;
|
||||
--chart-line-width: 2px;
|
||||
--chart-label-position-default: 50%;
|
||||
--dimension-object-card-min-width: 395px;
|
||||
--dimension-object-card-max-width: 600px;
|
||||
--dimension-object-card-height: 600px;
|
||||
--dimension-object-card-content-grow: 1;
|
||||
--dimension-object-card-mobile-width: 100%;
|
||||
--dimension-object-card-mobile-height: auto;
|
||||
--dimension-object-card-desktop-breakpoint: 768px;
|
||||
--dimension-object-group-card-min-width: 550px;
|
||||
--dimension-object-group-card-max-width: 800px;
|
||||
--dimension-input-label-width: 9rem;
|
||||
--dimension-input-field-desktop-width: 400px;
|
||||
--dimension-input-field-max-width: 600px;
|
||||
--dimension-search-field-width: 15.3rem;
|
||||
--dimension-layer-pulldown-panel: 40;
|
||||
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
|
||||
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
|
||||
--dimension-options-row-mode-toggle-width: 7rem;
|
||||
--dimension-options-row-help-panel-width: 16rem;
|
||||
--dimension-card-list-drawer-width: 40%;
|
||||
--dimension-slider-track-height: 6px;
|
||||
--dimension-slider-thumb-size: 22px;
|
||||
--dimension-slider-thumb-offset-top: -8px;
|
||||
--radius-slider-track: 999px;
|
||||
|
||||
/* Radius */
|
||||
--radius-card: 8px;
|
||||
--radius-graph-bar: 2px;
|
||||
--radius-interaction: 4px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-none: none;
|
||||
--shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22);
|
||||
--shadow-interaction-inset: none;
|
||||
|
||||
/* Borders */
|
||||
--border-none: none;
|
||||
--border-control: none;
|
||||
|
||||
/* Runtime defaults */
|
||||
--layout-object-card-shared-width: auto;
|
||||
--sg-slider-progress: 0%;
|
||||
--chart-label-position: var(--chart-label-position-default);
|
||||
}
|
||||
|
||||
:root[data-portal="naurua"] {
|
||||
--color-darkblue: #354A52;
|
||||
--font-family-base: "Avenir", sans-serif;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* ========================================================= */
|
||||
/* Base */
|
||||
/* ========================================================= */
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-font-dark);
|
||||
background: var(--color-background-purple);
|
||||
margin: 0;
|
||||
padding: var(--spacing-small);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
:root {
|
||||
--layout-tab-navigation-large-padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: var(--spacing-small);
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
section + section {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-main-heading {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-brand);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-sub-heading {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-text-on-dark {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-brand-title {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-brand);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-heading-h1 {
|
||||
margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-heading-h2 {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-preview-label {
|
||||
margin: 0 0 var(--spacing-small) 0;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-preview-area {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-small);
|
||||
align-items: var(--layout-preview-align-items);
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
/* ========================================================= */
|
||||
/* Typography helpers */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-body,
|
||||
.sg-strong,
|
||||
.sg-section-title,
|
||||
.sg-bar-label,
|
||||
.sg-table-label,
|
||||
.sg-table-value {
|
||||
font-family: var(--font-family-base);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-body,
|
||||
.sg-section-title {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.sg-body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-body:not(:last-child) {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
}
|
||||
|
||||
.sg-strong,
|
||||
.sg-bar-label {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sg-table-label {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.sg-table-value {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sg-index a {
|
||||
color: var(--color-font-hyperlink);
|
||||
}
|
||||
|
||||
.sg-index .sg-sub-heading {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-foundation-table {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-large);
|
||||
color: var(--color-font-light);
|
||||
border: 1px solid var(--color-white);
|
||||
}
|
||||
|
||||
.sg-foundation-table th,
|
||||
.sg-foundation-table td {
|
||||
color: var(--color-font-light);
|
||||
border: 1px solid var(--color-white);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sg-section-h2,
|
||||
.sg-section-h3 {
|
||||
margin: 0 0 var(--spacing-small) 0;
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,68 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Portal Header */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-portal-header {
|
||||
--surface-tab-selected: var(--surface-portal-header-tab);
|
||||
--surface-tab-unselected: var(--surface-portal-header-tab-active);
|
||||
--text-tab-selected: var(--text-portal-header-tab);
|
||||
--text-tab-unselected: var(--text-portal-header-tab-active);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-large);
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline);
|
||||
border: var(--border-none);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-none);
|
||||
background: var(--surface-portal-header);
|
||||
}
|
||||
|
||||
.sg-portal-header__main {
|
||||
display: grid;
|
||||
flex: 1 1 auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"brand menu"
|
||||
"tabs tabs";
|
||||
gap: var(--spacing-large);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-portal-header__brand {
|
||||
grid-area: brand;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
font-size: var(--font-size-portal-header-brand);
|
||||
color: var(--text-portal-header-brand);
|
||||
}
|
||||
|
||||
.sg-portal-header__tabs {
|
||||
grid-area: tabs;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-portal-header__menu-wrap {
|
||||
grid-area: menu;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant__label {
|
||||
margin: 0 0 var(--spacing-small) 0;
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant__next-element {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
|
||||
.sg-portal-header__main {
|
||||
gap: var(--spacing-small) var(--spacing-large);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Options Row */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-options-row {
|
||||
--surface-control-default: var(--surface-options-row-control);
|
||||
--surface-control-active: var(--surface-options-row-control-selected);
|
||||
--surface-input-clear: var(--surface-options-row-input-clear);
|
||||
--surface-toggle-track: var(--surface-options-row-toggle-track);
|
||||
--surface-toggle-handle: var(--surface-options-row-toggle-handle);
|
||||
--surface-help-icon: var(--surface-options-row-help-icon);
|
||||
--surface-help-panel: var(--surface-options-row-help-panel);
|
||||
--text-control-default: var(--text-options-row-default);
|
||||
--text-control-disabled: var(--text-options-row-placeholder);
|
||||
--text-help-icon: var(--text-options-row-help-icon);
|
||||
--text-help-panel: var(--text-options-row-help-panel);
|
||||
--layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width);
|
||||
--layout-help-panel-width: var(--layout-options-row-help-panel-width);
|
||||
margin-top: var(--layout-options-row-margin-top);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--layout-options-row-main-gap);
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline);
|
||||
border: var(--border-none);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-none);
|
||||
background: var(--surface-options-row);
|
||||
}
|
||||
|
||||
.sg-options-row__left,
|
||||
.sg-options-row__right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--layout-options-row-group-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sg-options-row__left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.sg-options-row__right {
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-options-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__right,
|
||||
.sg-options-row__left {
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-options-row__right {
|
||||
order: 1;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left {
|
||||
order: 2;
|
||||
box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-pulldown-demo,
|
||||
.sg-options-row__left > .sg-input-single-line-wrap,
|
||||
.sg-options-row__left > .sg-search-field-row {
|
||||
flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-input-single-line-wrap,
|
||||
.sg-options-row__left > .sg-search-field-row {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input .sg-input-single-line {
|
||||
padding-right: var(--interaction-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line {
|
||||
border-radius: var(--radius-interaction) 0 0 var(--radius-interaction);
|
||||
}
|
||||
|
||||
.sg-options-row .sg-search-field-input .sg-input-clear-button {
|
||||
position: static;
|
||||
flex: 0 0 var(--interaction-height);
|
||||
height: auto;
|
||||
border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
|
||||
}
|
||||
|
||||
.sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
|
||||
.sg-options-row__left > .sg-pulldown-demo .sg-pulldown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
|
||||
width: min(
|
||||
var(--layout-pulldown-panel-form-mobile-width),
|
||||
calc(100vw - (2 * var(--spacing-large)))
|
||||
);
|
||||
min-width: 0;
|
||||
max-width: calc(100vw - (2 * var(--spacing-large)));
|
||||
}
|
||||
|
||||
.sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
|
||||
.sg-options-row .sg-pulldown-panel .sg-form-sections-card {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-large);
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
|
||||
min-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||
min-width: calc(var(--interaction-height) * 1.25);
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sg-pulldown-panel__row {
|
||||
grid-template-columns: minmax(0, 1fr) var(--interaction-height);
|
||||
}
|
||||
|
||||
.sg-pulldown-panel__label {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Object Card */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-object-card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-small);
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-object-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 var(--layout-object-card-min-width);
|
||||
min-width: var(--layout-object-card-min-width);
|
||||
max-width: var(--layout-object-card-max-width);
|
||||
height: var(--layout-object-card-height);
|
||||
}
|
||||
|
||||
.sg-object-card-grid.sg-object-card-grid--multi-row .sg-object-card {
|
||||
flex: 0 0 var(--layout-object-card-shared-width);
|
||||
width: var(--layout-object-card-shared-width);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card {
|
||||
width: var(--layout-object-card-mobile-width);
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: var(--layout-object-card-mobile-height);
|
||||
}
|
||||
|
||||
.sg-object-card[data-pattern="object-group-card"] {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-object-card__content {
|
||||
flex: var(--layout-object-card-content-grow) 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.sg-object-card__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sg-object-card__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sg-object-card__action {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Object Group Card */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-object-group-card__actions {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sg-object-card[data-pattern="object-group-card"] {
|
||||
flex: 1 1 var(--layout-object-group-card-min-width);
|
||||
min-width: var(--layout-object-group-card-min-width);
|
||||
max-width: var(--layout-object-group-card-max-width);
|
||||
}
|
||||
|
||||
.sg-object-group-card__hint {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-company-card__metric-negative {
|
||||
color: var(--text-company-card-data-negative);
|
||||
}
|
||||
|
||||
.sg-company-card__analysis-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-company-card__analysis-bars {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sg-company-card__moat-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.sg-company-card__moat-value {
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sg-company-card__moat-neutral {
|
||||
color: var(--text-company-card-moat-neutral);
|
||||
}
|
||||
|
||||
.sg-company-card__summary {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Navigation Card */
|
||||
/* ========================================================= */
|
||||
|
||||
@@ -0,0 +1,343 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Formular mit Abschnitten */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-form-sections-card {
|
||||
--layout-form-sections-label-column-width: var(--layout-input-label-width);
|
||||
--layout-form-sections-interaction-indent: calc(
|
||||
var(--layout-form-sections-label-column-width) + var(--spacing-large)
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: min(
|
||||
100%,
|
||||
calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
|
||||
);
|
||||
max-width: calc(
|
||||
var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-form-input-field-max-width)
|
||||
);
|
||||
}
|
||||
|
||||
.sg-form-sections-card-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__body {
|
||||
background: var(--surface-form-preview);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__title {
|
||||
margin: 0 0 var(--spacing-large) 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__actions-segment {
|
||||
background: var(--surface-form-preview);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__chapter + .sg-form-sections-card__chapter {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-form-sections-card__chapter-title,
|
||||
.sg-form-sections-card__sentence {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__sentence {
|
||||
margin-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-form-sections-card__option-group,
|
||||
.sg-form-sections-card__field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-form-sections-card .sg-labeled-input-row .sg-label {
|
||||
min-width: var(--layout-form-sections-label-column-width);
|
||||
flex: 0 0 var(--layout-form-sections-label-column-width);
|
||||
margin-right: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-form-sections-card__option-group,
|
||||
.sg-form-sections-card__actions {
|
||||
padding-left: var(--layout-form-sections-interaction-indent);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-form-sections-card__chapter-title + * {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-slider-row + .sg-slider-row,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-checkbox-field-option + .sg-checkbox-field-option,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-radio-activatable-group + .sg-radio-activatable-group {
|
||||
margin-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-pulldown-panel__row + .sg-pulldown-panel__row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
|
||||
--sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
||||
display: grid;
|
||||
grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider {
|
||||
opacity: var(--disabled-opacity);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider-value,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
|
||||
opacity: var(--disabled-opacity);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||
grid-column: 3;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||
grid-column: 4;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
|
||||
display: grid;
|
||||
grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
|
||||
grid-column: 2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle),
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle),
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > :not(.sg-mode-toggle) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
|
||||
grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr);
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
|
||||
opacity: var(--disabled-opacity);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - (2 * var(--spacing-large)));
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - (2 * var(--spacing-large)));
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
||||
grid-template-columns: max-content minmax(0, 1fr) auto;
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
row-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-form-sections-card__actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-small);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__action {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sg-navigation-card-layout {
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-navigation-card-block {
|
||||
--surface-card: var(--surface-navigation-card);
|
||||
--surface-card-body: var(--surface-navigation-card-body);
|
||||
display: block;
|
||||
flex: none;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-navigation-card-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sg-content-cards-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--layout-content-cards-group-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-form-sections-card .sg-labeled-input-row .sg-label {
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sg-form-sections-card__option-group,
|
||||
.sg-form-sections-card__actions {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: VSF List Card */
|
||||
/* ========================================================= */
|
||||
|
||||
#layout-vsf-list-card .sg-vsf-list-card-limit-note {
|
||||
margin: 0 0 var(--space-16) 0;
|
||||
color: var(--text-vsf-list-card-limit-note);
|
||||
}
|
||||
|
||||
#layout-vsf-list-card .sg-vsf-list-card__summary {
|
||||
margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-card-context[data-pattern="overlay-card"] {
|
||||
--layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Overlay Card */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-delete-confirmation-pattern {
|
||||
width: 100%;
|
||||
max-width: var(--layout-delete-confirmation-target-max-width);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__stage {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__host > .sg-delete-confirmation-pattern__target {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__target {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__target::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--surface-delete-confirmation-target-dim-overlay);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
|
||||
opacity: var(--layout-delete-confirmation-target-dim-opacity);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__floating-card {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
|
||||
box-sizing: border-box;
|
||||
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
|
||||
z-index: var(--layer-delete-confirmation-overlay);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__floating-card[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--layout-delete-confirmation-content-gap);
|
||||
background: var(--surface-delete-confirmation-overlay);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__text {
|
||||
margin: 0;
|
||||
color: var(--text-delete-confirmation-overlay);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__code {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__input-row {
|
||||
margin: var(--spacing-large) 0 0 0;
|
||||
}
|
||||
|
||||
.sg-delete-confirmation-pattern__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--layout-delete-confirmation-actions-gap);
|
||||
margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.sg-delete-confirmation-pattern__actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Notifications */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-notifications-pattern {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-small);
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Dokumentierte Pattern-Variante: Notifications innerhalb Group Card */
|
||||
.sg-notifications-pattern.sg-group-card > .sg-notifications-pattern__card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--spacing-small);
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-layout > .sg-group-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-mobile__panels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-mobile__panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-meldungen-layout {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-mobile {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment,
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment,
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
/* ========================================================= */
|
||||
/* Layouts: Card Listen Seite */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-card-list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--layout-card-list-drawer-width);
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 220ms ease;
|
||||
background: var(--surface-card-list-drawer);
|
||||
color: var(--text-card-list-drawer);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer[data-open="true"] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-small);
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline);
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer__title {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
padding:
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline)
|
||||
var(--card-segment-padding-vertical)
|
||||
var(--layout-page-content-inset-inline);
|
||||
}
|
||||
|
||||
.sg-card-list-page > * + * {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||
margin-top: calc(var(--spacing-large) - 0.5rem);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__title-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: min(60vw, 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-card-list-page-drawer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-card-list-page__object-grid,
|
||||
.sg-card-list-page__navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card {
|
||||
--surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
|
||||
--surface-card: var(--surface-vsf-drawer-object-card-body);
|
||||
--surface-card-body: var(--surface-vsf-drawer-object-card-body);
|
||||
--text-card-header: var(--text-vsf-drawer-object-card-heading);
|
||||
--text-card-body: var(--text-vsf-drawer-object-card-body);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card__content {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
|
||||
.sg-vsf-drawer-card .sg-text-layout-pattern__column {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
|
||||
gap: var(--layout-vsf-drawer-object-card-column-gap);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card__actions-segment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-large);
|
||||
background: var(--surface-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#vsf-business-model-toggle.sg-interaction-element.sg-button {
|
||||
background: var(--surface-portal-header-tab);
|
||||
color: var(--text-portal-header-tab);
|
||||
}
|
||||
|
||||
.sg-inline-controls-card {
|
||||
--surface-card-body: var(--surface-card-segment-neutral);
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-inline-header-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-inline-controls-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-small);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-object-card__heading {
|
||||
color: var(--text-vsf-drawer-object-card-heading);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-analysis-intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-analysis-intro-block .sg-heading-h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-analysis-intro-block .sg-text-layout-pattern__sample {
|
||||
margin: 0;
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Text Layouts */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-text-layout-pattern {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__preview-surface {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--spacing-large);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-text-layout-preview);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__sample {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__sample--full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__sample--sixty-width {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__sample--two-column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__two-column {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--layout-text-layout-two-column-columns);
|
||||
column-gap: var(--layout-text-layout-column-gap);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__three-column-distributed {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--layout-text-layout-three-column-columns);
|
||||
column-gap: var(--layout-text-layout-column-gap);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__column {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__three-column-distributed > .sg-body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__column--align-left {
|
||||
text-align: var(--text-align-text-layout-column-left);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__column--align-center {
|
||||
text-align: var(--text-align-text-layout-column-center);
|
||||
}
|
||||
|
||||
.sg-text-layout-pattern__column--align-right {
|
||||
text-align: var(--text-align-text-layout-column-right);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-text-layout-pattern__sample--sixty-width,
|
||||
.sg-text-layout-pattern__sample--two-column,
|
||||
.sg-text-layout-pattern__two-column,
|
||||
.sg-text-layout-pattern__three-column-distributed {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/* ========================================================= */
|
||||
/* Patterns: Card Gruppe mit Tastennavigation */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-content-block-card-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__tabs,
|
||||
.sg-content-block-card-group__panels,
|
||||
.sg-content-block-card-group__panel,
|
||||
.sg-content-block-card-group__card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__title {
|
||||
color: var(--text-content-block-card-title);
|
||||
background: var(--surface-content-block-card-title);
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__content {
|
||||
color: var(--text-content-block-card-content);
|
||||
background: var(--surface-content-block-card-content);
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__content .sg-body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
|
||||
flex: 1 1 auto;
|
||||
min-width: max-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/* ========================================================= */
|
||||
/* Layouts: VSF List Detailseite */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-vsf-list-detail-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > * + * {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: min(60vw, 100%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
width: 30%;
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__right-column {
|
||||
width: 70%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card > .sg-card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
|
||||
top: calc(var(--spacing-large) * 5);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__right-column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card,
|
||||
.sg-vsf-list-detail-page__right-column .sg-group-card {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* ========================================================= */
|
||||
/* Layouts: VSF Listen Übersicht Seite V2 */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-vsf-list-overview-page-v2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2 > * + * {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2 .sg-portal-header-pattern-variant {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2 > .sg-vsf-list-overview-page-v2__intro {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__content {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__primary {
|
||||
width: 70%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__secondary {
|
||||
width: 30%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__intro .sg-text-layout-pattern__sample--sixty-width {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-list-overview-page-v2__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__primary,
|
||||
.sg-vsf-list-overview-page-v2__secondary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-overview-page-v2__secondary {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
/* ========================================================= */
|
||||
/* Components: Cards */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-card {
|
||||
--layout-card-segment-padding-top: var(--card-segment-padding-vertical);
|
||||
--layout-card-segment-padding-right: var(--card-segment-padding-horizontal);
|
||||
--layout-card-segment-padding-bottom: var(--card-segment-padding-vertical);
|
||||
--layout-card-segment-padding-left: var(--card-segment-padding-horizontal);
|
||||
--layout-card-body-padding-top: var(--layout-card-segment-padding-top);
|
||||
--layout-card-body-padding-right: var(--layout-card-segment-padding-right);
|
||||
--layout-card-body-padding-bottom: var(--layout-card-segment-padding-bottom);
|
||||
--layout-card-body-padding-left: var(--layout-card-segment-padding-left);
|
||||
--layout-card-body-text-margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: var(--border-none);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-none);
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.sg-card.sg-card--overlay-host {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sg-card > .sg-card-segment:first-child {
|
||||
border-top-left-radius: var(--radius-card);
|
||||
border-top-right-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.sg-card > .sg-card-segment:last-child {
|
||||
border-bottom-left-radius: var(--radius-card);
|
||||
border-bottom-right-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
:root {
|
||||
--card-segment-padding-horizontal: var(--card-segment-padding-horizontal-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
.sg-card-segment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
padding:
|
||||
var(--layout-card-segment-padding-top)
|
||||
var(--layout-card-segment-padding-right)
|
||||
var(--layout-card-segment-padding-bottom)
|
||||
var(--layout-card-segment-padding-left);
|
||||
gap: var(--layout-card-segment-content-gap);
|
||||
}
|
||||
|
||||
.sg-card-segment--header {
|
||||
color: var(--text-card-header);
|
||||
}
|
||||
|
||||
.sg-card-segment--body {
|
||||
justify-content: var(--layout-card-body-content-justify);
|
||||
padding:
|
||||
var(--layout-card-body-padding-top)
|
||||
var(--layout-card-body-padding-right)
|
||||
var(--layout-card-body-padding-bottom)
|
||||
var(--layout-card-body-padding-left);
|
||||
color: var(--text-card-body);
|
||||
background: var(--surface-card-body);
|
||||
}
|
||||
|
||||
.sg-card-segment--body > .sg-body {
|
||||
margin: var(--layout-card-body-text-margin, 0);
|
||||
}
|
||||
|
||||
.sg-card-segment--body.sg-object-card__content > .sg-body.sg-company-card__summary {
|
||||
margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
|
||||
}
|
||||
|
||||
.sg-card-segment--darkblue {
|
||||
background: var(--surface-card-header-primary);
|
||||
}
|
||||
|
||||
.sg-card-segment--darkgreen {
|
||||
background: var(--surface-card-header-alternative);
|
||||
}
|
||||
|
||||
.sg-card-segment--darkbrown {
|
||||
background: var(--surface-card-header-muted);
|
||||
}
|
||||
|
||||
.sg-card-segment--signal-red {
|
||||
background: var(--color-signal-red);
|
||||
color: var(--text-card-header);
|
||||
}
|
||||
|
||||
.sg-card-segment--signal-green {
|
||||
background: var(--color-signal-green);
|
||||
color: var(--text-card-header);
|
||||
}
|
||||
|
||||
.sg-card-segment--signal-yellow {
|
||||
background: var(--color-signal-yellow);
|
||||
color: var(--text-card-header);
|
||||
}
|
||||
|
||||
.sg-card-segment--gray {
|
||||
background: var(--surface-card-segment-neutral);
|
||||
}
|
||||
|
||||
.sg-card-segment--white {
|
||||
background: var(--surface-object-card-lower-segment);
|
||||
}
|
||||
|
||||
.sg-card.sg-card--notification-white {
|
||||
--text-card-header: var(--text-card-body);
|
||||
}
|
||||
|
||||
.sg-card--content-card {
|
||||
--surface-card-header-primary: var(--surface-content-block-card-title);
|
||||
--surface-card-body: var(--surface-content-block-card-content);
|
||||
--text-card-header: var(--text-content-block-card-title);
|
||||
--text-card-body: var(--text-content-block-card-content);
|
||||
}
|
||||
|
||||
.sg-card-segment + .sg-card-segment {
|
||||
box-shadow: inset 0 1px 0 var(--divider-card-segment);
|
||||
}
|
||||
|
||||
.sg-card-segment--darkbrown + .sg-card-segment--body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-object-card__header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sg-card-segment--body.sg-object-card__content {
|
||||
background: var(--surface-object-card-lower-segment);
|
||||
}
|
||||
|
||||
.sg-card-segment--body.sg-object-card__actions-segment {
|
||||
background: var(--surface-object-card-lower-segment);
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-vsf-drawer-card__actions-segment {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-group-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-small);
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--spacing-small);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-card-group);
|
||||
}
|
||||
|
||||
.sg-group-card > .sg-card {
|
||||
flex: 1 1 calc(50% - var(--spacing-small));
|
||||
width: calc(50% - var(--spacing-small));
|
||||
}
|
||||
|
||||
.sg-group-card--margin-after-large {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-group-card__header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-group-card__heading {
|
||||
flex: 0 0 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-left: var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-group-card__header-row .sg-group-card__heading {
|
||||
flex: 1 1 auto;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-group-card__header-row .sg-sandwich-menu-wrap {
|
||||
margin-right: var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-page-cards .sg-preview-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-page-cards .sg-preview-area > .sg-card,
|
||||
.sg-page-cards .sg-preview-area > .sg-transparent-card {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-page-cards .sg-group-card > .sg-card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-transparent-card {
|
||||
color: var(--text-card-transparent);
|
||||
background: var(--surface-card-transparent);
|
||||
padding:
|
||||
0
|
||||
var(--card-segment-padding-horizontal)
|
||||
0
|
||||
var(--card-segment-padding-horizontal);
|
||||
}
|
||||
|
||||
.sg-transparent-card p {
|
||||
margin: 0;
|
||||
color: var(--text-card-transparent);
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
/* ========================================================= */
|
||||
/* Components: Charts */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-score-bar-list {
|
||||
display: grid;
|
||||
grid-template-columns: var(--layout-score-bar-item-columns);
|
||||
column-gap: var(--layout-score-bar-item-gap);
|
||||
row-gap: var(--spacing-small);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-score-bar-item {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.sg-score-bar-list--single-score {
|
||||
--layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns);
|
||||
}
|
||||
|
||||
.sg-score-state--positive,
|
||||
.sg-score-state--neutral,
|
||||
.sg-score-state--negative {
|
||||
margin: 0;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sg-score-state--positive {
|
||||
color: var(--text-score-state-positive);
|
||||
}
|
||||
|
||||
.sg-score-state--neutral {
|
||||
color: var(--text-score-state-neutral);
|
||||
}
|
||||
|
||||
.sg-score-state--negative {
|
||||
color: var(--text-score-state-negative);
|
||||
}
|
||||
|
||||
.sg-score-bar-label {
|
||||
margin: 0;
|
||||
color: var(--text-chart-default);
|
||||
}
|
||||
|
||||
.sg-score-bar {
|
||||
position: relative;
|
||||
height: var(--score-bar-height);
|
||||
overflow: visible;
|
||||
border-radius: var(--radius-graph-bar);
|
||||
background: var(--surface-score-bar-track);
|
||||
}
|
||||
|
||||
.sg-score-bar--marker-mid {
|
||||
--score-marker-position: 50%;
|
||||
}
|
||||
|
||||
.sg-score-bar__value {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-graph-bar);
|
||||
}
|
||||
|
||||
.sg-score-bar__value--w96 { width: 96%; }
|
||||
.sg-score-bar__value--w64 { width: 64%; }
|
||||
.sg-score-bar__value--w35 { width: 35%; }
|
||||
|
||||
.sg-score-bar__value--positive { background: var(--chart-value-positive); }
|
||||
.sg-score-bar__value--neutral { background: var(--chart-value-neutral); }
|
||||
.sg-score-bar__value--negative { background: var(--chart-value-negative); }
|
||||
|
||||
.sg-score-bar__median-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--score-marker-position);
|
||||
width: var(--score-marker-width);
|
||||
height: var(--score-marker-height);
|
||||
border-radius: 0;
|
||||
background: var(--chart-marker-line);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.sg-score-bar__median-marker--outline {
|
||||
border: var(--chart-grid-line-width) solid var(--chart-marker-line);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sg-chart-preview-area {
|
||||
min-width: var(--layout-object-card-min-width);
|
||||
max-width: var(--layout-object-card-max-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-bar-chart {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
background: var(--surface-chart-area);
|
||||
color: var(--text-chart-default);
|
||||
}
|
||||
|
||||
.sg-chart-frame {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
column-gap: var(--chart-axis-label-gap);
|
||||
height: calc(var(--chart-height-bar) * 0.7);
|
||||
}
|
||||
|
||||
.sg-chart-y-labels {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: var(--text-chart-default);
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-chart-y-labels li {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
right: 0;
|
||||
top: var(--chart-label-position);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.sg-chart-x-labels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
margin: var(--spacing-small) 0 var(--spacing-large) 0;
|
||||
padding: 0 0 0 calc(var(--interaction-height) + var(--chart-axis-label-gap));
|
||||
list-style: none;
|
||||
color: var(--text-chart-default);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sg-chart-x-labels--line {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: var(--spacing-large);
|
||||
grid-template-columns: none;
|
||||
}
|
||||
|
||||
.sg-chart-x-labels--line li {
|
||||
position: absolute;
|
||||
left: var(--chart-label-position);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-chart-y-labels li,
|
||||
.sg-chart-x-labels li {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-bar-chart__svg,
|
||||
.sg-line-chart__svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sg-bar-chart__grid-line,
|
||||
.sg-line-chart__grid-line {
|
||||
stroke: var(--chart-grid-line);
|
||||
stroke-width: var(--chart-grid-line-width);
|
||||
}
|
||||
|
||||
.sg-bar-chart__axis-line,
|
||||
.sg-line-chart__axis-line {
|
||||
stroke: var(--chart-axis-line);
|
||||
stroke-width: var(--chart-grid-line-width);
|
||||
}
|
||||
|
||||
.sg-bar-chart__bar {
|
||||
rx: var(--radius-graph-bar);
|
||||
ry: var(--radius-graph-bar);
|
||||
}
|
||||
|
||||
.sg-bar-chart__bar--value { fill: var(--chart-value-primary); }
|
||||
.sg-bar-chart__bar--median { fill: var(--chart-value-reference); }
|
||||
.sg-bar-chart__label,
|
||||
.sg-line-chart__label { display: none; }
|
||||
|
||||
.sg-bar-chart__legend,
|
||||
.sg-line-chart__legend {
|
||||
display: flex;
|
||||
gap: var(--spacing-large);
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sg-bar-chart__legend {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0;
|
||||
color: var(--text-chart-default);
|
||||
}
|
||||
|
||||
.sg-line-chart__legend {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-bar-chart__legend-item,
|
||||
.sg-line-chart__legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
color: var(--text-chart-default);
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.sg-bar-chart__legend-swatch {
|
||||
display: inline-block;
|
||||
width: var(--interaction-height);
|
||||
height: var(--interaction-height);
|
||||
border-radius: var(--radius-interaction);
|
||||
}
|
||||
|
||||
.sg-bar-chart__legend-swatch--value { background: var(--chart-value-primary); }
|
||||
.sg-bar-chart__legend-swatch--median { background: var(--chart-value-reference); }
|
||||
|
||||
.sg-line-chart {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
background: var(--surface-chart-area);
|
||||
color: var(--text-chart-default);
|
||||
}
|
||||
|
||||
.sg-chart-frame--line {
|
||||
height: calc(var(--chart-height-line) * 0.7);
|
||||
}
|
||||
|
||||
.sg-line-chart__line {
|
||||
fill: none;
|
||||
stroke: var(--chart-value-primary);
|
||||
stroke-width: var(--chart-line-width);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.sg-line-chart__median-line {
|
||||
fill: none;
|
||||
stroke: var(--chart-median-line);
|
||||
stroke-width: var(--chart-grid-line-width);
|
||||
stroke-dasharray: var(--sandwich-line-height) var(--sandwich-line-height);
|
||||
}
|
||||
|
||||
.sg-line-chart__legend-line {
|
||||
display: inline-block;
|
||||
width: var(--spacing-large);
|
||||
height: var(--chart-line-width);
|
||||
background: var(--chart-value-primary);
|
||||
}
|
||||
|
||||
.sg-line-chart__legend-line--median {
|
||||
height: var(--chart-grid-line-width);
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--chart-median-line) 0,
|
||||
var(--chart-median-line) var(--sandwich-line-height),
|
||||
transparent var(--sandwich-line-height),
|
||||
transparent calc(var(--sandwich-line-height) * 2)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ========================================================= */
|
||||
/* Components: Data Display */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-data-table {
|
||||
--data-table-column-count: 3;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface-data-table);
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.sg-data-table th,
|
||||
.sg-data-table td {
|
||||
width: calc(100% / var(--data-table-column-count));
|
||||
padding: 0 0 var(--spacing-small) 0;
|
||||
border: var(--border-none);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sg-data-table[data-component="data-columns"] {
|
||||
--data-table-column-count: 2;
|
||||
}
|
||||
|
||||
.sg-data-table th {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-data-table-default);
|
||||
background: var(--surface-data-table-header);
|
||||
}
|
||||
|
||||
.sg-data-table td {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-data-table-default);
|
||||
background: var(--surface-data-table-cell);
|
||||
}
|
||||
|
||||
.sg-data-table__label,
|
||||
.sg-data-table__value {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sg-data-table__value--warning {
|
||||
color: var(--text-data-table-warning);
|
||||
}
|
||||
|
||||
.sg-data-table__help-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--small-interaction-element-size);
|
||||
height: var(--small-interaction-element-size);
|
||||
border: var(--border-none);
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow-none);
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1;
|
||||
color: var(--text-data-table-help-icon);
|
||||
background: var(--surface-data-table-help-icon);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
/* ========================================================= */
|
||||
/* Components: Typography */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-typography-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
color: var(--text-typography-preview);
|
||||
}
|
||||
|
||||
.sg-typography-preview h1,
|
||||
.sg-typography-preview h2,
|
||||
.sg-typography-preview p {
|
||||
color: var(--text-typography-preview);
|
||||
margin-top: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user