Add notification card min width foundation token

This commit is contained in:
2026-06-02 19:44:54 +02:00
parent 9267b2fb70
commit c370bd3836
3 changed files with 6 additions and 4 deletions
+1
View File
@@ -141,6 +141,7 @@
<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>object-group-card-min-width</td><td>550px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr> <tr><td>object-group-card-min-width</td><td>550px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
<tr><td>object-group-card-max-width</td><td>800px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr> <tr><td>object-group-card-max-width</td><td>800px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
<tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr> <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
<tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr> <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
<tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr> <tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
+2 -2
View File
@@ -56,8 +56,8 @@
<h3 class="sg-sub-heading sg-section-h3">Notifications</h3> <h3 class="sg-sub-heading sg-section-h3">Notifications</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody> <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
<tr><td>layout-notifications-card-flex-basis</td><td>calc(var(--layout-object-card-min-width) + 50px)</td><td>Flex-Basis der Notification Card im Notifications-Pattern; entspricht der um 50px erhöhten Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von <code>.sg-group-card</code>.</td></tr> <tr><td>layout-notifications-card-flex-basis</td><td>dimension-notifications-card-min-width</td><td>Flex-Basis der Notification Card im Notifications-Pattern; entspricht der gemeinsamen Foundation-Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von <code>.sg-group-card</code>.</td></tr>
<tr><td>layout-notifications-card-min-width</td><td>calc(var(--layout-object-card-min-width) + 50px)</td><td>Mindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.</td></tr> <tr><td>layout-notifications-card-min-width</td><td>dimension-notifications-card-min-width</td><td>Mindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.</td></tr>
<tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr> <tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr>
<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</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-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>
+3 -2
View File
@@ -170,8 +170,9 @@
--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-notifications-card-flex-basis: calc(var(--layout-object-card-min-width) + 50px); --dimension-notifications-card-min-width: 445px;
--layout-notifications-card-min-width: calc(var(--layout-object-card-min-width) + 50px); --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-max-width: var(--layout-object-card-max-width); --layout-notifications-card-max-width: var(--layout-object-card-max-width);
--dimension-notifications-text-segment-fixed-height: 150px; --dimension-notifications-text-segment-fixed-height: 150px;
--dimension-notifications-text-segment-fixed-height-small: 60px; --dimension-notifications-text-segment-fixed-height-small: 60px;