diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index ef4f00a..5f56f57 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -55,6 +55,7 @@ layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card. layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card. + layout-notifications-text-segment-fixed-height200pxFixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt. diff --git a/styles/01-foundations.css b/styles/01-foundations.css index cec8c3c..222235c 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -170,6 +170,7 @@ --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-text-segment-fixed-height: 200px; --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); --surface-object-card-lower-segment: var(--color-white); diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css index 010e269..64161bd 100644 --- a/styles/28-patterns-notifications.css +++ b/styles/28-patterns-notifications.css @@ -21,8 +21,8 @@ width: var(--layout-object-card-shared-width); } -.sg-notifications-pattern__text-segment { - height: 200px; +.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment { + height: var(--layout-notifications-text-segment-fixed-height); } @media (max-width: 767px) { @@ -33,7 +33,7 @@ flex: 1 1 auto; } - .sg-notifications-pattern__text-segment { + .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment { height: auto; } }