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-07-07 14:42:15 +02:00
parent 9942256db4
commit 720c5cf6d9
10 changed files with 145 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/object-card.html
+18
View File
@@ -159,6 +159,24 @@
</div>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Notification</h2>
<p class="sg-preview-label">Pattern: Notification</p>
<p class="sg-body">Hinweis: Diese Variante basiert auf Object Card Content Basic, ist auf 50% Breite ausgelegt und nutzt hellgelbe Untersegmente.</p>
<article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card--notification" data-pattern="object-card-notification" aria-label="Notification Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-object-card__header" data-pattern-part="object-card-notification-header">
<div class="sg-strong">Benachrichtigung</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-notification-content">
<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. Donec vitae sapien ut libero venenatis faucibus.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-notification-actions">
<div class="sg-object-card__actions sg-notification-card__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button">Verstanden</button>
</div>
</footer>
</article>
</section>
<script>
docs/styleguide/patterns/portal-header.html
+12 -8
View File
@@ -69,7 +69,7 @@
</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.
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Basic Card darunter.
</p>
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -92,16 +92,20 @@
<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>
<article class="sg-card sg-portal-header-pattern-variant__links-card" data-component="basic-card" aria-label="Hauptnavigation">
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
<nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
<a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 3</a>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
</nav>
</div>
</article>
<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>