diff --git a/docs/styleguide/.gitignore b/docs/styleguide/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/docs/styleguide/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/docs/styleguide/VERSION b/docs/styleguide/VERSION new file mode 100644 index 0000000..b2580f2 --- /dev/null +++ b/docs/styleguide/VERSION @@ -0,0 +1 @@ +2026.05.18.1 diff --git a/docs/styleguide/components/cards.html b/docs/styleguide/components/cards.html new file mode 100644 index 0000000..dffb174 --- /dev/null +++ b/docs/styleguide/components/cards.html @@ -0,0 +1,212 @@ + + + + + + Styleguide – Cards + + + + +

Components – Cards

+ + + + + + + + + + +
+

Component: Cards

+ +
+ +
+
+
Card 1
+
+ +
+

+ Standard Card mit Header und hellem Body-Segment. +

+
+
+ +
+
+
Card 2
+
+ +
+

+ Alternative Farbvariante des Header-Segments. +

+
+
+ +
+
+
Card 3
+
+ +
+

+ Kein weißer Trenner zwischen darkbrown und hellem Segment. +

+
+
+ +
+
+ + +
+

Component: Content Card

+ +
+ +
+
+
Content Card
+
+ +
+

+ 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. +

+
+
+ +
+
+ + +
+

Component: Group Card

+ +
+ +
+
+
Card in Group
+
+ +
+

+ Group Cards bündeln mehrere zusammengehörige Cards. +

+
+
+ +
+
+
Weitere Card
+
+ +
+

+ Die Group Card ist eine eigenständige Component. +

+
+
+ +
+ +

Variante: Group Card mit H2 Überschrift

+ +
+
+

Gruppenüberschrift

+
+ +
+ Gruppenüberschrift anpassen +
+
+
+ +
+
+
Card in Group
+
+ +
+

+ Group Cards bündeln mehrere zusammengehörige Cards. +

+
+
+ +
+
+
Weitere Card
+
+ +
+

+ Die Group Card enthält hier zusätzlich eine H2-Überschrift. +

+
+
+ +
+
+ + +
+

Component: Multisegment Card

+ +
+ +
+
+
Multisegment Card
+
+ +
+

Erstes graues Segment mit Textinhalt.

+
+ +
+

Zweites graues Segment mit Textinhalt.

+
+ +
+

Erstes weißes Segment.

+
+ +
+

Zweites weißes Segment.

+
+
+ +
+
+ + +
+

Component: Transparent Card

+ +
+ +
+

+ Transparente Card mit standardisiertem Card-Padding. +

+
+ +
+
+ + + diff --git a/docs/styleguide/components/charts.html b/docs/styleguide/components/charts.html new file mode 100644 index 0000000..881e73f --- /dev/null +++ b/docs/styleguide/components/charts.html @@ -0,0 +1,65 @@ + + + + + + Styleguide – Charts + + + + +

Components – Charts

+ +
+

Component: Score-Balken / Median-Marker

+ +
+
+
+

Äpfel

+
+
+
+
+
+ +
+

Birnen

+
+
+
+
+
+ +
+

Zitronen

+
+
+
+
+
+
+
+
+ +
+

Component: Gesamtscore-Balken

+ +
+
+
+

Score:

+
+
+
+
+

attraktiv

+
+
+
+
+ + + + + diff --git a/docs/styleguide/components/data-display.html b/docs/styleguide/components/data-display.html new file mode 100644 index 0000000..40e86b3 --- /dev/null +++ b/docs/styleguide/components/data-display.html @@ -0,0 +1,76 @@ + + + + + + Styleguide – Data Display + + + + +

Components – Data Display

+ + + + + + +
+ +

Component: Data Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
KennzahlWertPeer-Median
PE ?7.711.7
PE Forward ?8.69.7
PEG Forward ?1.231.43
+ +
+ + +
+ +

Component: Data Columns

+ + + + + + + + + + + + + + + + +
7.711.7
8.69.7
1.231.43
+ +
+ + + diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html new file mode 100644 index 0000000..d9dce58 --- /dev/null +++ b/docs/styleguide/components/interactive-elements.html @@ -0,0 +1,1218 @@ + + + + + + Styleguide – Interactive Elements + + + + +

Components – Interactive Elements

+

+ Formular-Layout-Regel: Wenn Pulldowns, Slider, Radio-Felder, Checkbox-Felder oder Eingabefelder direkt untereinander als Gruppe dargestellt werden, nutzen alle Zeilen dieselbe Label-Spaltenbreite und denselben horizontalen Abstand zwischen Label und Interaktionselement. Auf Mobile erfolgt der Umbruch komponentenspezifisch in eine einspaltige Darstellung. +

+ + + + + + +
+

Component: Prozessbutton

+ +
+ + + +
+
+ + +
+

Component: Tasten-Navigation-gross

+ +
+ + + + + +
+
+ + +
+

Component: Tasten-Navigation-gross in content

+ +
+ + + + + +
+
+ + +
+

Component: Tasten-Navigation-schmal

+ +
+ + + + +
+
+ + +
+

Component: Pulldown

+ + +
+
+

Komponente normal

+ +
+ Label +
+ + + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+
+
+ +
+

Variante aktivierbar

+ +
+
+ + Label +
+ +
+ + + + + +
+ + +
+ + + + + +
+
+
+
+
+ +
+

form-disabled

+ +
+ +
+

Variante ohne Label

+
+
+ +
+
+
+
+ +
+ + + +
+

Component: Suchfeld

+ + +
+
+

form-inactive-selectable

+ + + + + + 0 Treffer + +
+ +
+

form-active / selected

+ + + + + + 12 Treffer + +
+ +
+

form-disabled

+ + + +
+
+
+ + +
+

Component: Eingabefeld einzeilig

+ +
+
+

form-inactive-selectable

+ +
+ +
+

form-active / selected

+ +
+ +
+

form-disabled

+ +
+ +
+

Variante ohne Label

+
+ +
+
+
+
+ + +
+

Component: Eingabefeld mehrzeilig

+ +
+
+

form-inactive-selectable

+ +
+ +
+

form-active / selected

+ +
+ +
+

form-disabled

+ +
+ +
+

Variante ohne Label

+
+ +
+
+
+
+ + +
+

Component: Kreuzchenfeld / Multiple Choice

+ + +
+ + +
+ Variante aktivierbar + + + Option wählbar +
+ + +
+
+ + +
+

Component: Radio Button / Single Choice

+ + +
+ + +
+ Variante aktivierbar + + + Label + + + + Option 1 + + + + Option 2 + + + +
+ + + +
+ Variante ohne Gesamtlabel + + + + + Radio 1 + + + + Radio 2 + + + +
+
+
+ + +
+

Component: Modus Schieber global

+ + +
+ + +
+

Component: Modus Schieber lokal

+ + +
+ + +
+

Component: Aktivierungs-Schalter (an/aus)

+ +
+ +
+
+ + +
+

Component: Slider

+ +
+
+

Komponente normal

+ +
+ +
+

Variante aktivierbar

+
+ + + Wert + + +
+
+
+
+ + +
+

Component: Sandwich-Menü-Button Portal (groß)

+ +
+
+ + +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+ +

Component: Sandwich-Menü-Button Objekt (klein)

+ +
+
+ + +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+ + +
+

Component: Fragezeichen-Icon

+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+ + + + + + + + + + diff --git a/docs/styleguide/components/typography.html b/docs/styleguide/components/typography.html new file mode 100644 index 0000000..5e6b8b0 --- /dev/null +++ b/docs/styleguide/components/typography.html @@ -0,0 +1,30 @@ + + + + + + Styleguide – Typography + + + + +

Components – Typography

+ +
+

Component: Typography

+ +
+

Portal Titel

+

H1 Überschrift

+

H2 Überschrift

+

Body / Fließtext

+

Strong / hervorgehobener Text

+

Section Title

+

Bar Label

+

Table Label

+

Table Value

+
+
+ + + diff --git a/docs/styleguide/docs/portal_sync_flow.md b/docs/styleguide/docs/portal_sync_flow.md new file mode 100644 index 0000000..49c8541 --- /dev/null +++ b/docs/styleguide/docs/portal_sync_flow.md @@ -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 diff --git a/docs/styleguide/docs/skill-styleguide-anwendung.md b/docs/styleguide/docs/skill-styleguide-anwendung.md new file mode 100644 index 0000000..015a6b2 --- /dev/null +++ b/docs/styleguide/docs/skill-styleguide-anwendung.md @@ -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. diff --git a/docs/styleguide/docs/styleguide-integration-strategy.md b/docs/styleguide/docs/styleguide-integration-strategy.md new file mode 100644 index 0000000..4aeb4b0 --- /dev/null +++ b/docs/styleguide/docs/styleguide-integration-strategy.md @@ -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. diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html new file mode 100644 index 0000000..df5d6a1 --- /dev/null +++ b/docs/styleguide/foundations.html @@ -0,0 +1,211 @@ + + + + + + Styleguide – Foundations + + + + +

Foundations

+ +
+

Colors

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
darkblue#4661A9Primäre Card-Kopfsegmente, Portalheader, Toggle-Handle sowie primäre Chart-Werte ohne Positiv-Negativ-Darstellung.
darkgreen#4D646EAlternative Card-Kopfsegmente.
darkbrown#665F57Gedämpfte alternative Card-Kopfsegmente.
light-grey#E2E5E9Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe.
medium-grey#D4D6DBAktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern.
dark-grey#7B879DAusgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente.
black#000000Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.
white#FFFFFFStandardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.
signal-green#009101Positive Score-Balken und positive Chart-Werte.
signal-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.
signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte.
font-dark#414959Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.
font-light#FFFFFFSchrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.
font-hyperlink#FF6900Links in Texten, Prozessbuttons und Page-Navigations-Cards.
process-inactive#FFAE79Inaktive Hintergrundfläche des Prozessbuttons.
background-purple#373C4AGlobaler Portalhintergrund.
background-purple-light#656C7DGroup Cards und gruppierende Card-Flächen.
transparenttransparentTransparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.
+
+ +
+

States

+ + + + + + + + + + + + + + + + +
NameWertVerwendung
form-areabackground: light-greyHintergrund von Formularbereichen, Optionszeilen und Formular-Preview-Flächen. Die Fläche gehört nicht zum einzelnen Formularelement.
form-activebackground: white; color: font-darkAktive oder ausgewählte Eingabefelder, Checkboxen, Radios, Pulldown-Trigger und Pulldown-Optionen. Bei Pulldowns zeigt die Zahl in Klammern die Anzahl gewählter Optionen.
form-inactive-selectablebackground: white; color: font-darkNicht aktive, aber auswählbare Formularfelder, Checkboxen, Radios und Pulldown-Trigger. Dieser Zustand nutzt keine Transparenz.
form-disabledbackground: white; color: dark-grey; opacity: disabled-opacityFachlich nicht verfügbare oder technisch deaktivierte Formularoptionen. Dieser Zustand ist nicht bedienbar.
pulldown-panel-openbackground: medium-greyGeö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.
overlay-panel-openbackground: medium-grey oder light-grey je nach KomponenteAusklappbare Overlays wie Pulldown-Panels, Hilfetexte und Sandwich-Menüs. Es ist immer nur das jeweils relevante Overlay geöffnet.
+
+ +
+

Typography

+ + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
bodyOpen Sans, 1rem, RegularStandardtext im Portal.
brandOpen Sans, 1.6rem, RegularPortal-Brand im Portal Header.
h1Open Sans, 1.5rem, RegularHauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext.
h2Open Sans, 1.25rem, RegularZwischenüberschriften; kleiner als H1 und 25% größer als Fließtext.
strongOpen Sans, 1rem, SemiboldHervorgehobener Text, Labels und Button-Text.
section-titleOpen Sans, 1rem, RegularSection-Titel; aktuell identisch mit body, aber separat benannt.
bar-labelOpen Sans, 1rem, SemiboldLabels bei Score-Balken.
table-labelOpen Sans, 0.8rem, RegularTabellen- und Grafikbeschriftungen sowie kurze Hilfetexte und Tooltip-Inhalte.
table-valueOpen Sans, 0.8rem, SemiboldHervorgehobene Tabellen- und Grafikwerte.
+
+ +
+

Naurua Overrides

+ + + + + + + + + + + +
PortalAbweichungVerwendung
NAURUAdarkblue → #354A52; body → Avenir, sans-serifPortalgebundene Foundation-Overrides für das zweite Portal. Die Überschreibung greift nur, wenn das Root-Element `data-portal="naurua"` setzt.
+
+ +
+

Spacing

+ + + + + + + + + + + + + + +
NameWertVerwendung
spacing-small0.3remKleine Abstände zwischen Interaktionselementen, Card-Segmenten, Pulldown-Optionen, Overlay-Triggern und eng zusammengehörigen Cards.
spacing-large1remGroße Abstände zwischen Cards und Gruppen.
card-segment-padding0.75rem vertikal / 1rem horizontal (Desktop), 0.5rem horizontal (Mobile)Innenabstand von Card-Segmenten; auf Mobile wird das horizontale Padding reduziert.
interaction-padding0.25rem vertikal / 1rem horizontalInnenabstand von Interaktionselementen.
+
+ +
+

Dimensions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
interaction-height2remEinheitliche Höhe für Buttons, Tabs, Pulldowns, Eingabefelder und Sandwich-Menü-Buttons.
compact-interaction-height1.5remEinheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal.
compact-interaction-padding0.15rem vertikal / 0.75rem horizontalInnenabstand schmaler Interaktionselemente.
small-interaction-element-size1.25remEigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons.
disabled-opacity0.45Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.
sandwich-line-width1.25remLänge der Striche im Sandwich-Menü-Button.
sandwich-line-height4pxDicke der Striche im Sandwich-Menü-Button.
sandwich-line-gap3pxAbstand zwischen den Strichen im Sandwich-Menü-Button.
score-bar-height1remHöhe horizontaler Score-Balken.
score-marker-width6pxBreite des Median-Markers.
score-marker-heightscore-bar-height + 2pxMedian-Marker ragt oben und unten je 1px über den Score-Balken hinaus.
chart-height-bar24remBasis-Höhe für Bar Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.
chart-height-line18remBasis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.
chart-axis-label-column-width4remBreite der Y-Achsenbeschriftungsspalte bei Charts.
chart-axis-label-gap5pxHorizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.
chart-grid-line-width1pxLinienstärke von Gridlines und Achsen in Charts.
chart-line-width2pxLinienstärke der Datenlinie im Line Chart.
input-label-width9remDesktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.
input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.
input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).
object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).
object-group-card-min-width550pxMindestbreite der Group Card im Pattern Object Group Card.
object-group-card-max-width800pxMaximale Breite der Group Card im Pattern Object Group Card.
notifications-card-min-width445pxMindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.
search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.
layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.
multiselect-pulldown-panel-desktop-width500pxReservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.
multiselect-pulldown-panel-mobile-width80vwReservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.
options-row-mode-toggle-width7remBreite des Modus-Schiebers in der Options Row.
options-row-help-panel-width16remBreite des Help-Panels in der Options Row.
card-list-drawer-width40%Relative Breite des ausziehbaren Card-Listenbereichs.
notifications-text-segment-fixed-height150pxDesktop-Höhe des ersten Text-Segments im Standard-Pattern Notifications.
notifications-text-segment-fixed-height-small80pxDesktop-Höhe des ersten Text-Segments in der Variante Pattern Notifications small.
+
+ +
+

Radius

+ + + + + + + + + + + + + +
NameWertVerwendung
radius-card8pxCards, Group Cards, Formularflächen, Optionszeilen und geöffnete Overlay-Flächen.
radius-interaction4pxButtons, Eingabefelder, Pulldown-Trigger, Checkboxen und Modus-Schieber.
radius-graph-bar2pxScore-Balken und Graphik-Balken.
+
+ +
+

Shadows / Borders

+ + + + + + + + + + + + + +
NameWertVerwendung
shadow-nonenoneKein Schatten für nicht-overlay Flächen.
shadow-overlay0 10px 24px rgba(0, 0, 0, 0.22)Standard-Schatten für aufklappbare Flächen wie Pulldown-, Menü- und Help-Panels.
border-nonenoneEs werden keine Borders verwendet.
+
+ + + diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html new file mode 100644 index 0000000..e24fd7d --- /dev/null +++ b/docs/styleguide/index.html @@ -0,0 +1,82 @@ + + + + + + Portal Styleguide + + + + +
+ +

Portal Styleguide

+ +
+

Foundations

+ + +
+ +
+

Components

+ + +
+ +
+

Patterns

+ + +
+ +
+

Layouts

+ +

Generische Layouts

+ + +

Valuestockfinder Layouts

+ +
+ +
+ + + diff --git a/docs/styleguide/patterns/card-gruppe-mit-tastennavigation.html b/docs/styleguide/patterns/card-gruppe-mit-tastennavigation.html new file mode 100644 index 0000000..fe7b369 --- /dev/null +++ b/docs/styleguide/patterns/card-gruppe-mit-tastennavigation.html @@ -0,0 +1,243 @@ + + + + + + Styleguide – Pattern Card Gruppe mit Tastennavigation + + + + +

Pattern – Card Gruppe mit Tastennavigation

+
+

Pattern: Card Gruppe mit Tastennavigation

+ +
+
+ + + + + + + +
+ +
+
+
+
+
+
Card 1.1
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+
Card 1.2
+
+
+

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+
+
Card 1.3
+
+
+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+
+
+ + + + + + + + + + + + +
+
+
+ + + + + diff --git a/docs/styleguide/patterns/card-listen-fundamentalanalyse-mobile.html b/docs/styleguide/patterns/card-listen-fundamentalanalyse-mobile.html new file mode 100644 index 0000000..f2bbeee --- /dev/null +++ b/docs/styleguide/patterns/card-listen-fundamentalanalyse-mobile.html @@ -0,0 +1,69 @@ + + + + + + Styleguide – Card Listen Seite Fundamentalanalyse Mobile + + + + +

Layout – Fundamentalanalyse Mobile

+ +
+
+
+ +
+
+ +
+
+
+
Box 1
+
+
+

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.

+
+
+ +
+
+
Box 2
+
+
+

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.

+
+
+ +
+
+
Box 3
+
+
+

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.

+
+
+
+ +
+
+ +
+
+
+ + + diff --git a/docs/styleguide/patterns/card-listen-seite.html b/docs/styleguide/patterns/card-listen-seite.html new file mode 100644 index 0000000..85c4e25 --- /dev/null +++ b/docs/styleguide/patterns/card-listen-seite.html @@ -0,0 +1,1034 @@ + + + + + + Styleguide – Layout Card Listen Seite + + + + +

Layout – Card Listen Seite

+ +
+
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +
+
+

Listenübersicht

+ + + + Hilfe zur Listenansicht und zu den Filteroptionen. + + +
+

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.

+
+ +
+
+
+
Objekt 1
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 2
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 3
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 4
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 5
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 6
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 7
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 8
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 9
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 10
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 11
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 12
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 13
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 14
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 15
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 16
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 17
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 18
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 19
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+
+
Objekt 20
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+
+
+ + +
+
+
+
+ +
+
+ +
+
+
+ + + + + + + + diff --git a/docs/styleguide/patterns/company-card.html b/docs/styleguide/patterns/company-card.html new file mode 100644 index 0000000..a3723fe --- /dev/null +++ b/docs/styleguide/patterns/company-card.html @@ -0,0 +1,162 @@ + + + + + + Styleguide – Layout Company Card + + + + +

Layout – Company Card

+
+

Layout: Company Card

+

Dieses Layout basiert auf der Object Card und zeigt initial eine einzelne Company Card Instanz.

+ +
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+
+

+ PE: 28.8 +

+

+ PE forw.: 23.3 +

+

+ PEG: 3.54 +

+
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+ +
+
+
+ + + + + diff --git a/docs/styleguide/patterns/content-cards-group.html b/docs/styleguide/patterns/content-cards-group.html new file mode 100644 index 0000000..621f2fc --- /dev/null +++ b/docs/styleguide/patterns/content-cards-group.html @@ -0,0 +1,48 @@ + + + + + + Styleguide – Pattern Content Cards Group + + + + +

Pattern – Content Cards Group

+
+

Pattern: Content Cards Group

+ +
+
+
+
+
Box 1
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.

+
+
+ +
+
+
Box 2
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.

+
+
+ +
+
+
Box 3
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.

+
+
+
+
+
+ + + diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html new file mode 100644 index 0000000..44e25a2 --- /dev/null +++ b/docs/styleguide/patterns/delete-confirmation-overlay.html @@ -0,0 +1,199 @@ + + + + + + Styleguide – Pattern Overlay Card + + + + +

Pattern - Overlay Card

+ +
+

Pattern: Overlay Card

+ +
+
+
+
Alcon Inc.
+
+ +
+ Objekt löschen +
+
+
+
+

Objekt-Inhalt der Card. Während das Löschfenster sichtbar ist, wird dieses Objekt um 50% ausgegraut.

+
+
+
+ + +
+
+
+ + +
+
+ + + + + diff --git a/docs/styleguide/patterns/formular-mit-abschnitten.html b/docs/styleguide/patterns/formular-mit-abschnitten.html new file mode 100644 index 0000000..ac6e0dd --- /dev/null +++ b/docs/styleguide/patterns/formular-mit-abschnitten.html @@ -0,0 +1,177 @@ + + + + + + Styleguide – Pattern Formular mit Abschnitten + + + + +

Pattern – Formular mit Abschnitten

+
+

Pattern: Formular mit Abschnitten

+ +
+
+
+

Formular

+ +
+

Persoenliche Auswahl

+ +

Bitte waehlen Sie Ihre bevorzugte Kontaktart fuer die Rueckmeldung.

+ +
+ + + +
+
+ +
+

Optionale Angaben

+ +

Bitte markieren Sie die zusaetzlichen Informationen, die wir beruecksichtigen sollen.

+ +
+ + + +
+
+ +
+

Freitext und Details

+ +

Bitte erfassen Sie einen kurzen Betreff und eine genauere Beschreibung Ihres Anliegens.

+ +
+ + + +
+
+
+ + +
+
+
+ + + + + diff --git a/docs/styleguide/patterns/multiselektions-pulldown.html b/docs/styleguide/patterns/multiselektions-pulldown.html new file mode 100644 index 0000000..6d0e1f1 --- /dev/null +++ b/docs/styleguide/patterns/multiselektions-pulldown.html @@ -0,0 +1,602 @@ + + + + + + Styleguide – Pattern Multiselektions-Pulldown + + + + +

Pattern – Multiselektions-Pulldown

+
+

Pattern: Multiselektions-Pulldown

+ +
+
+
+ + + + +
+
+
+
+ +
+

Block 1

+ + + +
+ + Slider 1 + + 6.5 +
+ +
+ + Slider 2 + + 9.5 +
+ +
+ + Slider 3 + + 5.0 +
+ +
+ + Slider 4 + + 6.5 +
+
+ +
+

Block 2

+ +
+ + Slider 5 + + 3.0 +
+ +
+ + Slider 6 + + 2.5 +
+ +
+ + Slider 7 + + 1.6 +
+
+ +
+

Block 3

+ +
+ + Radio Auswahl + + + + Radio 1 + + + + Radio 2 + + +
+ +
+ +

Pulldown 1

+ + +
+
+ +
+

Block 4

+ +
+ +

Pulldown 2

+ + +
+ +
+ +

Pulldown 3

+ + +
+ +
+ +

Pulldown 4

+ + +
+
+
+
+
+
+
+ +
+
+ +
+ + + + + diff --git a/docs/styleguide/patterns/navigation-card.html b/docs/styleguide/patterns/navigation-card.html new file mode 100644 index 0000000..15024d4 --- /dev/null +++ b/docs/styleguide/patterns/navigation-card.html @@ -0,0 +1,29 @@ + + + + + + Styleguide – Pattern Navigation Card + + + + +

Pattern – Navigation Card

+
+

Pattern: Navigation Card

+ +
+
+ +
+
+
+ + + diff --git a/docs/styleguide/patterns/notifications.html b/docs/styleguide/patterns/notifications.html new file mode 100644 index 0000000..a9d43a8 --- /dev/null +++ b/docs/styleguide/patterns/notifications.html @@ -0,0 +1,264 @@ + + + + + + Styleguide – Pattern Notifications + + + + +

Pattern – Notifications

+ +
+

Pattern: Notifications

+ +
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+ +
+

Pattern: Notification with title

+ +
+ +
+
+

+ Kaufsignal Veeva Systems Inc Class A +

+
+ +
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Veeva Systems Inc Class A +

+
+ +
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Veeva Systems Inc Class A +

+
+ +
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Veeva Systems Inc Class A +

+
+ +
+

+ 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. +

+
+ +
+ +
+
+ +
+
+ +
+

Pattern: Notifications small

+ +
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+

+ 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. +

+
+ +
+ +
+
+ +
+
+ + + + + diff --git a/docs/styleguide/patterns/object-card.html b/docs/styleguide/patterns/object-card.html new file mode 100644 index 0000000..75e6987 --- /dev/null +++ b/docs/styleguide/patterns/object-card.html @@ -0,0 +1,194 @@ + + + + + + Styleguide – Pattern Object Card + + + + +

Pattern – Object Card

+
+

Pattern: Object Card

+

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.

+ +
+
+
+
Alcon Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

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.

+
+
+
+ + +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+ +
+
+
+ + + + + diff --git a/docs/styleguide/patterns/object-group-card.html b/docs/styleguide/patterns/object-group-card.html new file mode 100644 index 0000000..f49b0d7 --- /dev/null +++ b/docs/styleguide/patterns/object-group-card.html @@ -0,0 +1,130 @@ + + + + + + Styleguide – Pattern Object Group Card + + + + +

Pattern – Object Group Card

+
+

Pattern: Object Group Card

+

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.

+ +
+
+
+
Alcon Inc.
+
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

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.

+
+ +
+
+
+ + + + + diff --git a/docs/styleguide/patterns/options-row.html b/docs/styleguide/patterns/options-row.html new file mode 100644 index 0000000..f23be96 --- /dev/null +++ b/docs/styleguide/patterns/options-row.html @@ -0,0 +1,319 @@ + + + + + + Styleguide – Pattern Options Row + + + + +

Pattern – Options Row

+
+

Pattern: Options Row

+ +

+ Desktop/Tablet: gleiche Breite wie das zugehörige Element; linke Optionen linksbündig, rechte Optionen rechtsbündig. +

+ +

+ Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um. +

+ +
+ +
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+ +
+
+ + + + + + diff --git a/docs/styleguide/patterns/portal-header.html b/docs/styleguide/patterns/portal-header.html new file mode 100644 index 0000000..420d879 --- /dev/null +++ b/docs/styleguide/patterns/portal-header.html @@ -0,0 +1,434 @@ + + + + + + Styleguide – Pattern Portal Header + + + + +

Pattern – Portal Header

+ +
+

Pattern: Portal Header

+ +

+ Desktop/Tablet: Header skaliert über die verfügbare Breite. +

+ +

+ Mobile: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter. +

+ +
+

+ Variante: Portal Header ohne Options Row +

+ +
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +

+ Nächstes Element (Abstand nach unten: spacing-large) +

+
+ +
+

+ Variante: Portal Header mit Options Row +

+ +
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +

+ Nächstes Element (Abstand nach unten: spacing-large) +

+
+
+ + + + + + diff --git a/docs/styleguide/patterns/text-layouts.html b/docs/styleguide/patterns/text-layouts.html new file mode 100644 index 0000000..93b45d4 --- /dev/null +++ b/docs/styleguide/patterns/text-layouts.html @@ -0,0 +1,64 @@ + + + + + + Styleguide – Pattern Text Layouts + + + + +

Pattern – Text Layouts

+
+

Pattern: Text Layout ganze Breite

+
+
+

+ 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. +

+
+
+ +

Pattern: Text 60% Breite

+
+
+

+ 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. +

+
+
+ +

Pattern: Text zweispaltig (mobil zweispaltig)

+
+
+
+

+ 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. +

+

+ 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. +

+
+
+
+ +

Pattern: Dreispaltig verteilt (mobil dreispaltig)

+
+
+
+

+ 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. +

+

+ 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. +

+

+ 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. +

+
+
+
+
+ + + diff --git a/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-drawer.html new file mode 100644 index 0000000..c2f0a40 --- /dev/null +++ b/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-drawer.html @@ -0,0 +1,469 @@ + + + + + + Styleguide – VSF Card Listen Seite Fundamentalanalyse Drawer + + + + +

Layout – VSF Fundamentalanalyse Drawer

+ +
+
+
+ +
+
+ +
+
+

Western Digital Corporation

+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+

+ Ticker: WDC
+ Region: Amerika
+ Sub-Region: Nordamerika
+ Land: Vereinigte Staaten von Amerika +

+

+ ISIN: US9581021055
+ Industrie: Computer Hardware +

+
+
+
+ + +
+
+
+

Fundamentalanalyse vom 12.5.2026 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

+

+ Nächste Analyse: nicht bekannt +

+
+
+
+ + + + + + + + + +
+ +
+
+
+
+
Gesamtbewertung Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+
+
+
+

Score:

+
+
+
+
+

(9.9) attraktiv

+
+
+
+
+

+ Attraktiv. Starke Profitabilitäts- und Gewinnwachstumsdynamik durch KI-Nachfrage, solide Bilanz. Ambitionierte Bewertung setzt perfekte Ausführung voraus. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+
+
+
+
Unterschied zur letzten Analyse vom 1.5.2026 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+
+

Die Investment-Story hat sich insgesamt verbessert, da sich die strukturellen Wachstumstreiber konkretisiert und die Profitabilität deutlich beschleunigt hat.

+

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.

+

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.

+
+
+
+
+ + + + + + + + +
+
+ +
+
+ +
+
+
+ + + + + + diff --git a/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-mobile.html b/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-mobile.html new file mode 100644 index 0000000..8d3ab33 --- /dev/null +++ b/docs/styleguide/patterns/vsf-card-listen-fundamentalanalyse-mobile.html @@ -0,0 +1,69 @@ + + + + + + Styleguide – VSF Card Listen Seite Fundamentalanalyse Mobile + + + + +

Layout – VSF Fundamentalanalyse Mobile

+ +
+
+
+ +
+
+ +
+
+
+
Box 1
+
+
+

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.

+
+
+ +
+
+
Box 2
+
+
+

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.

+
+
+ +
+
+
Box 3
+
+
+

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.

+
+
+
+ +
+
+ +
+
+
+ + + diff --git a/docs/styleguide/patterns/vsf-card-listen-seite.html b/docs/styleguide/patterns/vsf-card-listen-seite.html new file mode 100644 index 0000000..0ad2cd4 --- /dev/null +++ b/docs/styleguide/patterns/vsf-card-listen-seite.html @@ -0,0 +1,926 @@ + + + + + + Styleguide – VSF Card Listen Seite + + + + +

Layout – VSF Card Listen Seite

+ +
+
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +
+
+

VSF Listenübersicht

+ + + + Hilfe zur Listenansicht und zu den Filteroptionen. + + +
+

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.

+
+ +
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+
Netflix, Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+
+
+

Score:

+ +

attraktiv

+
+
+
+
+ + + + + + + + + + + +
PE: 28.8PE forw.: 23.3
PEG: 3.54
+
+
+

Fundamentalanalyse vom 8.5.2026:

+
+
+

Marktbewertung:

+
+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+
+ Moat: + Maessig +
+
+

+ Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf. +

+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+ + + + + diff --git a/docs/styleguide/patterns/vsf-list-card.html b/docs/styleguide/patterns/vsf-list-card.html new file mode 100644 index 0000000..ca12f84 --- /dev/null +++ b/docs/styleguide/patterns/vsf-list-card.html @@ -0,0 +1,507 @@ + + + + + + Styleguide – Layout VSF List Card + + + + +

Layout – VSF List Card

+ +
+

Layout: VSF List Card

+

Diese Layout-Seite zeigt VSF-spezifische List-Card-Layouts als Grundlage fuer weitere Ausdifferenzierungen.

+ +

Layout 1: Neue Liste anlegen Karte

+
+
+
+
Neue Liste anlegen
+
+
+
+
+
+
+
+ + + + + +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+ +

Layout 2: Maximale Listenzahl erreicht

+
+
+
+
Neue Liste anlegen
+
+
+
+
+

Maximale Listenanzahl erreicht. Du musst eine Liste loeschen oder dein Abonnement upgraden, um mehr Listen anzulegen.

+
+
+
+ + + + + +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+ +

Layout 3 - List Card inklusive Lösch- und Editier-Funktion

+
+
+
+
NAME DER LISTE
+
+ +
+ Editieren + Liste loeschen +
+
+
+
+
+
+

Medianscore:

+ +

attraktiv

+
+
+
+
+
+

+ PE: 28.8 +

+

+ PE forw.: 23.3 +

+

+ PEG: 3.54 +

+
+
+
+

Median-Subscores:

+
+
+

Marktbewertung:

+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+

BESCHREIBUNG LISTE

+
+
+
+ +
+
+
+ + + + +
+ +
+ + + + + diff --git a/docs/styleguide/patterns/vsf-list-detailseite.html b/docs/styleguide/patterns/vsf-list-detailseite.html new file mode 100644 index 0000000..de3a72e --- /dev/null +++ b/docs/styleguide/patterns/vsf-list-detailseite.html @@ -0,0 +1,645 @@ + + + + + + Styleguide – VSF List Detailseite + + + + +

Layout – VSF List Detailseite

+ +
+
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +
+

TITEL DER LISTE

+

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.

+
+ +
+ + +
+
+

Unternehmen

+
+
+
+
Alcon Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

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.

+
+
+
+ + +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+
+

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.

+
+ +
+
+
+
+
+
+ + + + + + diff --git a/docs/styleguide/patterns/vsf-listen-uebersicht-seite-v2.html b/docs/styleguide/patterns/vsf-listen-uebersicht-seite-v2.html new file mode 100644 index 0000000..7d5401d --- /dev/null +++ b/docs/styleguide/patterns/vsf-listen-uebersicht-seite-v2.html @@ -0,0 +1,656 @@ + + + + + + Styleguide – VSF Listen Übersicht Seite V2 + + + + +

Layout – VSF Listen Übersicht Seite V2

+ +
+
+
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+
+ +
+

Meine Listen

+
+

+ 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 +

+
+
+ +
+
+
+
+
NAME DER LISTE
+
+ +
+ Editieren + Liste loeschen +
+
+
+
+

7 Unternehmen

+
+
+
+
+

Medianscore:

+ +

attraktiv

+
+
+
+
+
+

+ PE: 28.8 +

+

+ PE forw.: 23.3 +

+

+ PEG: 3.54 +

+
+
+
+

Median-Subscores:

+
+
+

Marktbewertung:

+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+

BESCHREIBUNG LISTE

+
+
+
+ +
+
+
+ + + + +
+ +
+
+
Neue Liste anlegen
+
+
+
+
+
+
+
+ + + + + +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+ +
+
+ +
+
+ + + + + + diff --git a/docs/styleguide/patterns/vsf-meldungen.html b/docs/styleguide/patterns/vsf-meldungen.html new file mode 100644 index 0000000..b631d66 --- /dev/null +++ b/docs/styleguide/patterns/vsf-meldungen.html @@ -0,0 +1,818 @@ + + + + + + Styleguide – VSF Meldungen + + + + +

Layout – VSF Meldungen

+ +
+
+
+

ValueStockFinder

+ +
+ + +
+ Admin + Logout +
+
+ + +
+
+ +
+
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +
+

Meldungen

+
+ +
+
+

Updates

+ +
+
+
+

+ Update Signal Eins +

+
+ +
+

+ Aktualisierung mit hoher Priorität zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Update Signal Zwei +

+
+ +
+

+ Positive Meldung zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Update Signal Drei +

+
+ +
+

+ Weitere Meldung zur Illustration. +

+
+ +
+ +
+
+
+ +
+ +
+
+ +
+

Kaufsignale

+ +
+
+
+

+ Kaufsignal Signal Eins +

+
+ +
+

+ Verkaufssignal zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Signal Zwei +

+
+ +
+

+ Positives Kaufsignal zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Signal Drei +

+
+ +
+

+ Weitere Signalmeldung zur Illustration. +

+
+ +
+ +
+
+
+ +
+ +
+
+ +
+

Termine

+ +
+
+
+

+ Termin Signal Eins +

+
+ +
+

+ Terminmeldung mit weissem Hintergrund. +

+
+ +
+ +
+
+ +
+
+

+ Termin Signal Zwei +

+
+ +
+

+ Weiterer Termin mit weissem Hintergrund. +

+
+ +
+ +
+
+ +
+
+

+ Termin Signal Drei +

+
+ +
+

+ Dritte Terminmeldung mit weissem Hintergrund. +

+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
+
+ + + +
+ +
+
+
+
+
+

Update Signal Eins

+
+
+

Aktualisierung mit hoher Priorität zur Illustration.

+
+
+ +
+
+ +
+
+

Update Signal Zwei

+
+
+

Positive Meldung zur Illustration.

+
+
+ +
+
+ +
+
+

Update Signal Drei

+
+
+

Weitere Meldung zur Illustration.

+
+
+ +
+
+
+ +
+ +
+
+ + + + +
+
+
+ +
+ + + + + + + diff --git a/docs/styleguide/scripts/check_pattern_inset_guardrails.sh b/docs/styleguide/scripts/check_pattern_inset_guardrails.sh new file mode 100755 index 0000000..0a0ffe8 --- /dev/null +++ b/docs/styleguide/scripts/check_pattern_inset_guardrails.sh @@ -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" diff --git a/docs/styleguide/scripts/help-icon-overlays.js b/docs/styleguide/scripts/help-icon-overlays.js new file mode 100644 index 0000000..84edff9 --- /dev/null +++ b/docs/styleguide/scripts/help-icon-overlays.js @@ -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); + }); + }; +})(); diff --git a/docs/styleguide/scripts/sync_styleguide_to_webapp_aktienberater.sh b/docs/styleguide/scripts/sync_styleguide_to_webapp_aktienberater.sh new file mode 100755 index 0000000..31249ba --- /dev/null +++ b/docs/styleguide/scripts/sync_styleguide_to_webapp_aktienberater.sh @@ -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 <] [--portal-repo ] [--commit-portal] + +Options: + --portal Portal target. Defaults to vsf. + --portal-repo 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" <&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" diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html new file mode 100644 index 0000000..7eba895 --- /dev/null +++ b/docs/styleguide/semantic-tokens-components.html @@ -0,0 +1,241 @@ + + + + + + Styleguide – Semantic Tokens Components + + + + +

Semantic Tokens Components

+ +
+

Cards

+ +

Cards

+ + + + + + + + + + + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-cardcolor-light-greyGrundfläche der Card.
surface-card-bodycolor-light-greyFläche im Body-Segment der Card.
surface-card-segment-neutralcolor-light-greyNeutrale Segmentfläche für gezielte hellgraue Card-Segmente (z. B. sg-card-segment--gray).
surface-card-header-primarycolor-darkbluePrimärer Header-Hintergrund.
surface-card-header-alternativecolor-darkgreenAlternativer Header-Hintergrund.
surface-card-header-mutedcolor-darkbrownZweite alternative Header-Fläche.
divider-card-segmentcolor-whiteTrenner zwischen Segmenten.
text-card-headercolor-font-lightHeader-Textfarbe.
text-card-bodycolor-font-darkStandard-Textfarbe im Body.
layout-card-body-content-justifyflex-startAusrichtung des Inhalts im Body-Segment der Card.
layout-card-segment-content-gapspacing-smallVertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.
layout-card-segment-padding-topcard-segment-padding-verticalOberer Innenabstand von Card-Segmenten.
layout-card-segment-padding-rightcard-segment-padding-horizontalRechter Innenabstand von Card-Segmenten.
layout-card-segment-padding-bottomcard-segment-padding-verticalUnterer Innenabstand von Card-Segmenten.
layout-card-segment-padding-leftcard-segment-padding-horizontalLinker Innenabstand von Card-Segmenten.
layout-card-body-padding-toplayout-card-segment-padding-topOberer Innenabstand des Card-Body-Segments.
layout-card-body-padding-rightlayout-card-segment-padding-rightRechter Innenabstand des Card-Body-Segments.
layout-card-body-padding-bottomlayout-card-segment-padding-bottomUnterer Innenabstand des Card-Body-Segments.
layout-card-body-padding-leftlayout-card-segment-padding-leftLinker Innenabstand des Card-Body-Segments.
layout-card-body-text-margin0Textabstand im Card-Body; verhindert zusätzliche Default-Margins.
+

Verhaltensregel: Für Cards mit ausklappenden Overlays (z. B. Help-Panel, Sandwich-Menü, Pulldown) ist die Komponenten-Variante sg-card--overlay-host zu verwenden, damit Overlays nicht abgeschnitten werden.

+ +

Group Card

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-groupcolor-background-purple-lightFläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert).
+ +

Pattern Card Breiten

+ + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card.
layout-notifications-text-segment-fixed-height150pxFixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.
+ +

Text Group Box

+ + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-transparentcolor-transparentTransparente Fläche der Text-Group-Box ohne Card-Segmente.
text-card-transparentcolor-font-lightTextfarbe der Text-Group-Box.
+ +

VSF Drawer Object Card

+ + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-vsf-drawer-object-card-headercolor-darkblueHeader-Fläche der VSF-spezifischen Object Card im Drawer.
surface-vsf-drawer-object-card-bodycolor-darkblueBody-Fläche der VSF-spezifischen Object Card im Drawer.
text-vsf-drawer-object-card-headingcolor-font-lightTextfarbe der H2-Überschrift im Header der VSF Drawer Object Card.
text-vsf-drawer-object-card-bodycolor-font-lightTextfarbe der Detailinhalte im Body der VSF Drawer Object Card.
layout-vsf-drawer-object-card-column-gapspacing-largeSpaltenabstand des zweispaltigen Textlayouts in der VSF Drawer Object Card.
+
+ +
+

Interactive Elements

+ +

Button

+ + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-button-activecolor-medium-greyFläche aktiver Standard-Buttons.
surface-button-inactivecolor-light-greyFläche inaktiver Standard-Buttons.
surface-button-processcolor-font-hyperlinkFläche von Prozess-/CTA-Buttons.
surface-button-process-inactivecolor-process-inactiveFläche inaktiver Prozess-/CTA-Buttons.
text-button-processcolor-font-lightTextfarbe auf Prozess-/CTA-Buttons.
+ +

Tabs

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-tab-selectedcolor-dark-greyFläche des ausgewählten Tabs.
surface-tab-unselectedcolor-whiteFläche nicht ausgewählter Tabs.
surface-tab-compact-backgroundsurface-form-previewHintergrundfläche kompakter Tab-Navigationen.
surface-tab-compact-unselectedcolor-medium-greyFläche nicht aktiver Tabs in der kompakten Variante.
text-tab-selectedcolor-font-lightTextfarbe des ausgewählten Tabs.
text-tab-unselectedcolor-dark-greyTextfarbe nicht ausgewählter Tabs.
layout-tab-navigation-large-padding-inlineinteraction-padding-horizontalHorizontaler Innenabstand für große Tab-Navigationen (auf kleinen Viewports reduziert).
+ +

Form Controls

+ + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-control-defaultcolor-whiteStandardfläche für Input-/Auswahl-Controls.
surface-control-activecolor-whiteFläche aktiver Controls.
surface-control-inactivecolor-whiteFläche inaktiver, aber wählbarer Controls.
surface-control-disabledcolor-whiteFläche deaktivierter Controls.
text-control-defaultcolor-font-darkStandard-Textfarbe in Controls.
text-control-disabledcolor-dark-greyTextfarbe deaktivierter Controls.
surface-input-clearcolor-medium-greyFläche des Clear-Buttons in Inputs.
layout-input-label-widthdimension-input-label-widthDesktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.
layout-input-field-desktop-widthdimension-input-field-desktop-widthFixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.
layout-input-field-max-widthdimension-input-field-max-widthMaximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).
layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs.
+ +

Pulldown and Menu

+

Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).

+ + + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-pulldown-panelcolor-light-greyFläche geöffneter Pulldown-Panels.
surface-activatable-removesurface-control-defaultFläche des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.
icon-pulldown-chevroncurrentColor-basierte VerlaufsgrafikChevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.
layout-pulldown-panel-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
layout-pulldown-panel-form-mobile-width90%Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.
layer-pulldown-paneldimension-layer-pulldown-panelLayer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.
layout-multiselect-pulldown-panel-desktop-widthdimension-multiselect-pulldown-panel-desktop-widthSemantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.
layout-multiselect-pulldown-panel-mobile-widthdimension-multiselect-pulldown-panel-mobile-widthReservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.
surface-menu-panel-portalcolor-light-greyFläche des Sandwich-Menü-Panels für große und kleine Variante.
text-menu-link-portalcolor-font-darkLinktextfarbe im Sandwich-Menü für große und kleine Variante.
text-activatable-removetext-control-defaultZeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.
+ +

Toggle / Checkbox / Radio / Help

+ + + + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-toggle-trackcolor-medium-greyToggle-Track-Fläche.
surface-toggle-handlecolor-darkblueToggle-Handle-Fläche.
text-toggle-label-activecolor-font-lightTextfarbe des aktiven Toggle-Labels auf der hervorgehobenen Handle-Seite.
layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.
layout-mode-toggle-local-width-factor3Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.
layout-mode-toggle-widthcalc(interaction-height * 3.5)Standardbreite des Mode-Toggles in regulären Varianten.
surface-checkbox-defaultcolor-whiteStandardfläche der Checkbox.
surface-checkbox-on-contextcolor-whiteCheckbox-Fläche auf Kontextflächen.
surface-radio-defaultcolor-whiteStandardfläche des Radio-Buttons.
icon-radio-markcolor-font-darkMarkierungsfarbe im Radio-Button.
surface-help-iconcolor-medium-greyFläche des Help-Icons.
surface-help-panelcolor-light-greyFläche des Help-Panels.
text-help-iconcolor-font-darkTextfarbe im Help-Icon.
text-help-panelcolor-font-darkTextfarbe im Help-Panel.
layout-help-panel-widthcalc(interaction-height * 8)Standardbreite des Help-Panels.
icon-sandwich-line-portalcolor-font-darkLinienfarbe des Sandwich-Icons für große und kleine Variante.
+ +

Slider

+ + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-slider-trackcolor-medium-greyGrundfläche des Slider-Strichs.
surface-slider-progresscolor-dark-greyAusgewählter Bereich links vom Slider-Knopf.
surface-slider-thumbcolor-dark-greyGefüllte Fläche des Slider-Knopfs (ohne Linie).
+ +

Preview Area

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-form-previewcolor-light-greyFläche von Formular-/Control-Preview-Bereichen.
text-hyperlinkcolor-font-hyperlinkLinkfarbe in interaktiven Texten.
+
+ +
+

Charts

+ +

Score Bar

+ + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-score-bar-trackcolor-medium-greyHintergrund der Score-Bar.
chart-value-positivecolor-signal-greenFüllfarbe positiver Werte.
chart-value-neutralcolor-signal-yellowFüllfarbe neutraler Werte.
chart-value-negativecolor-signal-redFüllfarbe negativer Werte.
chart-median-linecolor-font-darkFarbe der Median-Markierung.
text-score-state-positivechart-value-positiveTextfarbe positiver Zustandslabels am Gesamtscore-Balken.
layout-score-bar-item-columnsmax-content und 1frStandardspalten der Score-Bar-Zeile: dynamische Labelspalte (längstes Label) plus Balkenspur.
layout-score-bar-item-gapspacing-largeAbstand zwischen Labelspalte und Balkenspur in der Score-Bar-Zeile.
layout-score-bar-item-single-score-columnsmax-content, 1fr und max-contentSpalten der Score-Bar-Zeile in der Single-Score-Variante: Label, Balken, Zustandslabel.
+ +

Bar / Line Chart

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-chart-areacolor-light-greyGrundfläche des Charts.
chart-value-primarycolor-darkbluePrimäre Datenreihe.
chart-value-referencecolor-medium-greyReferenz-/Vergleichsreihe.
chart-grid-linecolor-medium-greyGridline-Farbe.
chart-axis-linecolor-font-darkAchsenfarbe.
chart-marker-linecolor-font-darkMarker-/Hilfslinienfarbe.
text-chart-defaultcolor-font-darkTextfarbe in Achsen/Labels.
+
+ +
+

Data Display

+ +

Data Table Small

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-data-tablecolor-light-greyGesamtfläche der Tabelle.
surface-data-table-headercolor-light-greyFläche der Tabellenkopfzeile.
surface-data-table-cellcolor-light-greyFläche von Tabellenzellen.
surface-data-table-help-iconcolor-medium-greyFläche des Help-Icons im Tabellenkontext.
text-data-table-defaultcolor-font-darkStandard-Textfarbe in Tabellenzellen.
text-data-table-warningcolor-signal-yellowWarnwertfarbe in Tabellenzellen.
text-data-table-help-iconcolor-font-darkTextfarbe im Tabellen-Help-Icon.
+ +

Data Columns

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-data-tablecolor-light-greyGesamtfläche der Spaltenliste.
surface-data-table-cellcolor-light-greyFläche von Spaltenzellen.
text-data-table-defaultcolor-font-darkStandard-Textfarbe in Spaltenzellen.
text-data-table-warningcolor-signal-yellowWarnwertfarbe in Spaltenzellen.
+
+ +
+

Typography

+ +

Typography Preview

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
text-typography-previewcolor-font-lightTextfarbe in der Typografie-Preview.
layout-preview-align-itemsflex-startVertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.
+
+ + + diff --git a/docs/styleguide/semantic-tokens-layouts.html b/docs/styleguide/semantic-tokens-layouts.html new file mode 100644 index 0000000..c270be1 --- /dev/null +++ b/docs/styleguide/semantic-tokens-layouts.html @@ -0,0 +1,42 @@ + + + + + + Styleguide – Semantic Tokens Layouts + + + + +

Semantic Tokens Layouts

+ +
+

Layouts

+ +

Generische Layouts

+ + + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-options-row-margin-topspacing-smallAbstand oberhalb der Options Row.
layout-options-row-main-gapspacing-largeHorizontaler Abstand zwischen linker und rechter Aktionsgruppe.
layout-options-row-group-gapspacing-smallAbstand zwischen Controls innerhalb der linken und rechten Gruppe.
layout-options-row-mode-toggle-widthdimension-options-row-mode-toggle-widthBreite des Mode-Toggles innerhalb der Options Row.
layout-options-row-help-panel-widthdimension-options-row-help-panel-widthBreite des Help-Panels innerhalb der Options Row.
layout-object-card-min-widthdimension-object-card-min-widthMindestbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-max-widthdimension-object-card-max-widthMaximalbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-heightdimension-object-card-heightFixe Höhe der Object Card im Desktop-Layout.
layout-object-card-mobile-widthdimension-object-card-mobile-widthVolle verfügbare Breite der Object Card auf Mobile.
layout-object-card-mobile-heightdimension-object-card-mobile-heightInhaltsabhängige Höhe der Object Card auf Mobile.
layout-object-card-desktop-breakpointdimension-object-card-desktop-breakpointBreakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.
layout-object-card-content-growdimension-object-card-content-growFlex-Grow-Wert für das vorletzte Segment der Object Card.
layout-object-card-shared-widthautoGeteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.
layout-content-cards-group-gapspacing-smallAbstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.
layout-card-list-drawer-widthdimension-card-list-drawer-widthBreite des ausziehbaren Card-Listenbereichs relativ zum Container.
+ +

Valuestockfinder Layouts

+ + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-company-card-analysis-gap-after-moatspacing-largeVertikaler Abstand zwischen Moat-Zeile und Analyse-Zusammenfassung in der Company Card.
+
+ + + diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html new file mode 100644 index 0000000..e51d9bc --- /dev/null +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -0,0 +1,129 @@ + + + + + + Styleguide – Semantic Tokens Patterns + + + + +

Semantic Tokens Patterns

+ +
+

Patterns

+ +

Portal Header

+ + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-portal-headercolor-darkblueHeader-Grundfläche.
surface-portal-header-tabcolor-midblueFläche nicht aktiver Header-Tabs.
surface-portal-header-tab-activecolor-light-greyFläche aktiver Header-Tabs.
text-portal-header-brandcolor-font-lightTextfarbe der Brand.
font-size-portal-header-brandcalc(var(--font-size-brand) * 1.1)Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).
text-portal-header-tabcolor-font-lightTextfarbe nicht aktiver Header-Tabs.
text-portal-header-tab-activecolor-font-darkTextfarbe aktiver Header-Tabs.
layout-page-content-inset-inlinecard-segment-padding-horizontalGemeinsamer horizontaler Content-Inset für Portal Header, Options Row und Card-Listen-Drawer-Content (Single Source of Spacing Truth auf Pattern-Ebene).
+ +

Options Row

+ + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-options-rowcolor-light-greyGrundfläche der Options Row.
surface-options-row-controlsurface-control-defaultAlias auf Standard-Control-Fläche innerhalb der Options Row.
surface-options-row-control-selectedsurface-control-activeAlias auf aktive Control-Fläche innerhalb der Options Row.
surface-options-row-input-clearsurface-input-clearAlias auf Clear-Button-Fläche im Input der Options Row.
surface-options-row-toggle-tracksurface-toggle-trackAlias auf Toggle-Track-Fläche innerhalb der Options Row.
surface-options-row-toggle-handlesurface-toggle-handleAlias auf Toggle-Handle-Fläche innerhalb der Options Row.
surface-options-row-help-iconsurface-help-iconAlias auf Help-Icon-Fläche innerhalb der Options Row.
surface-options-row-help-panelsurface-help-panelAlias auf Help-Panel-Fläche innerhalb der Options Row.
divider-options-row-mobilecolor-whiteTrennerfarbe zwischen Segmenten im mobilen Layout der Options Row.
text-options-row-defaulttext-control-defaultAlias auf Standard-Textfarbe für Controls in der Options Row.
text-options-row-placeholdertext-control-disabledAlias auf Placeholder-/Disabled-Textfarbe in der Options Row.
text-options-row-help-iconcolor-font-lightTextfarbe im Help-Icon der Options Row.
text-options-row-help-paneltext-help-panelAlias auf Help-Panel-Textfarbe der Options Row.
text-options-row-descriptioncolor-font-lightTextfarbe der beschreibenden Hinweistexte oberhalb der Options Row.
+ +

Object Card

+ + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card.
+ +

Object Group Card

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der einzelnen Karten im Pattern Object Group Card.
+ +

Notifications

+ + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-notifications-card-flex-basisdimension-notifications-card-min-widthFlex-Basis der Notification Card im Notifications-Pattern; entspricht der gemeinsamen Foundation-Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von .sg-group-card.
layout-notifications-card-min-widthdimension-notifications-card-min-widthMindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.
layout-notifications-card-max-widthlayout-object-card-max-widthMaximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.
layout-notifications-text-segment-fixed-heightdimension-notifications-text-segment-fixed-heightFixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.
layout-notifications-text-segment-fixed-height-smalldimension-notifications-text-segment-fixed-height-smallFixe Desktop-Höhe des ersten Text-Segments in der Variante Pattern: Notifications small; auf Mobile wird die Höhe auf auto gesetzt.
+ +

Company Card

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
text-company-card-data-negativechart-value-negativeTextfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card.
text-company-card-moat-neutralchart-value-neutralTextfarbe für die neutrale Moat-Ausprägung im Analyse-Segment der Company Card.
+ +

Navigation Card

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-navigation-cardcolor-whiteGrundfläche der Navigation Card.
surface-navigation-card-bodycolor-whiteFläche im Body-Segment der Navigation Card.
+ +

Card Gruppe mit Tastennavigation

+ + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-content-block-card-titlecolor-light-greyHintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.
surface-content-block-card-contentcolor-whiteHintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.
text-content-block-card-titlecolor-font-darkTextfarbe im Titel-Segment der Inhaltsblock-Karte.
text-content-block-card-contentcolor-font-darkTextfarbe im Inhalts-Segment der Inhaltsblock-Karte.
surface-card-list-drawercolor-background-purpleFläche des ausziehbaren Card-Listenbereichs.
text-card-list-drawercolor-font-darkTextfarbe im ausziehbaren Card-Listenbereich.
+ +

Text Layouts

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-text-layout-previewcolor-light-greyHintergrundfläche der Vorschau-Segmente im Pattern Text Layouts.
layout-text-layout-column-gapspacing-largeHorizontaler Abstand zwischen Textspalten in zwei- und dreispaltigen Varianten.
layout-text-layout-two-column-columnsrepeat(2, minmax(0, 1fr))Spaltenraster für die zweispaltige Text-Variante.
layout-text-layout-three-column-columnsrepeat(3, minmax(0, 1fr))Spaltenraster für das Pattern Dreispaltig verteilt.
text-align-text-layout-column-leftleftTextausrichtung der linken Spalte im Pattern Dreispaltig verteilt.
text-align-text-layout-column-centercenterTextausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt.
text-align-text-layout-column-rightrightTextausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.
+ +

VSF List Card

+ + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
text-vsf-list-card-limit-notecolor-signal-redHinweistextfarbe für die Meldung bei erreichter maximaler Listenanzahl.
layout-vsf-list-card-summary-offset-block-startlayout-company-card-analysis-gap-after-moatVertikaler Abstand vor dem Summary-Block in der VSF List Card.
layout-vsf-list-card-delete-confirmation-target-max-widthlayout-object-group-card-max-widthMaximalbreite der Delete-Confirmation-Zielkarte innerhalb der VSF-List-Card-Demo.
+ +

Multiselektions-Pulldown

+ + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-multiselect-pulldown-label-column-width-fallbackmax-contentFallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.
+ +

Overlay Card

+ + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-delete-confirmation-overlaycolor-light-greyHintergrundfläche des schwebenden Bestätigungsfensters.
surface-delete-confirmation-target-dim-overlaycolor-blackOverlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster.
text-delete-confirmation-overlaycolor-font-darkTextfarbe im Bestätigungsfenster.
layout-delete-confirmation-target-max-width35remMaximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.
layout-delete-confirmation-overlay-width-factor0.8Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).
layout-delete-confirmation-overlay-offset-block-startspacing-largeAbstand des Overlays von der oberen Kante des Zielobjekts.
layout-delete-confirmation-content-gapspacing-smallVertikaler Abstand zwischen den Inhaltsblöcken im Overlay.
layout-delete-confirmation-actions-gapspacing-smallHorizontaler Abstand zwischen Abbrechen- und Löschen-Button.
layout-delete-confirmation-actions-offset-block-startspacing-largeZusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.
layout-delete-confirmation-label-widthdimension-input-label-widthLabel-Spaltenbreite der einzeiligen Bestätigungseingabe.
layout-delete-confirmation-target-dim-opacity0.5Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut).
layer-delete-confirmation-overlay50Z-Index-Layer des schwebenden Bestätigungsfensters.
+
+ + + diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css new file mode 100644 index 0000000..7ee74cb --- /dev/null +++ b/docs/styleguide/styleguide.css @@ -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"; diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css new file mode 100644 index 0000000..aff2570 --- /dev/null +++ b/docs/styleguide/styles/01-foundations.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; +} diff --git a/docs/styleguide/styles/02-base.css b/docs/styleguide/styles/02-base.css new file mode 100644 index 0000000..96916b4 --- /dev/null +++ b/docs/styleguide/styles/02-base.css @@ -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; +} + diff --git a/docs/styleguide/styles/03-typography-helpers.css b/docs/styleguide/styles/03-typography-helpers.css new file mode 100644 index 0000000..7e71b23 --- /dev/null +++ b/docs/styleguide/styles/03-typography-helpers.css @@ -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); +} diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css new file mode 100644 index 0000000..9d65a39 --- /dev/null +++ b/docs/styleguide/styles/10-components-interactive-elements.css @@ -0,0 +1,1437 @@ +/* ========================================================= */ +/* Components: Interactive Elements */ +/* ========================================================= */ + + + + .sg-component-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-component-column { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + /* + Form preview surface only: + All form elements in this component are intentionally shown on the form-area background. + This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. + The current preview background uses light-grey according to the style foundations. + */ + .sg-form-preview-area { + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--surface-form-preview); + } + + .sg-pulldown-demo { + position: relative; + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + + .sg-state-example { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) auto; + gap: var(--spacing-small); + align-items: center; + } + + .sg-state-example__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-activatable-control { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activatable-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-interaction-element { + box-sizing: border-box; + height: var(--interaction-height); + padding: + var(--interaction-padding-vertical) + var(--interaction-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-default); + } + + .sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-form-inactive-selectable { + background: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-form-disabled { + background: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-interaction-element:focus, + .sg-interaction-element:focus-visible { + outline: none; + } + + .sg-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-semibold); + cursor: pointer; + text-decoration: none; + } + + .sg-button--active { + background: var(--surface-button-active); + color: var(--text-control-default); + } + + .sg-button--process { + background: var(--surface-button-process); + color: var(--text-button-process); + } + + .sg-button--process-inactive { + background: var(--surface-button-process-inactive); + color: var(--text-button-process); + } + + .sg-button--inactive { + background: var(--surface-button-active); + color: var(--text-control-disabled); + } + + .sg-button:disabled, + .sg-button--disabled { + cursor: not-allowed; + color: var(--text-control-disabled); + } + + .sg-button--process-inactive:disabled { + color: var(--text-button-process); + } + + .sg-tab-button-group { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-tab-button-group[data-component-size="compact"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component-context="content"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { + padding-inline: var(--layout-tab-navigation-large-padding-inline); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-tab-unselected); + color: var(--text-tab-unselected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-selected); + color: var(--text-tab-selected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-control-default); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button--compact { + height: var(--compact-interaction-height); + padding: + var(--compact-interaction-padding-vertical) + var(--compact-interaction-padding-horizontal); + font-size: var(--font-size-small); + } + + .sg-pulldown { + font-weight: var(--font-weight-regular); + appearance: none; + padding-left: var(--layout-pulldown-padding-inline); + padding-right: calc( + var(--layout-pulldown-chevron-offset) + + var(--layout-pulldown-chevron-reserved-space) + ); + background-image: var(--icon-pulldown-chevron); + background-position: right var(--layout-pulldown-chevron-offset) center; + background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); + background-repeat: no-repeat; + } + + .sg-pulldown-demo__trigger { + display: block; + width: 100%; + min-width: 0; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown-demo[data-component-context="form"], + .sg-pulldown-demo[data-component-context="overlay"] { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger, + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--selected { + background-color: var(--surface-control-active); + color: var(--text-control-default); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown--inactive-selectable { + background-color: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable { + opacity: var(--disabled-opacity); + } + + .sg-labeled-input-row .sg-pulldown-demo, + .sg-labeled-input-row .sg-pulldown-demo .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--disabled { + background-color: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line { + font-weight: var(--font-weight-regular); + color: var(--text-control-default); + -webkit-appearance: none; + appearance: none; + } + + .sg-input-single-line::placeholder { + color: var(--text-control-disabled); + opacity: 1; + } + + .sg-input-single-line--inactive-selectable { + color: var(--text-control-default); + } + + .sg-input-single-line--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line-wrap { + position: relative; + display: inline-flex; + align-items: center; + } + + .sg-input-single-line-wrap .sg-input-single-line { + padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); + } + + .sg-input-clear-button { + position: absolute; + top: 0; + right: 0; + display: none; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + margin: 0; + border: var(--border-none); + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + box-shadow: var(--shadow-none); + -webkit-appearance: none; + appearance: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + color: var(--text-control-default); + background: var(--surface-input-clear); + cursor: pointer; + } + + .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { + display: inline-flex; + } + + .sg-search-field-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + white-space: nowrap; + flex-wrap: nowrap; + } + + .sg-search-field-input { + width: var(--layout-search-field-width); + } + + .sg-search-result-count { + color: var(--color-dark-grey); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + } + + .sg-labeled-input-row { + display: flex; + align-items: center; + gap: 0; + width: auto; + max-width: none; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + width: 100%; + min-width: 0; + max-width: var(--layout-form-input-field-max-width); + } + + .sg-labeled-input-row:has(.sg-input-multi-line) { + align-items: flex-start; + } + + .sg-input-multi-line { + box-sizing: border-box; + min-height: calc(var(--interaction-height) * 2.75); + padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); + border: var(--border-control); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-interaction-inset); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-inactive); + resize: vertical; + } + + .sg-input-component .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-labeled-input-row { + width: 100%; + max-width: none; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-pulldown-demo__trigger, + #component-pulldown .sg-state-example > .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-pulldown .sg-pulldown-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + justify-content: start; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-pulldown .sg-activatable-row .sg-pulldown-demo { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + } + + .sg-input-component .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + } + + @media (max-width: 48rem) { + .sg-input-component .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-pulldown .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + .sg-input-component .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: 100%; + } + + #component-pulldown .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: 0; + margin-bottom: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + min-width: 0; + max-width: 100%; + width: 100%; + } + } + + .sg-mode-toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + height: auto; + padding: 0; + border: var(--border-none); + border-radius: 0; + box-shadow: var(--shadow-none); + appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; + cursor: pointer; + } + + .sg-mode-toggle:focus, + .sg-mode-toggle:focus-visible { + outline: none; + } + + .sg-mode-toggle__label { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--text-control-default); + } + + .sg-mode-toggle__switch { + position: relative; + width: var(--layout-mode-toggle-width); + height: var(--interaction-height); + border-radius: var(--radius-interaction); + background: var(--surface-toggle-track); + } + + .sg-mode-toggle__handle { + position: absolute; + top: 0; + right: 0; + width: calc(100% / 2); + height: 100%; + border-radius: var(--radius-interaction); + background: var(--surface-toggle-handle); + } + + .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { + left: 0; + right: auto; + } + + .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { + left: auto; + right: 0; + } + + .sg-mode-toggle--local .sg-mode-toggle__label { + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + } + + .sg-mode-toggle--local .sg-mode-toggle__switch { + width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); + height: var(--layout-mode-toggle-local-height); + } + + .sg-activation-toggle-pattern { + display: flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activation-mode-toggle { + gap: 0; + } + + .sg-activation-mode-toggle .sg-mode-toggle__switch { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + overflow: hidden; + } + + .sg-activation-mode-toggle .sg-mode-toggle__handle { + z-index: 1; + } + + .sg-activation-mode-toggle__switch-label { + position: relative; + z-index: 2; + text-align: center; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--layout-mode-toggle-local-height); + text-transform: lowercase; + color: var(--text-control-default); + } + + .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left, + .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right { + color: var(--text-toggle-label-active); + } + + .sg-slider-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--spacing-small); + width: 100%; + max-width: none; + } + + .sg-slider-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + color: var(--text-control-default); + } + + .sg-slider { + flex: 1 1 14rem; + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + height: var(--interaction-height); + margin: 0; + padding: 0; + border: 0; + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + } + + .sg-slider::-webkit-slider-runnable-track { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: + linear-gradient( + to right, + var(--surface-slider-progress) 0%, + var(--surface-slider-progress) var(--sg-slider-progress, 0%), + var(--surface-slider-track) var(--sg-slider-progress, 0%), + var(--surface-slider-track) 100% + ); + } + + .sg-slider::-webkit-slider-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + margin-top: var(--dimension-slider-thumb-offset-top); + border: 0; + border-radius: 50%; + -webkit-appearance: none; + appearance: none; + background: var(--surface-slider-thumb); + } + + .sg-slider::-moz-range-track { + height: var(--dimension-slider-track-height); + border: 0; + border-radius: var(--radius-slider-track); + background: var(--surface-slider-track); + } + + .sg-slider::-moz-range-progress { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: var(--surface-slider-progress); + } + + .sg-slider::-moz-range-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + border: 0; + border-radius: 50%; + background: var(--surface-slider-thumb); + } + + .sg-slider-value { + flex: 0 0 auto; + min-width: calc(var(--interaction-height) * 1.25); + white-space: nowrap; + text-align: right; + color: var(--text-control-default); + } + + .sg-slider-row--inactive-selectable { + opacity: var(--disabled-opacity); + } + + #component-slider .sg-slider-row { + display: grid; + grid-template-columns: + max-content + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-slider .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-slider-row .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + } + + #component-slider .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 2; + } + + #component-slider .sg-state-example > .sg-slider-row, + #component-slider .sg-activatable-row .sg-slider-row { + max-width: var(--layout-input-field-max-width); + } + + #component-slider .sg-slider-row .sg-slider-value { + min-width: 0; + grid-column: 3; + justify-self: start; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + #component-slider .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-slider-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + justify-content: start; + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + grid-column: 2; + justify-self: start; + min-width: 0; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: + var(--layout-input-label-width) + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-small); + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + grid-column: 2; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + justify-self: end; + align-self: center; + white-space: nowrap; + grid-column: 3; + grid-row: 1; + } + + @media (max-width: 48rem) { + #component-slider .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + grid-row: 1; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + grid-template-columns: minmax(0, 1fr) auto; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + justify-self: start; + align-self: center; + margin: 0; + line-height: 1; + } + + } + + .sg-sandwich-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: calc(var(--interaction-height) + var(--spacing-small)); + height: calc(var(--interaction-height) + var(--spacing-small)); + padding: 0; + cursor: pointer; + } + + .sg-sandwich-button--small { + width: calc(var(--interaction-height) * 0.9); + height: calc(var(--interaction-height) * 0.9); + } + + .sg-sandwich-button__icon { + width: var(--sandwich-line-width); + height: auto; + display: flex; + flex-direction: column; + gap: var(--sandwich-line-gap); + justify-content: center; + } + + .sg-sandwich-button__line { + display: block; + width: 100%; + height: var(--sandwich-line-height); + border-radius: var(--radius-interaction); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { + height: calc(var(--sandwich-line-height) - 1px); + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { + width: calc(var(--sandwich-line-width) - 3px); + } + + .sg-sandwich-menu-wrap { + position: relative; + display: inline-flex; + } + + .sg-sandwich-menu-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + right: 0; + display: none; + flex-direction: column; + gap: var(--spacing-small); + width: max-content; + padding: var(--spacing-large); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-overlay); + z-index: var(--layer-pulldown-panel); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { + display: flex; + } + + .sg-sandwich-menu-link { + margin: 0; + text-decoration: none; + white-space: nowrap; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { + right: auto; + left: 0; + } + + .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { + right: 0; + left: auto; + } + + .sg-help-icon-wrap { + position: relative; + display: inline-flex; + vertical-align: middle; + } + + .sg-help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + 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-help-icon); + background: var(--surface-help-icon); + cursor: pointer; + } + + .sg-help-icon-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + width: var(--layout-help-panel-width); + max-width: calc(100vw - (2 * var(--spacing-large))); + box-sizing: border-box; + overflow-wrap: anywhere; + padding: var(--spacing-large); + border-radius: var(--radius-card); + color: var(--text-help-panel); + background: var(--surface-help-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-help-icon-panel { + width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); + max-width: calc(100dvw - (2 * var(--spacing-large))); + } + } + + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { + display: block; + } + + .sg-help-icon-wrap[data-open="true"] { + z-index: var(--layer-pulldown-panel); + } + + .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { + left: 0; + right: auto; + } + + .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + flex-direction: column; + gap: var(--spacing-small); + min-width: 100%; + width: max-content; + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100vw - (2 * var(--spacing-large))) + ); + box-sizing: border-box; + padding-block: var(--spacing-large); + padding-inline: var(--layout-pulldown-panel-padding-inline); + border-radius: var(--radius-card); + background: var(--surface-pulldown-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-pulldown-panel { + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100dvw - (2 * var(--spacing-large))) + ); + } + } + + .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { + display: inline-flex; + } + + .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { + left: 0; + right: auto; + } + + .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { + left: auto; + right: 0; + } + + @media (max-width: 48rem) { + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-panel { + left: auto; + right: 0; + } + } + + .sg-pulldown-panel__row { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); + gap: var(--spacing-small); + align-items: center; + } + + .sg-pulldown-panel__label { + margin: 0; + color: var(--text-control-default); + } + +.sg-pulldown-panel__remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + background: var(--surface-activatable-remove); + color: var(--text-activatable-remove); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + -webkit-appearance: none; + appearance: none; + cursor: pointer; +} + + .sg-pulldown-panel__remove[hidden] { + display: none; + } + + .sg-pulldown-panel__row--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-pulldown-panel__row--disabled .sg-pulldown, + .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { + color: var(--text-control-disabled); + } + + .sg-pulldown-option-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; + } + + .sg-pulldown-option { + display: flex; + gap: var(--spacing-small); + align-items: flex-start; + padding-block: var(--interaction-padding-vertical); + padding-inline: var(--layout-pulldown-option-padding-inline); + border-radius: var(--radius-interaction); + white-space: normal; + overflow-wrap: anywhere; + color: var(--text-control-default); + cursor: pointer; + } + + .sg-pulldown-option--selected { + background: var(--surface-control-active); + } + + .sg-pulldown-option--disabled { + color: var(--text-control-disabled); + } + + .sg-pulldown-option__checkbox { + width: var(--font-size-base); + height: var(--font-size-base); + margin: 0; + } + + .sg-checkbox-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-checkbox-default); + cursor: pointer; + } + + .sg-checkbox-field--on-grey, + .sg-checkbox-field--on-color { + background: var(--surface-checkbox-on-context); + } + + .sg-checkbox-field__mark { + display: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 1; + } + + .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { + display: inline; + } + + .sg-checkbox-field.sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-checkbox-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-control-inactive); + opacity: var(--disabled-opacity); + } + + .sg-checkbox-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-checkbox-field-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + } + + .sg-checkbox-field-option { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-control-default); + flex-wrap: wrap; + } + + .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body { + margin-bottom: 0; + } + + #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + flex: 0 0 100%; + margin-bottom: var(--spacing-small); + } + + .sg-checkbox-field-option--inactive-selectable { + color: var(--text-control-default); + } + + #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"], + #component-radio-field .sg-checkbox-field-option[data-activatable="true"] { + gap: var(--spacing-large); + } + + .sg-radio-activatable-group__choices { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice > span { + color: var(--text-control-default); + opacity: 1; + } + + #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span { + opacity: var(--disabled-opacity); + } + + #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span { + opacity: 1; + } + + #component-radio-field .sg-checkbox-field-option { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + grid-column: 1; + margin-bottom: 0; + } + + #component-radio-field .sg-radio-field-row { + grid-column: 2; + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + min-width: 0; + flex-wrap: nowrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + margin-left: var(--spacing-large); + } + + #component-radio-field .sg-radio-field-row--without-label > .sg-radio-activatable-group__choices { + margin-left: 0; + } + + @media (max-width: 48rem) { + #component-radio-field .sg-checkbox-field-option { + grid-template-columns: 1fr; + align-items: start; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-radio-field-row { + grid-column: 1; + } + + #component-radio-field .sg-radio-field-row { + flex-wrap: wrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + flex: 0 0 100%; + margin-left: 0; + } + } + + .sg-checkbox-field-option--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-radio-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-radio-default); + cursor: pointer; + } + + .sg-radio-field__mark { + display: none; + width: calc(var(--small-interaction-element-size) * 0.44); + height: calc(var(--small-interaction-element-size) * 0.44); + border-radius: 50%; + background: var(--icon-radio-mark); + } + + .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { + display: block; + } + + .sg-radio-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-radio-default); + opacity: var(--disabled-opacity); + } + + .sg-radio-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-hyperlink { + color: var(--text-hyperlink); + text-decoration: none; + } diff --git a/docs/styleguide/styles/20-patterns-portal-header.css b/docs/styleguide/styles/20-patterns-portal-header.css new file mode 100644 index 0000000..11c6614 --- /dev/null +++ b/docs/styleguide/styles/20-patterns-portal-header.css @@ -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); + } +} diff --git a/docs/styleguide/styles/21-patterns-options-row.css b/docs/styleguide/styles/21-patterns-options-row.css new file mode 100644 index 0000000..610ca3b --- /dev/null +++ b/docs/styleguide/styles/21-patterns-options-row.css @@ -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; + } +} + diff --git a/docs/styleguide/styles/22-patterns-object-card.css b/docs/styleguide/styles/22-patterns-object-card.css new file mode 100644 index 0000000..8a52384 --- /dev/null +++ b/docs/styleguide/styles/22-patterns-object-card.css @@ -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; +} + diff --git a/docs/styleguide/styles/23-patterns-object-group-card.css b/docs/styleguide/styles/23-patterns-object-group-card.css new file mode 100644 index 0000000..8ada867 --- /dev/null +++ b/docs/styleguide/styles/23-patterns-object-group-card.css @@ -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; +} diff --git a/docs/styleguide/styles/24-patterns-navigation-card.css b/docs/styleguide/styles/24-patterns-navigation-card.css new file mode 100644 index 0000000..d3d3420 --- /dev/null +++ b/docs/styleguide/styles/24-patterns-navigation-card.css @@ -0,0 +1,4 @@ +/* ========================================================= */ +/* Patterns: Navigation Card */ +/* ========================================================= */ + diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css new file mode 100644 index 0000000..5bba2fe --- /dev/null +++ b/docs/styleguide/styles/25-patterns-form-sections.css @@ -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; + } +} diff --git a/docs/styleguide/styles/26-patterns-vsf-list-card.css b/docs/styleguide/styles/26-patterns-vsf-list-card.css new file mode 100644 index 0000000..906edec --- /dev/null +++ b/docs/styleguide/styles/26-patterns-vsf-list-card.css @@ -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); +} diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css new file mode 100644 index 0000000..06f9f9e --- /dev/null +++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css @@ -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; + } +} diff --git a/docs/styleguide/styles/28-patterns-notifications.css b/docs/styleguide/styles/28-patterns-notifications.css new file mode 100644 index 0000000..50ed93f --- /dev/null +++ b/docs/styleguide/styles/28-patterns-notifications.css @@ -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; + } +} diff --git a/docs/styleguide/styles/30-layouts-card-list-page.css b/docs/styleguide/styles/30-layouts-card-list-page.css new file mode 100644 index 0000000..94f8ba1 --- /dev/null +++ b/docs/styleguide/styles/30-layouts-card-list-page.css @@ -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); +} + diff --git a/docs/styleguide/styles/31-patterns-text-layouts.css b/docs/styleguide/styles/31-patterns-text-layouts.css new file mode 100644 index 0000000..5a6f365 --- /dev/null +++ b/docs/styleguide/styles/31-patterns-text-layouts.css @@ -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%; + } +} diff --git a/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css b/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css new file mode 100644 index 0000000..3f01f66 --- /dev/null +++ b/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css @@ -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; + } +} diff --git a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css new file mode 100644 index 0000000..d360a7f --- /dev/null +++ b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css @@ -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); + } +} diff --git a/docs/styleguide/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css b/docs/styleguide/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css new file mode 100644 index 0000000..8ed26fd --- /dev/null +++ b/docs/styleguide/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css @@ -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); + } +} diff --git a/docs/styleguide/styles/40-components-cards.css b/docs/styleguide/styles/40-components-cards.css new file mode 100644 index 0000000..fce5486 --- /dev/null +++ b/docs/styleguide/styles/40-components-cards.css @@ -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); +} diff --git a/docs/styleguide/styles/41-components-charts.css b/docs/styleguide/styles/41-components-charts.css new file mode 100644 index 0000000..62dafa7 --- /dev/null +++ b/docs/styleguide/styles/41-components-charts.css @@ -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) + ); +} diff --git a/docs/styleguide/styles/42-components-data-display.css b/docs/styleguide/styles/42-components-data-display.css new file mode 100644 index 0000000..bf6af2a --- /dev/null +++ b/docs/styleguide/styles/42-components-data-display.css @@ -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); +} + diff --git a/docs/styleguide/styles/43-components-typography.css b/docs/styleguide/styles/43-components-typography.css new file mode 100644 index 0000000..c8f8855 --- /dev/null +++ b/docs/styleguide/styles/43-components-typography.css @@ -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; +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css new file mode 100644 index 0000000..c64b7ff --- /dev/null +++ b/public/assets/styleguide.upstream.css @@ -0,0 +1,3899 @@ +/* ========================================================= */ +/* 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 { + --color-darkblue: #354A52; + --font-family-base: "Avenir", sans-serif; +} + +/* ========================================================= */ +/* 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; +} + + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* Components: Interactive Elements */ +/* ========================================================= */ + + + + .sg-component-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-component-column { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + /* + Form preview surface only: + All form elements in this component are intentionally shown on the form-area background. + This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. + The current preview background uses light-grey according to the style foundations. + */ + .sg-form-preview-area { + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--surface-form-preview); + } + + .sg-pulldown-demo { + position: relative; + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + + .sg-state-example { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) auto; + gap: var(--spacing-small); + align-items: center; + } + + .sg-state-example__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-activatable-control { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activatable-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-interaction-element { + box-sizing: border-box; + height: var(--interaction-height); + padding: + var(--interaction-padding-vertical) + var(--interaction-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-default); + } + + .sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-form-inactive-selectable { + background: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-form-disabled { + background: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-interaction-element:focus, + .sg-interaction-element:focus-visible { + outline: none; + } + + .sg-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-semibold); + cursor: pointer; + text-decoration: none; + } + + .sg-button--active { + background: var(--surface-button-active); + color: var(--text-control-default); + } + + .sg-button--process { + background: var(--surface-button-process); + color: var(--text-button-process); + } + + .sg-button--process-inactive { + background: var(--surface-button-process-inactive); + color: var(--text-button-process); + } + + .sg-button--inactive { + background: var(--surface-button-active); + color: var(--text-control-disabled); + } + + .sg-button:disabled, + .sg-button--disabled { + cursor: not-allowed; + color: var(--text-control-disabled); + } + + .sg-button--process-inactive:disabled { + color: var(--text-button-process); + } + + .sg-tab-button-group { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-tab-button-group[data-component-size="compact"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component-context="content"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { + padding-inline: var(--layout-tab-navigation-large-padding-inline); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-tab-unselected); + color: var(--text-tab-unselected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-selected); + color: var(--text-tab-selected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-control-default); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button--compact { + height: var(--compact-interaction-height); + padding: + var(--compact-interaction-padding-vertical) + var(--compact-interaction-padding-horizontal); + font-size: var(--font-size-small); + } + + .sg-pulldown { + font-weight: var(--font-weight-regular); + appearance: none; + padding-left: var(--layout-pulldown-padding-inline); + padding-right: calc( + var(--layout-pulldown-chevron-offset) + + var(--layout-pulldown-chevron-reserved-space) + ); + background-image: var(--icon-pulldown-chevron); + background-position: right var(--layout-pulldown-chevron-offset) center; + background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); + background-repeat: no-repeat; + } + + .sg-pulldown-demo__trigger { + display: block; + width: 100%; + min-width: 0; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown-demo[data-component-context="form"], + .sg-pulldown-demo[data-component-context="overlay"] { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger, + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--selected { + background-color: var(--surface-control-active); + color: var(--text-control-default); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown--inactive-selectable { + background-color: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable { + opacity: var(--disabled-opacity); + } + + .sg-labeled-input-row .sg-pulldown-demo, + .sg-labeled-input-row .sg-pulldown-demo .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--disabled { + background-color: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line { + font-weight: var(--font-weight-regular); + color: var(--text-control-default); + -webkit-appearance: none; + appearance: none; + } + + .sg-input-single-line::placeholder { + color: var(--text-control-disabled); + opacity: 1; + } + + .sg-input-single-line--inactive-selectable { + color: var(--text-control-default); + } + + .sg-input-single-line--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line-wrap { + position: relative; + display: inline-flex; + align-items: center; + } + + .sg-input-single-line-wrap .sg-input-single-line { + padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); + } + + .sg-input-clear-button { + position: absolute; + top: 0; + right: 0; + display: none; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + margin: 0; + border: var(--border-none); + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + box-shadow: var(--shadow-none); + -webkit-appearance: none; + appearance: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + color: var(--text-control-default); + background: var(--surface-input-clear); + cursor: pointer; + } + + .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { + display: inline-flex; + } + + .sg-search-field-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + white-space: nowrap; + flex-wrap: nowrap; + } + + .sg-search-field-input { + width: var(--layout-search-field-width); + } + + .sg-search-result-count { + color: var(--color-dark-grey); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + } + + .sg-labeled-input-row { + display: flex; + align-items: center; + gap: 0; + width: auto; + max-width: none; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + width: 100%; + min-width: 0; + max-width: var(--layout-form-input-field-max-width); + } + + .sg-labeled-input-row:has(.sg-input-multi-line) { + align-items: flex-start; + } + + .sg-input-multi-line { + box-sizing: border-box; + min-height: calc(var(--interaction-height) * 2.75); + padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); + border: var(--border-control); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-interaction-inset); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-inactive); + resize: vertical; + } + + .sg-input-component .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-labeled-input-row { + width: 100%; + max-width: none; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-pulldown-demo__trigger, + #component-pulldown .sg-state-example > .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-pulldown .sg-pulldown-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + justify-content: start; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-pulldown .sg-activatable-row .sg-pulldown-demo { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + } + + .sg-input-component .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + } + + @media (max-width: 48rem) { + .sg-input-component .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-pulldown .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + .sg-input-component .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: 100%; + } + + #component-pulldown .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: 0; + margin-bottom: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + min-width: 0; + max-width: 100%; + width: 100%; + } + } + + .sg-mode-toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + height: auto; + padding: 0; + border: var(--border-none); + border-radius: 0; + box-shadow: var(--shadow-none); + appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; + cursor: pointer; + } + + .sg-mode-toggle:focus, + .sg-mode-toggle:focus-visible { + outline: none; + } + + .sg-mode-toggle__label { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--text-control-default); + } + + .sg-mode-toggle__switch { + position: relative; + width: var(--layout-mode-toggle-width); + height: var(--interaction-height); + border-radius: var(--radius-interaction); + background: var(--surface-toggle-track); + } + + .sg-mode-toggle__handle { + position: absolute; + top: 0; + right: 0; + width: calc(100% / 2); + height: 100%; + border-radius: var(--radius-interaction); + background: var(--surface-toggle-handle); + } + + .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { + left: 0; + right: auto; + } + + .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { + left: auto; + right: 0; + } + + .sg-mode-toggle--local .sg-mode-toggle__label { + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + } + + .sg-mode-toggle--local .sg-mode-toggle__switch { + width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); + height: var(--layout-mode-toggle-local-height); + } + + .sg-activation-toggle-pattern { + display: flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activation-mode-toggle { + gap: 0; + } + + .sg-activation-mode-toggle .sg-mode-toggle__switch { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + overflow: hidden; + } + + .sg-activation-mode-toggle .sg-mode-toggle__handle { + z-index: 1; + } + + .sg-activation-mode-toggle__switch-label { + position: relative; + z-index: 2; + text-align: center; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--layout-mode-toggle-local-height); + text-transform: lowercase; + color: var(--text-control-default); + } + + .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left, + .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right { + color: var(--text-toggle-label-active); + } + + .sg-slider-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--spacing-small); + width: 100%; + max-width: none; + } + + .sg-slider-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + color: var(--text-control-default); + } + + .sg-slider { + flex: 1 1 14rem; + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + height: var(--interaction-height); + margin: 0; + padding: 0; + border: 0; + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + } + + .sg-slider::-webkit-slider-runnable-track { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: + linear-gradient( + to right, + var(--surface-slider-progress) 0%, + var(--surface-slider-progress) var(--sg-slider-progress, 0%), + var(--surface-slider-track) var(--sg-slider-progress, 0%), + var(--surface-slider-track) 100% + ); + } + + .sg-slider::-webkit-slider-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + margin-top: var(--dimension-slider-thumb-offset-top); + border: 0; + border-radius: 50%; + -webkit-appearance: none; + appearance: none; + background: var(--surface-slider-thumb); + } + + .sg-slider::-moz-range-track { + height: var(--dimension-slider-track-height); + border: 0; + border-radius: var(--radius-slider-track); + background: var(--surface-slider-track); + } + + .sg-slider::-moz-range-progress { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: var(--surface-slider-progress); + } + + .sg-slider::-moz-range-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + border: 0; + border-radius: 50%; + background: var(--surface-slider-thumb); + } + + .sg-slider-value { + flex: 0 0 auto; + min-width: calc(var(--interaction-height) * 1.25); + white-space: nowrap; + text-align: right; + color: var(--text-control-default); + } + + .sg-slider-row--inactive-selectable { + opacity: var(--disabled-opacity); + } + + #component-slider .sg-slider-row { + display: grid; + grid-template-columns: + max-content + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-slider .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-slider-row .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + } + + #component-slider .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 2; + } + + #component-slider .sg-state-example > .sg-slider-row, + #component-slider .sg-activatable-row .sg-slider-row { + max-width: var(--layout-input-field-max-width); + } + + #component-slider .sg-slider-row .sg-slider-value { + min-width: 0; + grid-column: 3; + justify-self: start; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + #component-slider .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-slider-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + justify-content: start; + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + grid-column: 2; + justify-self: start; + min-width: 0; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: + var(--layout-input-label-width) + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-small); + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + grid-column: 2; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + justify-self: end; + align-self: center; + white-space: nowrap; + grid-column: 3; + grid-row: 1; + } + + @media (max-width: 48rem) { + #component-slider .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + grid-row: 1; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + grid-template-columns: minmax(0, 1fr) auto; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + justify-self: start; + align-self: center; + margin: 0; + line-height: 1; + } + + } + + .sg-sandwich-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: calc(var(--interaction-height) + var(--spacing-small)); + height: calc(var(--interaction-height) + var(--spacing-small)); + padding: 0; + cursor: pointer; + } + + .sg-sandwich-button--small { + width: calc(var(--interaction-height) * 0.9); + height: calc(var(--interaction-height) * 0.9); + } + + .sg-sandwich-button__icon { + width: var(--sandwich-line-width); + height: auto; + display: flex; + flex-direction: column; + gap: var(--sandwich-line-gap); + justify-content: center; + } + + .sg-sandwich-button__line { + display: block; + width: 100%; + height: var(--sandwich-line-height); + border-radius: var(--radius-interaction); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { + height: calc(var(--sandwich-line-height) - 1px); + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { + width: calc(var(--sandwich-line-width) - 3px); + } + + .sg-sandwich-menu-wrap { + position: relative; + display: inline-flex; + } + + .sg-sandwich-menu-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + right: 0; + display: none; + flex-direction: column; + gap: var(--spacing-small); + width: max-content; + padding: var(--spacing-large); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-overlay); + z-index: var(--layer-pulldown-panel); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { + display: flex; + } + + .sg-sandwich-menu-link { + margin: 0; + text-decoration: none; + white-space: nowrap; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { + right: auto; + left: 0; + } + + .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { + right: 0; + left: auto; + } + + .sg-help-icon-wrap { + position: relative; + display: inline-flex; + vertical-align: middle; + } + + .sg-help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + 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-help-icon); + background: var(--surface-help-icon); + cursor: pointer; + } + + .sg-help-icon-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + width: var(--layout-help-panel-width); + max-width: calc(100vw - (2 * var(--spacing-large))); + box-sizing: border-box; + overflow-wrap: anywhere; + padding: var(--spacing-large); + border-radius: var(--radius-card); + color: var(--text-help-panel); + background: var(--surface-help-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-help-icon-panel { + width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); + max-width: calc(100dvw - (2 * var(--spacing-large))); + } + } + + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { + display: block; + } + + .sg-help-icon-wrap[data-open="true"] { + z-index: var(--layer-pulldown-panel); + } + + .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { + left: 0; + right: auto; + } + + .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + flex-direction: column; + gap: var(--spacing-small); + min-width: 100%; + width: max-content; + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100vw - (2 * var(--spacing-large))) + ); + box-sizing: border-box; + padding-block: var(--spacing-large); + padding-inline: var(--layout-pulldown-panel-padding-inline); + border-radius: var(--radius-card); + background: var(--surface-pulldown-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-pulldown-panel { + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100dvw - (2 * var(--spacing-large))) + ); + } + } + + .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { + display: inline-flex; + } + + .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { + left: 0; + right: auto; + } + + .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { + left: auto; + right: 0; + } + + @media (max-width: 48rem) { + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-panel { + left: auto; + right: 0; + } + } + + .sg-pulldown-panel__row { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); + gap: var(--spacing-small); + align-items: center; + } + + .sg-pulldown-panel__label { + margin: 0; + color: var(--text-control-default); + } + +.sg-pulldown-panel__remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + background: var(--surface-activatable-remove); + color: var(--text-activatable-remove); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + -webkit-appearance: none; + appearance: none; + cursor: pointer; +} + + .sg-pulldown-panel__remove[hidden] { + display: none; + } + + .sg-pulldown-panel__row--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-pulldown-panel__row--disabled .sg-pulldown, + .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { + color: var(--text-control-disabled); + } + + .sg-pulldown-option-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; + } + + .sg-pulldown-option { + display: flex; + gap: var(--spacing-small); + align-items: flex-start; + padding-block: var(--interaction-padding-vertical); + padding-inline: var(--layout-pulldown-option-padding-inline); + border-radius: var(--radius-interaction); + white-space: normal; + overflow-wrap: anywhere; + color: var(--text-control-default); + cursor: pointer; + } + + .sg-pulldown-option--selected { + background: var(--surface-control-active); + } + + .sg-pulldown-option--disabled { + color: var(--text-control-disabled); + } + + .sg-pulldown-option__checkbox { + width: var(--font-size-base); + height: var(--font-size-base); + margin: 0; + } + + .sg-checkbox-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-checkbox-default); + cursor: pointer; + } + + .sg-checkbox-field--on-grey, + .sg-checkbox-field--on-color { + background: var(--surface-checkbox-on-context); + } + + .sg-checkbox-field__mark { + display: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 1; + } + + .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { + display: inline; + } + + .sg-checkbox-field.sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-checkbox-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-control-inactive); + opacity: var(--disabled-opacity); + } + + .sg-checkbox-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-checkbox-field-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + } + + .sg-checkbox-field-option { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-control-default); + flex-wrap: wrap; + } + + .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body { + margin-bottom: 0; + } + + #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + flex: 0 0 100%; + margin-bottom: var(--spacing-small); + } + + .sg-checkbox-field-option--inactive-selectable { + color: var(--text-control-default); + } + + #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"], + #component-radio-field .sg-checkbox-field-option[data-activatable="true"] { + gap: var(--spacing-large); + } + + .sg-radio-activatable-group__choices { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice > span { + color: var(--text-control-default); + opacity: 1; + } + + #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span { + opacity: var(--disabled-opacity); + } + + #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span { + opacity: 1; + } + + #component-radio-field .sg-checkbox-field-option { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + grid-column: 1; + margin-bottom: 0; + } + + #component-radio-field .sg-radio-field-row { + grid-column: 2; + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + min-width: 0; + flex-wrap: nowrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + margin-left: var(--spacing-large); + } + + #component-radio-field .sg-radio-field-row--without-label > .sg-radio-activatable-group__choices { + margin-left: 0; + } + + @media (max-width: 48rem) { + #component-radio-field .sg-checkbox-field-option { + grid-template-columns: 1fr; + align-items: start; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-radio-field-row { + grid-column: 1; + } + + #component-radio-field .sg-radio-field-row { + flex-wrap: wrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + flex: 0 0 100%; + margin-left: 0; + } + } + + .sg-checkbox-field-option--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-radio-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-radio-default); + cursor: pointer; + } + + .sg-radio-field__mark { + display: none; + width: calc(var(--small-interaction-element-size) * 0.44); + height: calc(var(--small-interaction-element-size) * 0.44); + border-radius: 50%; + background: var(--icon-radio-mark); + } + + .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { + display: block; + } + + .sg-radio-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-radio-default); + opacity: var(--disabled-opacity); + } + + .sg-radio-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-hyperlink { + color: var(--text-hyperlink); + text-decoration: none; + } + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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; + } +} + + +/* ========================================================= */ +/* 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; +} + + +/* ========================================================= */ +/* 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; +} + +/* ========================================================= */ +/* Patterns: Navigation Card */ +/* ========================================================= */ + + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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%; + } +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* 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) + ); +} + +/* ========================================================= */ +/* 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); +} + + +/* ========================================================= */ +/* 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; +} + diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json new file mode 100644 index 0000000..f892531 --- /dev/null +++ b/public/assets/styleguide.upstream.meta.json @@ -0,0 +1,7 @@ +{ + "styleguideVersion": "2026.05.18.1", + "styleguideCommit": "f59701c", + "syncedAtUtc": "2026-06-03T14:25:03Z", + "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", + "mirroredDocsPath": "docs/styleguide" +} diff --git a/public/assets/styles.css b/public/assets/styles.css new file mode 100644 index 0000000..c64b7ff --- /dev/null +++ b/public/assets/styles.css @@ -0,0 +1,3899 @@ +/* ========================================================= */ +/* 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 { + --color-darkblue: #354A52; + --font-family-base: "Avenir", sans-serif; +} + +/* ========================================================= */ +/* 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; +} + + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* Components: Interactive Elements */ +/* ========================================================= */ + + + + .sg-component-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-component-column { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + /* + Form preview surface only: + All form elements in this component are intentionally shown on the form-area background. + This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. + The current preview background uses light-grey according to the style foundations. + */ + .sg-form-preview-area { + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--surface-form-preview); + } + + .sg-pulldown-demo { + position: relative; + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + + .sg-state-example { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) auto; + gap: var(--spacing-small); + align-items: center; + } + + .sg-state-example__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-activatable-control { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activatable-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-interaction-element { + box-sizing: border-box; + height: var(--interaction-height); + padding: + var(--interaction-padding-vertical) + var(--interaction-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-default); + } + + .sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-form-inactive-selectable { + background: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-form-disabled { + background: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-interaction-element:focus, + .sg-interaction-element:focus-visible { + outline: none; + } + + .sg-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-semibold); + cursor: pointer; + text-decoration: none; + } + + .sg-button--active { + background: var(--surface-button-active); + color: var(--text-control-default); + } + + .sg-button--process { + background: var(--surface-button-process); + color: var(--text-button-process); + } + + .sg-button--process-inactive { + background: var(--surface-button-process-inactive); + color: var(--text-button-process); + } + + .sg-button--inactive { + background: var(--surface-button-active); + color: var(--text-control-disabled); + } + + .sg-button:disabled, + .sg-button--disabled { + cursor: not-allowed; + color: var(--text-control-disabled); + } + + .sg-button--process-inactive:disabled { + color: var(--text-button-process); + } + + .sg-tab-button-group { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-tab-button-group[data-component-size="compact"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component-context="content"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { + padding-inline: var(--layout-tab-navigation-large-padding-inline); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-tab-unselected); + color: var(--text-tab-unselected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-selected); + color: var(--text-tab-selected); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] { + background: var(--surface-control-default); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button--compact { + height: var(--compact-interaction-height); + padding: + var(--compact-interaction-padding-vertical) + var(--compact-interaction-padding-horizontal); + font-size: var(--font-size-small); + } + + .sg-pulldown { + font-weight: var(--font-weight-regular); + appearance: none; + padding-left: var(--layout-pulldown-padding-inline); + padding-right: calc( + var(--layout-pulldown-chevron-offset) + + var(--layout-pulldown-chevron-reserved-space) + ); + background-image: var(--icon-pulldown-chevron); + background-position: right var(--layout-pulldown-chevron-offset) center; + background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); + background-repeat: no-repeat; + } + + .sg-pulldown-demo__trigger { + display: block; + width: 100%; + min-width: 0; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown-demo[data-component-context="form"], + .sg-pulldown-demo[data-component-context="overlay"] { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger, + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--selected { + background-color: var(--surface-control-active); + color: var(--text-control-default); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sg-pulldown--inactive-selectable { + background-color: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable { + opacity: var(--disabled-opacity); + } + + .sg-labeled-input-row .sg-pulldown-demo, + .sg-labeled-input-row .sg-pulldown-demo .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-pulldown--disabled { + background-color: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line { + font-weight: var(--font-weight-regular); + color: var(--text-control-default); + -webkit-appearance: none; + appearance: none; + } + + .sg-input-single-line::placeholder { + color: var(--text-control-disabled); + opacity: 1; + } + + .sg-input-single-line--inactive-selectable { + color: var(--text-control-default); + } + + .sg-input-single-line--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line-wrap { + position: relative; + display: inline-flex; + align-items: center; + } + + .sg-input-single-line-wrap .sg-input-single-line { + padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); + } + + .sg-input-clear-button { + position: absolute; + top: 0; + right: 0; + display: none; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + margin: 0; + border: var(--border-none); + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + box-shadow: var(--shadow-none); + -webkit-appearance: none; + appearance: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + color: var(--text-control-default); + background: var(--surface-input-clear); + cursor: pointer; + } + + .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { + display: inline-flex; + } + + .sg-search-field-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + white-space: nowrap; + flex-wrap: nowrap; + } + + .sg-search-field-input { + width: var(--layout-search-field-width); + } + + .sg-search-result-count { + color: var(--color-dark-grey); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + } + + .sg-labeled-input-row { + display: flex; + align-items: center; + gap: 0; + width: auto; + max-width: none; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + width: 100%; + min-width: 0; + max-width: var(--layout-form-input-field-max-width); + } + + .sg-labeled-input-row:has(.sg-input-multi-line) { + align-items: flex-start; + } + + .sg-input-multi-line { + box-sizing: border-box; + min-height: calc(var(--interaction-height) * 2.75); + padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); + border: var(--border-control); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-interaction-inset); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-inactive); + resize: vertical; + } + + .sg-input-component .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-labeled-input-row { + width: 100%; + max-width: none; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-pulldown-demo__trigger, + #component-pulldown .sg-state-example > .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-pulldown .sg-pulldown-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + justify-content: start; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-pulldown .sg-activatable-row .sg-pulldown-demo { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + } + + .sg-input-component .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + } + + @media (max-width: 48rem) { + .sg-input-component .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-pulldown .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + .sg-input-component .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: 100%; + } + + #component-pulldown .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: 0; + margin-bottom: var(--spacing-large); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + min-width: 0; + max-width: 100%; + width: 100%; + } + } + + .sg-mode-toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + height: auto; + padding: 0; + border: var(--border-none); + border-radius: 0; + box-shadow: var(--shadow-none); + appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; + cursor: pointer; + } + + .sg-mode-toggle:focus, + .sg-mode-toggle:focus-visible { + outline: none; + } + + .sg-mode-toggle__label { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--text-control-default); + } + + .sg-mode-toggle__switch { + position: relative; + width: var(--layout-mode-toggle-width); + height: var(--interaction-height); + border-radius: var(--radius-interaction); + background: var(--surface-toggle-track); + } + + .sg-mode-toggle__handle { + position: absolute; + top: 0; + right: 0; + width: calc(100% / 2); + height: 100%; + border-radius: var(--radius-interaction); + background: var(--surface-toggle-handle); + } + + .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { + left: 0; + right: auto; + } + + .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { + left: auto; + right: 0; + } + + .sg-mode-toggle--local .sg-mode-toggle__label { + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + } + + .sg-mode-toggle--local .sg-mode-toggle__switch { + width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); + height: var(--layout-mode-toggle-local-height); + } + + .sg-activation-toggle-pattern { + display: flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activation-mode-toggle { + gap: 0; + } + + .sg-activation-mode-toggle .sg-mode-toggle__switch { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + overflow: hidden; + } + + .sg-activation-mode-toggle .sg-mode-toggle__handle { + z-index: 1; + } + + .sg-activation-mode-toggle__switch-label { + position: relative; + z-index: 2; + text-align: center; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--layout-mode-toggle-local-height); + text-transform: lowercase; + color: var(--text-control-default); + } + + .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left, + .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right { + color: var(--text-toggle-label-active); + } + + .sg-slider-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--spacing-small); + width: 100%; + max-width: none; + } + + .sg-slider-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + color: var(--text-control-default); + } + + .sg-slider { + flex: 1 1 14rem; + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + height: var(--interaction-height); + margin: 0; + padding: 0; + border: 0; + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + } + + .sg-slider::-webkit-slider-runnable-track { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: + linear-gradient( + to right, + var(--surface-slider-progress) 0%, + var(--surface-slider-progress) var(--sg-slider-progress, 0%), + var(--surface-slider-track) var(--sg-slider-progress, 0%), + var(--surface-slider-track) 100% + ); + } + + .sg-slider::-webkit-slider-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + margin-top: var(--dimension-slider-thumb-offset-top); + border: 0; + border-radius: 50%; + -webkit-appearance: none; + appearance: none; + background: var(--surface-slider-thumb); + } + + .sg-slider::-moz-range-track { + height: var(--dimension-slider-track-height); + border: 0; + border-radius: var(--radius-slider-track); + background: var(--surface-slider-track); + } + + .sg-slider::-moz-range-progress { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: var(--surface-slider-progress); + } + + .sg-slider::-moz-range-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + border: 0; + border-radius: 50%; + background: var(--surface-slider-thumb); + } + + .sg-slider-value { + flex: 0 0 auto; + min-width: calc(var(--interaction-height) * 1.25); + white-space: nowrap; + text-align: right; + color: var(--text-control-default); + } + + .sg-slider-row--inactive-selectable { + opacity: var(--disabled-opacity); + } + + #component-slider .sg-slider-row { + display: grid; + grid-template-columns: + max-content + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-slider .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-slider-row .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + } + + #component-slider .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 2; + } + + #component-slider .sg-state-example > .sg-slider-row, + #component-slider .sg-activatable-row .sg-slider-row { + max-width: var(--layout-input-field-max-width); + } + + #component-slider .sg-slider-row .sg-slider-value { + min-width: 0; + grid-column: 3; + justify-self: start; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + #component-slider .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-slider-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + justify-content: start; + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + grid-column: 2; + justify-self: start; + min-width: 0; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: + var(--layout-input-label-width) + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-small); + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + grid-column: 2; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + justify-self: end; + align-self: center; + white-space: nowrap; + grid-column: 3; + grid-row: 1; + } + + @media (max-width: 48rem) { + #component-slider .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + grid-row: 1; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + grid-template-columns: minmax(0, 1fr) auto; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + justify-self: start; + align-self: center; + margin: 0; + line-height: 1; + } + + } + + .sg-sandwich-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: calc(var(--interaction-height) + var(--spacing-small)); + height: calc(var(--interaction-height) + var(--spacing-small)); + padding: 0; + cursor: pointer; + } + + .sg-sandwich-button--small { + width: calc(var(--interaction-height) * 0.9); + height: calc(var(--interaction-height) * 0.9); + } + + .sg-sandwich-button__icon { + width: var(--sandwich-line-width); + height: auto; + display: flex; + flex-direction: column; + gap: var(--sandwich-line-gap); + justify-content: center; + } + + .sg-sandwich-button__line { + display: block; + width: 100%; + height: var(--sandwich-line-height); + border-radius: var(--radius-interaction); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { + height: calc(var(--sandwich-line-height) - 1px); + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { + width: calc(var(--sandwich-line-width) - 3px); + } + + .sg-sandwich-menu-wrap { + position: relative; + display: inline-flex; + } + + .sg-sandwich-menu-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + right: 0; + display: none; + flex-direction: column; + gap: var(--spacing-small); + width: max-content; + padding: var(--spacing-large); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-overlay); + z-index: var(--layer-pulldown-panel); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { + display: flex; + } + + .sg-sandwich-menu-link { + margin: 0; + text-decoration: none; + white-space: nowrap; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { + right: auto; + left: 0; + } + + .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { + right: 0; + left: auto; + } + + .sg-help-icon-wrap { + position: relative; + display: inline-flex; + vertical-align: middle; + } + + .sg-help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + 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-help-icon); + background: var(--surface-help-icon); + cursor: pointer; + } + + .sg-help-icon-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + width: var(--layout-help-panel-width); + max-width: calc(100vw - (2 * var(--spacing-large))); + box-sizing: border-box; + overflow-wrap: anywhere; + padding: var(--spacing-large); + border-radius: var(--radius-card); + color: var(--text-help-panel); + background: var(--surface-help-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-help-icon-panel { + width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large)))); + max-width: calc(100dvw - (2 * var(--spacing-large))); + } + } + + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { + display: block; + } + + .sg-help-icon-wrap[data-open="true"] { + z-index: var(--layer-pulldown-panel); + } + + .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { + left: 0; + right: auto; + } + + .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + flex-direction: column; + gap: var(--spacing-small); + min-width: 100%; + width: max-content; + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100vw - (2 * var(--spacing-large))) + ); + box-sizing: border-box; + padding-block: var(--spacing-large); + padding-inline: var(--layout-pulldown-panel-padding-inline); + border-radius: var(--radius-card); + background: var(--surface-pulldown-panel); + box-shadow: var(--shadow-overlay); + } + + @supports (width: 100dvw) { + .sg-pulldown-panel { + max-width: min( + var(--layout-multiselect-pulldown-panel-desktop-width), + calc(100dvw - (2 * var(--spacing-large))) + ); + } + } + + .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { + display: inline-flex; + } + + .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { + left: 0; + right: auto; + } + + .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { + left: auto; + right: 0; + } + + @media (max-width: 48rem) { + .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-panel { + left: auto; + right: 0; + } + } + + .sg-pulldown-panel__row { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); + gap: var(--spacing-small); + align-items: center; + } + + .sg-pulldown-panel__label { + margin: 0; + color: var(--text-control-default); + } + +.sg-pulldown-panel__remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + background: var(--surface-activatable-remove); + color: var(--text-activatable-remove); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + -webkit-appearance: none; + appearance: none; + cursor: pointer; +} + + .sg-pulldown-panel__remove[hidden] { + display: none; + } + + .sg-pulldown-panel__row--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-pulldown-panel__row--disabled .sg-pulldown, + .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { + color: var(--text-control-disabled); + } + + .sg-pulldown-option-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; + } + + .sg-pulldown-option { + display: flex; + gap: var(--spacing-small); + align-items: flex-start; + padding-block: var(--interaction-padding-vertical); + padding-inline: var(--layout-pulldown-option-padding-inline); + border-radius: var(--radius-interaction); + white-space: normal; + overflow-wrap: anywhere; + color: var(--text-control-default); + cursor: pointer; + } + + .sg-pulldown-option--selected { + background: var(--surface-control-active); + } + + .sg-pulldown-option--disabled { + color: var(--text-control-disabled); + } + + .sg-pulldown-option__checkbox { + width: var(--font-size-base); + height: var(--font-size-base); + margin: 0; + } + + .sg-checkbox-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-checkbox-default); + cursor: pointer; + } + + .sg-checkbox-field--on-grey, + .sg-checkbox-field--on-color { + background: var(--surface-checkbox-on-context); + } + + .sg-checkbox-field__mark { + display: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 1; + } + + .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { + display: inline; + } + + .sg-checkbox-field.sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-checkbox-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-control-inactive); + opacity: var(--disabled-opacity); + } + + .sg-checkbox-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-checkbox-field-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + } + + .sg-checkbox-field-option { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-control-default); + flex-wrap: wrap; + } + + .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body { + margin-bottom: 0; + } + + #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + flex: 0 0 100%; + margin-bottom: var(--spacing-small); + } + + .sg-checkbox-field-option--inactive-selectable { + color: var(--text-control-default); + } + + #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"], + #component-radio-field .sg-checkbox-field-option[data-activatable="true"] { + gap: var(--spacing-large); + } + + .sg-radio-activatable-group__choices { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice > span { + color: var(--text-control-default); + opacity: 1; + } + + #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span { + opacity: var(--disabled-opacity); + } + + #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span { + opacity: 1; + } + + #component-radio-field .sg-checkbox-field-option { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + grid-column: 1; + margin-bottom: 0; + } + + #component-radio-field .sg-radio-field-row { + grid-column: 2; + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + min-width: 0; + flex-wrap: nowrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + margin-left: var(--spacing-large); + } + + #component-radio-field .sg-radio-field-row--without-label > .sg-radio-activatable-group__choices { + margin-left: 0; + } + + @media (max-width: 48rem) { + #component-radio-field .sg-checkbox-field-option { + grid-template-columns: 1fr; + align-items: start; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-radio-field-row { + grid-column: 1; + } + + #component-radio-field .sg-radio-field-row { + flex-wrap: wrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + flex: 0 0 100%; + margin-left: 0; + } + } + + .sg-checkbox-field-option--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-radio-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-radio-default); + cursor: pointer; + } + + .sg-radio-field__mark { + display: none; + width: calc(var(--small-interaction-element-size) * 0.44); + height: calc(var(--small-interaction-element-size) * 0.44); + border-radius: 50%; + background: var(--icon-radio-mark); + } + + .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { + display: block; + } + + .sg-radio-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-radio-default); + opacity: var(--disabled-opacity); + } + + .sg-radio-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-hyperlink { + color: var(--text-hyperlink); + text-decoration: none; + } + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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; + } +} + + +/* ========================================================= */ +/* 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; +} + + +/* ========================================================= */ +/* 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; +} + +/* ========================================================= */ +/* Patterns: Navigation Card */ +/* ========================================================= */ + + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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); + } +} + +/* ========================================================= */ +/* 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%; + } +} + +/* ========================================================= */ +/* 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; + } +} + +/* ========================================================= */ +/* 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); +} + +/* ========================================================= */ +/* 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) + ); +} + +/* ========================================================= */ +/* 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); +} + + +/* ========================================================= */ +/* 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; +} +