Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -155,6 +155,8 @@
|
|||||||
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
||||||
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
||||||
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
|
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
|
||||||
|
<tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
|
||||||
|
<tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
|
||||||
<tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
|
<tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
|
||||||
<tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
|
<tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
|
||||||
<tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
|
<tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
|
||||||
|
|||||||
@@ -62,6 +62,7 @@
|
|||||||
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
|
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
|
||||||
<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/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>
|
||||||
|
|
||||||
|
|||||||
@@ -104,6 +104,20 @@
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sg-sub-heading sg-section-h2">Object Card Content Basic</h2>
|
||||||
|
<p class="sg-preview-label">Pattern: Object Card Content Basic</p>
|
||||||
|
<p class="sg-body">Hinweis: Diese Variante ist für spezifische Inhalte gedacht, die eine Nutzerinteraktion erfordern, zum Beispiel Zustimmungen oder Freigaben. Im Styleguide wird hier nur das Card-Layout gezeigt.</p>
|
||||||
|
|
||||||
|
<article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card-content-basic" data-pattern="object-card-content-basic" aria-label="Objekt Card Content Basic">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-content-basic-header">
|
||||||
|
<div class="sg-strong">Zustimmung zu Geschäftsbedingungen</div>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content-basic-content">
|
||||||
|
<p class="sg-body">Bevor Sie fortfahren, prüfen Sie bitte die Inhalte der Geschäftsbedingungen und bestätigen Sie die Zustimmung im Zielsystem.</p>
|
||||||
|
<p class="sg-body">Die Karte ist bewusst kompakt gehalten und für lesbare, interaktionspflichtige Inhalte auf Desktop mittig ausgerichtet.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
|
<h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
|
||||||
<p class="sg-preview-label">Pattern: Object Card variable height</p>
|
<p class="sg-preview-label">Pattern: Object Card variable height</p>
|
||||||
<p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
|
<p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
|
||||||
|
|||||||
@@ -0,0 +1,312 @@
|
|||||||
|
<!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 App</title>
|
||||||
|
<link rel="stylesheet" href="../styleguide.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="sg-main-heading">Layout – Page Layout App</h1>
|
||||||
|
|
||||||
|
<main aria-label="Page Layout App">
|
||||||
|
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
||||||
|
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
||||||
|
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
||||||
|
|
||||||
|
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||||
|
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||||
|
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||||
|
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||||
|
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||||
|
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||||
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||||
|
Sortierung
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||||
|
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 1</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 2</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 3</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 4</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||||
|
<span>Menüpunkt 5</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||||
|
Region
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||||
|
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 1</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 2</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 3</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
|
<span>Menüpunkt 4</span>
|
||||||
|
</li>
|
||||||
|
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||||
|
<span>Menüpunkt 5</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-search-field-row">
|
||||||
|
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<input
|
||||||
|
class="sg-interaction-element sg-input-single-line"
|
||||||
|
type="text"
|
||||||
|
placeholder="Suche"
|
||||||
|
aria-label="Suche"
|
||||||
|
>
|
||||||
|
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||||
|
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||||
|
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||||
|
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||||
|
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||||
|
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||||
|
|
||||||
|
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||||
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-transparent-card sg-page-layout-app__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
||||||
|
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||||||
|
<p class="sg-body">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||||||
|
<div class="sg-group-card__header-row">
|
||||||
|
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Inhalt</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||||
|
<p class="sg-body">
|
||||||
|
Zeile 01<br>
|
||||||
|
Zeile 02<br>
|
||||||
|
Zeile 03<br>
|
||||||
|
Zeile 04<br>
|
||||||
|
Zeile 05<br>
|
||||||
|
Zeile 06<br>
|
||||||
|
Zeile 07<br>
|
||||||
|
Zeile 08<br>
|
||||||
|
Zeile 09<br>
|
||||||
|
Zeile 10<br>
|
||||||
|
Zeile 11<br>
|
||||||
|
Zeile 12<br>
|
||||||
|
Zeile 13<br>
|
||||||
|
Zeile 14<br>
|
||||||
|
Zeile 15<br>
|
||||||
|
Zeile 16<br>
|
||||||
|
Zeile 17<br>
|
||||||
|
Zeile 18<br>
|
||||||
|
Zeile 19<br>
|
||||||
|
Zeile 20<br>
|
||||||
|
Zeile 21<br>
|
||||||
|
Zeile 22<br>
|
||||||
|
Zeile 23<br>
|
||||||
|
Zeile 24<br>
|
||||||
|
Zeile 25<br>
|
||||||
|
Zeile 26<br>
|
||||||
|
Zeile 27<br>
|
||||||
|
Zeile 28<br>
|
||||||
|
Zeile 29<br>
|
||||||
|
Zeile 30
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="../scripts/help-icon-overlays.js"></script>
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
|
||||||
|
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||||
|
const isActive = otherButton === button;
|
||||||
|
otherButton.setAttribute('aria-selected', String(isActive));
|
||||||
|
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-sandwich-button');
|
||||||
|
|
||||||
|
if (!button) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = wrap.dataset.open !== 'true';
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||||||
|
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||||||
|
otherWrap.dataset.open = 'false';
|
||||||
|
if (otherButton) {
|
||||||
|
otherButton.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wrap.dataset.open = String(nextState);
|
||||||
|
button.setAttribute('aria-expanded', String(nextState));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePulldownSelectionState = (demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||||
|
|
||||||
|
if (!trigger || selectableOptions.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||||
|
return option.getAttribute('aria-checked') === 'true';
|
||||||
|
}).length;
|
||||||
|
|
||||||
|
selectableOptions.forEach((option) => {
|
||||||
|
const optionRow = option.closest('.sg-pulldown-option');
|
||||||
|
if (!optionRow) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
optionRow.classList.toggle(
|
||||||
|
'sg-pulldown-option--selected',
|
||||||
|
option.getAttribute('aria-checked') === 'true'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||||
|
|
||||||
|
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||||||
|
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||||||
|
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||||||
|
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||||
|
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||||
|
trigger.setAttribute(
|
||||||
|
'aria-label',
|
||||||
|
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
|
||||||
|
if (!trigger) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
trigger.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = demo.dataset.open !== 'true';
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||||
|
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
otherDemo.dataset.open = 'false';
|
||||||
|
if (otherTrigger) {
|
||||||
|
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
demo.dataset.align = 'left';
|
||||||
|
demo.dataset.open = String(nextState);
|
||||||
|
trigger.setAttribute('aria-expanded', String(nextState));
|
||||||
|
updatePulldownSelectionState(demo);
|
||||||
|
});
|
||||||
|
|
||||||
|
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
|
||||||
|
option.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextChecked = option.getAttribute('aria-checked') !== 'true';
|
||||||
|
option.setAttribute('aria-checked', String(nextChecked));
|
||||||
|
updatePulldownSelectionState(demo);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePulldownSelectionState(demo);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||||||
|
toggle.dataset.active = nextState;
|
||||||
|
toggle.dataset.componentState = nextState;
|
||||||
|
toggle.setAttribute(
|
||||||
|
'aria-label',
|
||||||
|
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -59,6 +59,55 @@
|
|||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<section id="pattern-public-portal-header">
|
||||||
|
<h1 class="sg-main-heading">Pattern – Public Portal Header</h1>
|
||||||
|
|
||||||
|
<p class="sg-preview-label">Pattern: Public Portal Header</p>
|
||||||
|
|
||||||
|
<p class="sg-table-label sg-text-on-dark">
|
||||||
|
Desktop/Tablet: Header skaliert über die verfügbare Breite.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="sg-table-label sg-text-on-dark">
|
||||||
|
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
|
||||||
|
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||||
|
Variante: Public Portal Header ohne Options Row
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||||
|
Nächstes Element (Abstand nach unten: spacing-large)
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||||
Variante: Portal Header mit Options Row
|
Variante: Portal Header mit Options Row
|
||||||
@@ -197,7 +246,7 @@
|
|||||||
|
|
||||||
<script src="../scripts/help-icon-overlays.js"></script>
|
<script src="../scripts/help-icon-overlays.js"></script>
|
||||||
<script>
|
<script>
|
||||||
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
|
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) => {
|
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||||
|
|||||||
@@ -56,6 +56,8 @@
|
|||||||
<tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
<tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||||
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||||
<tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
<tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||||
|
<tr><td>layout-content-card-margin-top-desktop</td><td>dimension-content-card-margin-top-desktop</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
|
||||||
|
<tr><td>layout-content-card-margin-top-mobile</td><td>dimension-content-card-margin-top-mobile</td><td>Oberer Außenabstand der Content Card auf Mobile.</td></tr>
|
||||||
<tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
|
<tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
@import "./styles/28-patterns-notifications.css";
|
@import "./styles/28-patterns-notifications.css";
|
||||||
@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/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";
|
||||||
|
|||||||
@@ -172,6 +172,8 @@
|
|||||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
--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-mobile-height: var(--dimension-object-card-mobile-height);
|
||||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||||
|
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||||
|
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||||
--dimension-notifications-card-min-width: 445px;
|
--dimension-notifications-card-min-width: 445px;
|
||||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
--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-min-width: var(--dimension-notifications-card-min-width);
|
||||||
@@ -273,6 +275,8 @@
|
|||||||
--dimension-object-card-mobile-width: 100%;
|
--dimension-object-card-mobile-width: 100%;
|
||||||
--dimension-object-card-mobile-height: auto;
|
--dimension-object-card-mobile-height: auto;
|
||||||
--dimension-object-card-desktop-breakpoint: 768px;
|
--dimension-object-card-desktop-breakpoint: 768px;
|
||||||
|
--dimension-content-card-margin-top-desktop: 100px;
|
||||||
|
--dimension-content-card-margin-top-mobile: 1rem;
|
||||||
--dimension-object-group-card-min-width: 450px;
|
--dimension-object-group-card-min-width: 450px;
|
||||||
--dimension-object-group-card-max-width: 650px;
|
--dimension-object-group-card-max-width: 650px;
|
||||||
--dimension-object-group-card-height: 700px;
|
--dimension-object-group-card-height: 700px;
|
||||||
|
|||||||
@@ -20,6 +20,18 @@
|
|||||||
background: var(--surface-portal-header);
|
background: var(--surface-portal-header);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__auth-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header__main {
|
.sg-portal-header__main {
|
||||||
display: grid;
|
display: grid;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
@@ -49,6 +61,10 @@
|
|||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header-pattern-variant {
|
.sg-portal-header-pattern-variant {
|
||||||
margin-bottom: var(--spacing-large);
|
margin-bottom: var(--spacing-large);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -70,3 +70,25 @@
|
|||||||
.sg-object-card--variable-height {
|
.sg-object-card--variable-height {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: min(70vw, var(--layout-object-card-max-width));
|
||||||
|
margin-inline: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: var(--layout-object-card-mobile-width);
|
||||||
|
min-width: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-options-row {
|
.sg-card-list-page > .sg-options-row {
|
||||||
margin-top: var(--spacing-large);
|
margin-top: var(--layout-options-row-margin-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||||
@@ -71,6 +71,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-large);
|
gap: var(--spacing-large);
|
||||||
|
padding-bottom: calc(var(--spacing-large) - 0.25rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page__title-row {
|
.sg-card-list-page__title-row {
|
||||||
@@ -183,4 +184,3 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text-vsf-drawer-object-card-body);
|
color: var(--text-vsf-drawer-object-card-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
/* ========================================================= */
|
||||||
|
/* Layouts: Page Layout App */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.sg-page-layout-app__heading-block {
|
||||||
|
margin-top: var(--spacing-large);
|
||||||
|
margin-bottom: var(--spacing-large);
|
||||||
|
}
|
||||||
@@ -172,6 +172,8 @@
|
|||||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
--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-mobile-height: var(--dimension-object-card-mobile-height);
|
||||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||||
|
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||||
|
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||||
--dimension-notifications-card-min-width: 445px;
|
--dimension-notifications-card-min-width: 445px;
|
||||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
--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-min-width: var(--dimension-notifications-card-min-width);
|
||||||
@@ -273,6 +275,8 @@
|
|||||||
--dimension-object-card-mobile-width: 100%;
|
--dimension-object-card-mobile-width: 100%;
|
||||||
--dimension-object-card-mobile-height: auto;
|
--dimension-object-card-mobile-height: auto;
|
||||||
--dimension-object-card-desktop-breakpoint: 768px;
|
--dimension-object-card-desktop-breakpoint: 768px;
|
||||||
|
--dimension-content-card-margin-top-desktop: 100px;
|
||||||
|
--dimension-content-card-margin-top-mobile: 1rem;
|
||||||
--dimension-object-group-card-min-width: 450px;
|
--dimension-object-group-card-min-width: 450px;
|
||||||
--dimension-object-group-card-max-width: 650px;
|
--dimension-object-group-card-max-width: 650px;
|
||||||
--dimension-object-group-card-height: 700px;
|
--dimension-object-group-card-height: 700px;
|
||||||
@@ -2021,6 +2025,18 @@ section + section {
|
|||||||
background: var(--surface-portal-header);
|
background: var(--surface-portal-header);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__auth-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header__main {
|
.sg-portal-header__main {
|
||||||
display: grid;
|
display: grid;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
@@ -2050,6 +2066,10 @@ section + section {
|
|||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header-pattern-variant {
|
.sg-portal-header-pattern-variant {
|
||||||
margin-bottom: var(--spacing-large);
|
margin-bottom: var(--spacing-large);
|
||||||
}
|
}
|
||||||
@@ -2312,6 +2332,28 @@ section + section {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: min(70vw, var(--layout-object-card-max-width));
|
||||||
|
margin-inline: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: var(--layout-object-card-mobile-width);
|
||||||
|
min-width: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
/* Patterns: Object Group Card */
|
/* Patterns: Object Group Card */
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
@@ -3196,7 +3238,7 @@ section + section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-options-row {
|
.sg-card-list-page > .sg-options-row {
|
||||||
margin-top: var(--spacing-large);
|
margin-top: var(--layout-options-row-margin-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||||
@@ -3207,6 +3249,7 @@ section + section {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-large);
|
gap: var(--spacing-large);
|
||||||
|
padding-bottom: calc(var(--spacing-large) - 0.25rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page__title-row {
|
.sg-card-list-page__title-row {
|
||||||
@@ -3320,6 +3363,14 @@ section + section {
|
|||||||
color: var(--text-vsf-drawer-object-card-body);
|
color: var(--text-vsf-drawer-object-card-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========================================================= */
|
||||||
|
/* Layouts: Page Layout App */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.sg-page-layout-app__heading-block {
|
||||||
|
margin-top: var(--spacing-large);
|
||||||
|
margin-bottom: var(--spacing-large);
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
/* Layouts: VSF List Detailseite */
|
/* Layouts: VSF List Detailseite */
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"styleguideVersion": "2026.05.18.1",
|
"styleguideVersion": "2026.05.18.1",
|
||||||
"styleguideCommit": "46a742f",
|
"styleguideCommit": "e90e521",
|
||||||
"syncedAtUtc": "2026-06-17T11:45:34Z",
|
"syncedAtUtc": "2026-06-18T08:48:09Z",
|
||||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||||
"mirroredDocsPath": "docs/styleguide"
|
"mirroredDocsPath": "docs/styleguide"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -172,6 +172,8 @@
|
|||||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
--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-mobile-height: var(--dimension-object-card-mobile-height);
|
||||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||||
|
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||||
|
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||||
--dimension-notifications-card-min-width: 445px;
|
--dimension-notifications-card-min-width: 445px;
|
||||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
--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-min-width: var(--dimension-notifications-card-min-width);
|
||||||
@@ -273,6 +275,8 @@
|
|||||||
--dimension-object-card-mobile-width: 100%;
|
--dimension-object-card-mobile-width: 100%;
|
||||||
--dimension-object-card-mobile-height: auto;
|
--dimension-object-card-mobile-height: auto;
|
||||||
--dimension-object-card-desktop-breakpoint: 768px;
|
--dimension-object-card-desktop-breakpoint: 768px;
|
||||||
|
--dimension-content-card-margin-top-desktop: 100px;
|
||||||
|
--dimension-content-card-margin-top-mobile: 1rem;
|
||||||
--dimension-object-group-card-min-width: 450px;
|
--dimension-object-group-card-min-width: 450px;
|
||||||
--dimension-object-group-card-max-width: 650px;
|
--dimension-object-group-card-max-width: 650px;
|
||||||
--dimension-object-group-card-height: 700px;
|
--dimension-object-group-card-height: 700px;
|
||||||
@@ -2021,6 +2025,18 @@ section + section {
|
|||||||
background: var(--surface-portal-header);
|
background: var(--surface-portal-header);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__auth-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header__main {
|
.sg-portal-header__main {
|
||||||
display: grid;
|
display: grid;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
@@ -2050,6 +2066,10 @@ section + section {
|
|||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-portal-header-pattern-variant {
|
.sg-portal-header-pattern-variant {
|
||||||
margin-bottom: var(--spacing-large);
|
margin-bottom: var(--spacing-large);
|
||||||
}
|
}
|
||||||
@@ -2312,6 +2332,28 @@ section + section {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: min(70vw, var(--layout-object-card-max-width));
|
||||||
|
margin-inline: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.sg-object-card--content-basic {
|
||||||
|
width: var(--layout-object-card-mobile-width);
|
||||||
|
min-width: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-object-card-content-basic {
|
||||||
|
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
/* Patterns: Object Group Card */
|
/* Patterns: Object Group Card */
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
@@ -3196,7 +3238,7 @@ section + section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-options-row {
|
.sg-card-list-page > .sg-options-row {
|
||||||
margin-top: var(--spacing-large);
|
margin-top: var(--layout-options-row-margin-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||||
@@ -3207,6 +3249,7 @@ section + section {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-large);
|
gap: var(--spacing-large);
|
||||||
|
padding-bottom: calc(var(--spacing-large) - 0.25rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page__title-row {
|
.sg-card-list-page__title-row {
|
||||||
@@ -3320,6 +3363,14 @@ section + section {
|
|||||||
color: var(--text-vsf-drawer-object-card-body);
|
color: var(--text-vsf-drawer-object-card-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========================================================= */
|
||||||
|
/* Layouts: Page Layout App */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.sg-page-layout-app__heading-block {
|
||||||
|
margin-top: var(--spacing-large);
|
||||||
|
margin-bottom: var(--spacing-large);
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
/* Layouts: VSF List Detailseite */
|
/* Layouts: VSF List Detailseite */
|
||||||
|
|||||||
Reference in New Issue
Block a user