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-25 09:20:58 +02:00
parent 67674e1ae1
commit 9c8c28c5b1
11 changed files with 280 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/index.html
+1 -1
View File
@@ -41,7 +41,6 @@
<ul class="sg-index-list">
<li><a href="./patterns/portal-header.html">Portal Header</a></li>
<li><a href="./patterns/vsf-portal-header-public.html">VSF Portal Header Public</a></li>
<li><a href="./patterns/options-row.html">Options Row</a></li>
<li><a href="./patterns/object-card.html">Object Card</a></li>
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
@@ -66,6 +65,7 @@
<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-public.html">Page Layout Public</a></li>
<li><a href="./patterns/page-layout-public-2-column.html">Page Layout Public 2 Column</a></li>
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
</ul>
docs/styleguide/patterns/page-layout-public-2-column.html
+97
View File
@@ -0,0 +1,97 @@
<!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 2 Column</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – Page Layout Public 2 Column</h1>
<main aria-label="Page Layout Public 2 Column">
<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-page-layout-public__heading-block" aria-label="H1 Bereich">
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
</div>
<div class="sg-page-layout-public-2-column__columns">
<article class="sg-card sg-card--content-card sg-card--content-card-dark" data-component="content-card" aria-label="Fusszeile">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im Layout.
</p>
</div>
</article>
<div class="sg-page-layout-public-2-column__text-column">
<p class="sg-body sg-text-on-dark">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in
</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/public-page-patterns.html
+25
View File
@@ -61,6 +61,31 @@
</div>
</div>
<p class="sg-preview-label">Pattern: text and picture fullwidth</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-public-page-pattern-text-and-picture-fullwidth" data-pattern="text-and-picture-fullwidth">
<h2 class="sg-heading-h2">H2 Überschrift</h2>
<img
class="sg-picture-full-width"
data-component="picture-full-width"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
alt="Platzhalterbild für die Picture Full Width Component"
width="1600"
height="900"
>
<div class="sg-public-page-pattern-text-and-picture-fullwidth__text">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
</div>
<p class="sg-preview-label">Pattern: text and picture left</p>
<div class="sg-preview-area">
docs/styleguide/patterns/vsf-portal-header-public.html
-283
View File
@@ -1,283 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern VSF Portal Header Public</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – VSF Portal Header Public</h1>
<section id="pattern-portal-header">
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
<div class="sg-portal-header__menu-wrap" 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>
<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">Übersicht</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">Features</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">Preise</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">Firma der Woche</button>
</nav>
</div>
</header>
<div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Willkommen bei ValueStockFinder" data-component="transparent-card">
<h1 class="sg-heading-h1 sg-text-on-dark">Willkommen bei ValueStockFinder</h1>
</div>
</article>
</section>
<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');
button.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState));
});
});
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
toggle.addEventListener('click', () => {
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
toggle.dataset.active = nextState;
toggle.dataset.componentState = nextState;
toggle.setAttribute(
'aria-label',
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
);
});
});
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
if (!trigger || selectableOptions.length === 0) {
return;
}
const selectedCount = Array.from(selectableOptions).filter((option) => {
return option.getAttribute('aria-checked') === 'true';
}).length;
selectableOptions.forEach((option) => {
const optionRow = option.closest('.sg-pulldown-option');
if (!optionRow) {
return;
}
optionRow.classList.toggle(
'sg-pulldown-option--selected',
option.getAttribute('aria-checked') === 'true'
);
});
const labelBase = trigger.dataset.labelBase || 'Auswahl';
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
trigger.classList.toggle('sg-form-active', selectedCount > 0);
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
trigger.setAttribute(
'aria-label',
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
);
};
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
if (!trigger) {
return;
}
trigger.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = demo.dataset.open !== 'true';
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
otherDemo.dataset.open = 'false';
if (otherTrigger) {
otherTrigger.setAttribute('aria-expanded', 'false');
}
});
demo.dataset.align = 'left';
demo.dataset.open = String(nextState);
trigger.setAttribute('aria-expanded', String(nextState));
if (!nextState) {
return;
}
const panel = demo.querySelector('.sg-pulldown-panel');
if (!panel) {
return;
}
const panelRect = panel.getBoundingClientRect();
if (panelRect.right > window.innerWidth) {
demo.dataset.align = 'right';
}
const alignedPanelRect = panel.getBoundingClientRect();
if (alignedPanelRect.left < 0) {
demo.dataset.align = 'left';
}
});
});
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
checkbox.addEventListener('click', (event) => {
event.stopPropagation();
if (checkbox.disabled) {
return;
}
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
checkbox.setAttribute('aria-checked', String(nextState));
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
if (pulldownDemo) {
updatePulldownSelectionState(pulldownDemo);
pulldownDemo.dataset.open = 'true';
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
if (trigger) {
trigger.setAttribute('aria-expanded', 'true');
}
}
});
});
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
option.addEventListener('click', (event) => {
event.stopPropagation();
const pulldownDemo = option.closest('.sg-pulldown-demo');
if (pulldownDemo) {
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
if (selectionMode === 'multiple') {
const nextState = option.getAttribute('aria-checked') !== 'true';
option.setAttribute('aria-checked', String(nextState));
} else {
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
otherOption.setAttribute('aria-checked', String(otherOption === option));
});
}
updatePulldownSelectionState(pulldownDemo);
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
if (selectionMode === 'multiple') {
pulldownDemo.dataset.open = 'true';
if (trigger) {
trigger.setAttribute('aria-expanded', 'true');
}
} else {
pulldownDemo.dataset.open = 'false';
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
}
}
}
});
});
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
window.sgInitHelpIconOverlays({
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
});
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
const input = wrap.querySelector('.sg-input-single-line');
const clearButton = wrap.querySelector('.sg-input-clear-button');
if (!input || !clearButton) {
return;
}
const updateState = () => {
wrap.dataset.hasValue = String(input.value.length > 0);
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
};
input.addEventListener('input', updateState);
clearButton.addEventListener('click', () => {
input.value = '';
updateState();
input.focus();
});
updateState();
});
document.addEventListener('click', (event) => {
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
wrap.dataset.open = 'false';
if (button) {
button.setAttribute('aria-expanded', 'false');
}
});
}
if (event.target.closest('.sg-pulldown-demo')) {
return;
}
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
demo.dataset.open = 'false';
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
}
});
});
</script>
</body>
</html>
docs/styleguide/semantic-tokens-layouts.html
+2
View File
@@ -30,6 +30,8 @@
<tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
<tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
<tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
<tr><td>layout-page-layout-public-2-column-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Layouts <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
<tr><td>layout-page-layout-public-2-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen den beiden Inhalts-Spalten im Layout <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
docs/styleguide/styles/01-foundations.css
+2
View File
@@ -195,6 +195,8 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--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);
docs/styleguide/styles/37-layouts-page-layout-public.css
+16
View File
@@ -28,10 +28,26 @@ main {
flex: 1;
}
.sg-page-layout-public-2-column__columns {
display: grid;
grid-template-columns: var(--layout-page-layout-public-2-column-columns);
gap: var(--layout-page-layout-public-2-column-gap);
align-items: start;
}
.sg-page-layout-public-2-column__text-column {
min-width: 0;
}
@media (max-width: 48rem) {
.sg-page-layout-public__content-mirror {
width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
}
.sg-page-layout-public-2-column__columns {
display: flex;
flex-direction: column;
}
}
.sg-page-layout-public__footer-card {
docs/styleguide/styles/45-patterns-public-page-patterns.css
+33
View File
@@ -24,6 +24,16 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth {
--text-public-page-pattern-text-picture: var(--color-font-light);
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
gap: var(--spacing-large);
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -46,6 +56,11 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-heading-h2 {
margin: 0;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left > .sg-heading-h2 {
grid-area: heading;
margin: 0;
@@ -57,6 +72,15 @@
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-fullwidth__text {
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 60%;
min-width: 0;
}
.sg-public-page-pattern-text-and-picture-left__text {
grid-area: text;
min-width: 0;
@@ -77,6 +101,11 @@
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
margin: 0;
color: var(--text-public-page-pattern-text-picture);
}
.sg-public-page-pattern-text-and-picture-left__text .sg-body {
margin: 0;
color: var(--text-public-page-pattern-text-picture);
@@ -98,4 +127,8 @@
"picture"
"text";
}
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 100%;
}
}