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-03 16:25:03 +02:00
parent 70272e81d6
commit 543d3e5af5
66 changed files with 22706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/notifications.html
+264
View File
@@ -0,0 +1,264 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern Notifications</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – Notifications</h1>
<section id="pattern-notifications">
<p class="sg-preview-label">Pattern: Notifications</p>
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
</div>
</section>
<section id="pattern-notifications-with-title">
<p class="sg-preview-label">Pattern: Notification with title</p>
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
</div>
</section>
<section id="pattern-notifications-small">
<p class="sg-preview-label">Pattern: Notifications small</p>
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
</div>
</section>
<script>
const updateNotificationsPatternRowState = () => {
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
grid.classList.remove('sg-notifications-pattern--multi-row');
grid.style.removeProperty('--layout-object-card-shared-width');
if (cards.length <= 1) {
return;
}
const firstTop = cards[0].offsetTop;
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
if (!hasMultipleRows) {
return;
}
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
const referenceCard = firstRowCards[0];
if (!referenceCard) {
return;
}
const referenceWidth = referenceCard.getBoundingClientRect().width;
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
grid.classList.add('sg-notifications-pattern--multi-row');
});
};
window.addEventListener('load', updateNotificationsPatternRowState);
window.addEventListener('resize', updateNotificationsPatternRowState);
</script>
</body>
</html>