diff --git a/foundations.html b/foundations.html index 488b43f..9ecbbf5 100644 --- a/foundations.html +++ b/foundations.html @@ -141,6 +141,7 @@ object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). object-group-card-min-width550pxMindestbreite der Group Card im Pattern Object Group Card. object-group-card-max-width800pxMaximale Breite der Group Card im Pattern Object Group Card. + notifications-card-min-width445pxMindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. multiselect-pulldown-panel-desktop-width500pxReservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index b5d331b..e51d9bc 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -56,8 +56,8 @@

Notifications

- - + + diff --git a/styles/01-foundations.css b/styles/01-foundations.css index c7594d4..d68f7bc 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -170,8 +170,9 @@ --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-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint); - --layout-notifications-card-flex-basis: calc(var(--layout-object-card-min-width) + 50px); - --layout-notifications-card-min-width: calc(var(--layout-object-card-min-width) + 50px); + --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); --layout-notifications-card-max-width: var(--layout-object-card-max-width); --dimension-notifications-text-segment-fixed-height: 150px; --dimension-notifications-text-segment-fixed-height-small: 60px;
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-notifications-card-flex-basiscalc(var(--layout-object-card-min-width) + 50px)Flex-Basis der Notification Card im Notifications-Pattern; entspricht der um 50px erhöhten Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von .sg-group-card.
layout-notifications-card-min-widthcalc(var(--layout-object-card-min-width) + 50px)Mindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.
layout-notifications-card-flex-basisdimension-notifications-card-min-widthFlex-Basis der Notification Card im Notifications-Pattern; entspricht der gemeinsamen Foundation-Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von .sg-group-card.
layout-notifications-card-min-widthdimension-notifications-card-min-widthMindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen.
layout-notifications-card-max-widthlayout-object-card-max-widthMaximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.
layout-notifications-text-segment-fixed-heightdimension-notifications-text-segment-fixed-heightFixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.
layout-notifications-text-segment-fixed-height-smalldimension-notifications-text-segment-fixed-height-smallFixe Desktop-Höhe des ersten Text-Segments in der Variante Pattern: Notifications small; auf Mobile wird die Höhe auf auto gesetzt.