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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 12:17:03 +02:00
parent 499cc25e7e
commit 674fe23c61
9 changed files with 301 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/index.html
+1
View File
@@ -63,6 +63,7 @@
<ul class="sg-index-list"> <ul class="sg-index-list">
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li> <li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
<li><a href="./patterns/page-layout-app.html">Page Layout App</a></li> <li><a href="./patterns/page-layout-app.html">Page Layout App</a></li>
<li><a href="./patterns/page-layout-public.html">Page Layout Public</a></li>
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li> <li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
</ul> </ul>
docs/styleguide/patterns/page-layout-public.html
+95
View File
@@ -0,0 +1,95 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Page Layout Public</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – Page Layout Public</h1>
<main aria-label="Page Layout Public">
<header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__auth-row" data-pattern-part="portal-header-action">
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Login
</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Registrieren
</button>
</div>
</div>
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 2</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 3</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 4</button>
</nav>
</div>
</header>
<div class="sg-page-layout-public__content-mirror">
<div class="sg-transparent-card sg-page-layout-public__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
<p class="sg-body sg-text-layout-pattern__sample">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
</p>
</div>
<div class="sg-text-layout-pattern__preview-surface sg-page-layout-public__footer-card" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column">
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundäre Footer-Inhalte im gleichen Raster.
</p>
</div>
</div>
</div>
</main>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__auth-row .sg-tab-button-group, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
const isActive = otherButton === button;
otherButton.setAttribute('aria-selected', String(isActive));
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
});
});
});
});
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
button.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState));
});
});
</script>
</body>
</html>
docs/styleguide/patterns/vsf-list-detailseite.html
+56 -105
View File
@@ -7,106 +7,16 @@
<link rel="stylesheet" href="../styleguide.css"> <link rel="stylesheet" href="../styleguide.css">
</head> </head>
<body> <body>
<h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite"> <section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header"> <h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action"> <div class="sg-tab-button-group sg-vsf-list-detail-page__mobile-tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-list-detail-panel-meldungen" id="vsf-list-detail-tab-meldungen" data-component-part="tab-button" data-vsf-list-detail-tab="meldungen">Meldungen</button>
<span class="sg-sandwich-button__icon" aria-hidden="true"> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-list-detail-panel-unternehmen" id="vsf-list-detail-tab-unternehmen" data-component-part="tab-button" data-vsf-list-detail-tab="unternehmen">Unternehmen</button>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Titel</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Listen</button>
</nav>
</div>
</header>
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
Sortierung
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
</ul>
</div>
</div>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
Region
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
</ul>
</div>
</div>
<div class="sg-search-field-row">
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
</span>
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
</div>
</div>
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
</button>
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
</span>
</span>
</div>
</div> </div>
<div class="sg-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card"> <div class="sg-vsf-list-detail-page__content" data-vsf-list-detail-active="meldungen">
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">TITEL DER LISTE</h1> <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen" role="tabpanel" aria-labelledby="vsf-list-detail-tab-meldungen" id="vsf-list-detail-panel-meldungen" data-vsf-list-detail-panel="meldungen">
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
</div>
<div class="sg-vsf-list-detail-page__content">
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern"> <div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false"> <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card"> <div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
@@ -198,7 +108,7 @@
</div> </div>
</aside> </aside>
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten"> <div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten" role="tabpanel" aria-labelledby="vsf-list-detail-tab-unternehmen" id="vsf-list-detail-panel-unternehmen" data-vsf-list-detail-panel="unternehmen">
<div class="sg-group-card" data-component="group-card"> <div class="sg-group-card" data-component="group-card">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2> <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste"> <div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
@@ -327,17 +237,58 @@
}); });
}; };
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => { const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
group.querySelectorAll('.sg-tab-button').forEach((button) => { const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
const vsfListDetailPanels = {
meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
};
const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
const syncVsfListDetailMobileState = (activeKey) => {
const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
if (vsfListDetailPage) {
vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
}
vsfListDetailButtons.forEach((button) => {
const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
button.setAttribute('aria-selected', String(isActive));
button.dataset.componentState = isActive ? 'active' : 'inactive';
});
const isMobile = vsfListDetailMobileQuery.matches;
Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
if (!panel) {
return;
}
panel.hidden = isMobile && key !== nextActiveKey;
panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
});
};
if (vsfListDetailMobileTabs) {
vsfListDetailButtons.forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => { syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
const isActive = otherButton === button;
otherButton.setAttribute('aria-selected', String(isActive));
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
});
}); });
}); });
}); }
const handleVsfListDetailMobileModeChange = () => {
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
};
if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
} else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
}
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => { document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button'); const button = wrap.querySelector('.sg-sandwich-button');
docs/styleguide/styleguide.css
+1
View File
@@ -14,6 +14,7 @@
@import "./styles/29-patterns-left-navigation.css"; @import "./styles/29-patterns-left-navigation.css";
@import "./styles/30-layouts-card-list-page.css"; @import "./styles/30-layouts-card-list-page.css";
@import "./styles/36-layouts-page-layout-app.css"; @import "./styles/36-layouts-page-layout-app.css";
@import "./styles/37-layouts-page-layout-public.css";
@import "./styles/33-layouts-vsf-list-detailseite.css"; @import "./styles/33-layouts-vsf-list-detailseite.css";
@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css"; @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
@import "./styles/35-layouts-vsf-register-step-1.css"; @import "./styles/35-layouts-vsf-register-step-1.css";
docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
+14 -26
View File
@@ -11,34 +11,16 @@
margin-top: var(--spacing-large); 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 { .sg-vsf-list-detail-page__content {
display: flex; display: flex;
gap: var(--spacing-small); gap: var(--spacing-small);
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__mobile-tabs {
display: none;
}
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
width: 30%; width: 30%;
min-width: 30%; min-width: 30%;
@@ -78,12 +60,15 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { .sg-vsf-list-detail-page__mobile-tabs {
display: flex;
width: 100%; width: 100%;
margin-bottom: 0;
} }
.sg-vsf-list-detail-page__content { .sg-vsf-list-detail-page__content {
display: block; display: block;
margin-top: var(--spacing-small);
} }
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
@@ -95,9 +80,12 @@
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__left-column .sg-group-card, .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
.sg-vsf-list-detail-page__right-column .sg-group-card { width: 100%;
margin-bottom: var(--spacing-large); }
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
display: none;
} }
.sg-vsf-list-detail-page__mobile-toggle { .sg-vsf-list-detail-page__mobile-toggle {
docs/styleguide/styles/37-layouts-page-layout-public.css
+34
View File
@@ -0,0 +1,34 @@
/* ========================================================= */
/* Layouts: Page Layout Public */
/* ========================================================= */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.sg-page-layout-public__heading-block {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.sg-page-layout-public__content-mirror {
width: 70vw;
max-width: 1100px;
margin-inline: auto;
display: flex;
flex-direction: column;
flex: 1;
}
.sg-page-layout-public__footer-card {
margin-top: auto;
background: var(--surface-card-group);
}
public/assets/styleguide.upstream.css
+49 -26
View File
@@ -3358,6 +3358,41 @@ section + section {
margin-bottom: var(--spacing-large); margin-bottom: var(--spacing-large);
} }
/* ========================================================= */
/* Layouts: Page Layout Public */
/* ========================================================= */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.sg-page-layout-public__heading-block {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.sg-page-layout-public__content-mirror {
width: 70vw;
max-width: 1100px;
margin-inline: auto;
display: flex;
flex-direction: column;
flex: 1;
}
.sg-page-layout-public__footer-card {
margin-top: auto;
background: var(--surface-card-group);
}
/* ========================================================= */ /* ========================================================= */
/* Layouts: VSF List Detailseite */ /* Layouts: VSF List Detailseite */
/* ========================================================= */ /* ========================================================= */
@@ -3371,34 +3406,16 @@ section + section {
margin-top: var(--spacing-large); 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 { .sg-vsf-list-detail-page__content {
display: flex; display: flex;
gap: var(--spacing-small); gap: var(--spacing-small);
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__mobile-tabs {
display: none;
}
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
width: 30%; width: 30%;
min-width: 30%; min-width: 30%;
@@ -3438,12 +3455,15 @@ section + section {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { .sg-vsf-list-detail-page__mobile-tabs {
display: flex;
width: 100%; width: 100%;
margin-bottom: 0;
} }
.sg-vsf-list-detail-page__content { .sg-vsf-list-detail-page__content {
display: block; display: block;
margin-top: var(--spacing-small);
} }
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
@@ -3455,9 +3475,12 @@ section + section {
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__left-column .sg-group-card, .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
.sg-vsf-list-detail-page__right-column .sg-group-card { width: 100%;
margin-bottom: var(--spacing-large); }
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
display: none;
} }
.sg-vsf-list-detail-page__mobile-toggle { .sg-vsf-list-detail-page__mobile-toggle {
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"styleguideVersion": "2026.05.18.1", "styleguideVersion": "2026.05.18.1",
"styleguideCommit": "3a596f3", "styleguideCommit": "38dcf14",
"syncedAtUtc": "2026-06-18T08:56:17Z", "syncedAtUtc": "2026-06-18T10:17:03Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide" "mirroredDocsPath": "docs/styleguide"
} }
public/assets/styles.css
+49 -26
View File
@@ -3358,6 +3358,41 @@ section + section {
margin-bottom: var(--spacing-large); margin-bottom: var(--spacing-large);
} }
/* ========================================================= */
/* Layouts: Page Layout Public */
/* ========================================================= */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.sg-page-layout-public__heading-block {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.sg-page-layout-public__content-mirror {
width: 70vw;
max-width: 1100px;
margin-inline: auto;
display: flex;
flex-direction: column;
flex: 1;
}
.sg-page-layout-public__footer-card {
margin-top: auto;
background: var(--surface-card-group);
}
/* ========================================================= */ /* ========================================================= */
/* Layouts: VSF List Detailseite */ /* Layouts: VSF List Detailseite */
/* ========================================================= */ /* ========================================================= */
@@ -3371,34 +3406,16 @@ section + section {
margin-top: var(--spacing-large); 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 { .sg-vsf-list-detail-page__content {
display: flex; display: flex;
gap: var(--spacing-small); gap: var(--spacing-small);
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__mobile-tabs {
display: none;
}
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
width: 30%; width: 30%;
min-width: 30%; min-width: 30%;
@@ -3438,12 +3455,15 @@ section + section {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { .sg-vsf-list-detail-page__mobile-tabs {
display: flex;
width: 100%; width: 100%;
margin-bottom: 0;
} }
.sg-vsf-list-detail-page__content { .sg-vsf-list-detail-page__content {
display: block; display: block;
margin-top: var(--spacing-small);
} }
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
@@ -3455,9 +3475,12 @@ section + section {
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__left-column .sg-group-card, .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
.sg-vsf-list-detail-page__right-column .sg-group-card { width: 100%;
margin-bottom: var(--spacing-large); }
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
display: none;
} }
.sg-vsf-list-detail-page__mobile-toggle { .sg-vsf-list-detail-page__mobile-toggle {