diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index cb79f6a..b5d331b 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 358e15d..c7594d4 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -170,8 +170,8 @@ --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: var(--layout-object-card-min-width); - --layout-notifications-card-min-width: var(--layout-object-card-min-width); + --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); --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-basislayout-object-card-min-widthFlex-Basis der Notification Card im Notifications-Pattern; gilt auch in der dokumentierten Variante innerhalb von .sg-group-card.
layout-notifications-card-min-widthlayout-object-card-min-widthMindestbreite der Notification Card im Notifications-Pattern; verhindert zu frühes Schrumpfen bei Viewport-Änderungen.
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-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.