diff --git a/foundations.html b/foundations.html index df5d6a1..2563636 100644 --- a/foundations.html +++ b/foundations.html @@ -157,6 +157,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. + object-group-card-height700pxFixe Desktop-Höhe 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. diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 3e71f45..c01f5a7 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-object-group-card-heightdimension-object-group-card-heightFixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card. layout-notifications-text-segment-fixed-height150pxFixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt. diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index e51d9bc..2f46f10 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -52,6 +52,7 @@ +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-heightdimension-object-group-card-heightFixe Desktop-Höhe der einzelnen Karten im Pattern Object Group Card.

Notifications

diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 9bf5ab6..9968805 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -182,6 +182,7 @@ --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small); --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); + --layout-object-group-card-height: var(--dimension-object-group-card-height); --surface-object-card-lower-segment: var(--color-white); --text-company-card-data-negative: var(--chart-value-negative); --text-company-card-moat-neutral: var(--chart-value-neutral); @@ -273,6 +274,7 @@ --dimension-object-card-desktop-breakpoint: 768px; --dimension-object-group-card-min-width: 550px; --dimension-object-group-card-max-width: 800px; + --dimension-object-group-card-height: 700px; --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; diff --git a/styles/23-patterns-object-group-card.css b/styles/23-patterns-object-group-card.css index 8ada867..447c9b0 100644 --- a/styles/23-patterns-object-group-card.css +++ b/styles/23-patterns-object-group-card.css @@ -10,6 +10,13 @@ flex: 1 1 var(--layout-object-group-card-min-width); min-width: var(--layout-object-group-card-min-width); max-width: var(--layout-object-group-card-max-width); + height: var(--layout-object-group-card-height); +} + +@media (max-width: 767px) { + .sg-object-card[data-pattern="object-group-card"] { + height: auto; + } } .sg-object-group-card__hint {