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

feat: add stacked user notification pattern

Browse Source
This commit is contained in:
gitea_admin committed 2026-08-19 14:08:22 +02:00
1 parent 0f1e478dbc
commit 1d65a565c5
4 files changed
+82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

patterns/notifications.html
+42
View File
@@ -213,6 +213,48 @@
</div>
</section>
<section id="pattern-user-notification-staple">
<p class="sg-preview-label">Pattern: User Notification Staple</p>
<div class="sg-preview-area sg-user-notification-staple">
<article class="sg-card" data-pattern="user-notification-staple" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
<article class="sg-card" data-pattern="user-notification-staple" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
<article class="sg-card" data-pattern="user-notification-staple" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
</div>
</section>
<section id="pattern-notifications-small">
<p class="sg-preview-label">Pattern: Notifications small</p>
semantic-tokens-patterns.html
+1
View File
@@ -76,6 +76,7 @@
<tr><td>layout-notifications-text-segment-fixed-height</td><td>dimension-notifications-text-segment-fixed-height</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
<tr><td>layout-notifications-text-segment-fixed-height-small</td><td>dimension-notifications-text-segment-fixed-height-small</td><td>Fixe Desktop-Höhe des ersten Text-Segments in der Variante <code>Pattern: Notifications small</code>; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
<tr><td>layout-user-notification-card-width</td><td>dimension-user-notification-card-width</td><td>Breite des Patterns <code>Pattern: User Notification</code>; auf Desktop 70 % der verfügbaren Breite und auf Mobile 100 %.</td></tr>
<tr><td>layout-user-notification-staple-offset</td><td>spacing-small</td><td>Horizontale und vertikale Versetzung der hinteren Karten im Pattern <code>Pattern: User Notification Staple</code>.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Company Card</h3>
styles/01-foundations.css
+1
View File
@@ -178,6 +178,7 @@
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
--layout-notification-card-width: var(--dimension-notification-card-width);
--layout-user-notification-card-width: var(--dimension-user-notification-card-width);
--layout-user-notification-staple-offset: var(--spacing-small);
--dimension-notifications-card-min-width: 445px;
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
styles/28-patterns-notifications.css
+38
View File
@@ -52,6 +52,40 @@
align-items: flex-end;
}
.sg-user-notification-staple {
display: grid;
width: var(--layout-user-notification-card-width);
margin-inline: auto;
padding-inline-end: calc(var(--layout-user-notification-staple-offset) * 2);
padding-block-end: calc(var(--layout-user-notification-staple-offset) * 2);
box-sizing: border-box;
}
.sg-user-notification-staple > .sg-card {
grid-area: 1 / 1;
width: 100%;
min-width: 0;
max-width: none;
}
.sg-user-notification-staple > .sg-card:nth-child(2) {
transform: translate(
var(--layout-user-notification-staple-offset),
var(--layout-user-notification-staple-offset)
);
}
.sg-user-notification-staple > .sg-card:nth-child(3) {
transform: translate(
calc(var(--layout-user-notification-staple-offset) * 2),
calc(var(--layout-user-notification-staple-offset) * 2)
);
}
.sg-card-segment.sg-user-notification-staple__actions {
align-items: flex-end;
}
.sg-vsf-meldungen-layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -105,4 +139,8 @@
.sg-user-notification-pattern {
width: 100%;
}
.sg-user-notification-staple {
width: 100%;
}
}