From c11cb39dc4ffde85acfa4bf746d40034f6701710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Sun, 6 Sep 2026 15:32:07 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/foundations.html | 2 + docs/styleguide/index.html | 1 + docs/styleguide/patterns/scrollable-card.html | 52 +++++++++++++++++++ docs/styleguide/semantic-tokens-patterns.html | 6 +++ docs/styleguide/styleguide.css | 1 + docs/styleguide/styles/01-foundations.css | 4 ++ .../styles/46-patterns-scrollable-card.css | 34 ++++++++++++ public/assets/styleguide.upstream.css | 39 ++++++++++++++ public/assets/styleguide.upstream.meta.json | 4 +- public/assets/styles.css | 39 ++++++++++++++ 10 files changed, 180 insertions(+), 2 deletions(-) create mode 100644 docs/styleguide/patterns/scrollable-card.html create mode 100644 docs/styleguide/styles/46-patterns-scrollable-card.css diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index ace804a..46c567e 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -158,6 +158,8 @@ input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). email-body-max-width600pxMaximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports. object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). + scrollable-card-width600pxStandardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. + scrollable-card-height600pxStandardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. content-card-margin-top-desktop100pxOberer Außenabstand der Content Card auf Desktop. content-card-margin-top-mobile1remOberer Außenabstand der Content Card auf Mobile; entspricht spacing-large. notification-card-width50%Breite der Notification Card relativ zum übergeordneten Layout. diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index 52395f7..a024328 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -43,6 +43,7 @@
  • Portal Header
  • Options Row
  • Object Card
    • +
  • Scrollable Card
  • Object Group Card
  • Navigation Card
  • Left Navigation
    • diff --git a/docs/styleguide/patterns/scrollable-card.html b/docs/styleguide/patterns/scrollable-card.html new file mode 100644 index 0000000..088bd36 --- /dev/null +++ b/docs/styleguide/patterns/scrollable-card.html @@ -0,0 +1,52 @@ + + + + + + Styleguide – Pattern Scrollable Card + + + + +

    Pattern – Scrollable Card

    + +
    +

    Pattern: Scrollable Card

    +

    Die Scrollable Card besitzt eine fixe Breite und Höhe. Header und Aktionsbereich bleiben sichtbar; ausschließlich der Inhaltsbereich ist scrollbar. Das Pattern ist unabhängig von Overlay-Patterns und kann bei Bedarf von diesen verwendet werden.

    + +
    +
    +
    Scrollable Card
    +
    + +
    +

    Der Karteninhalt bleibt innerhalb der definierten Kartenhöhe. Bei längeren Inhalten entsteht hier ein eigener vertikaler Scrollbereich, während Titel und Aktionen sichtbar bleiben.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue.

    +

    Donec sed lorem in urna sagittis aliquet. Suspendisse potenti. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

    +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    +

    Zusätzlicher Inhalt zur Demonstration des unabhängigen Scrollbereichs innerhalb der Card.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

    +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

    +

    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    +

    Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Vestibulum ligula porta felis euismod semper.

    +

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.

    +

    Morbi risus porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.

    +

    Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

    +

    Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

    +

    Der untere Aktionsbereich bleibt auch am Ende des Scrollvorgangs an seiner Position sichtbar.

    +
    + +
    +
    + + +
    +
    +
    +
    + + + diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index 56e8f80..249e034 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -63,6 +63,12 @@ surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card. +

    Scrollable Card

    + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    layout-scrollable-card-widthdimension-scrollable-card-widthFixe Breite der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.
    layout-scrollable-card-heightdimension-scrollable-card-heightFixe Höhe der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.
    +

    Object Group Card

    diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 8948424..61459dc 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -26,3 +26,4 @@ @import "./styles/43-components-typography.css"; @import "./styles/44-components-public-page-components.css"; @import "./styles/45-patterns-public-page-patterns.css"; +@import "./styles/46-patterns-scrollable-card.css"; diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 9fcb76a..21b4d8c 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -175,6 +175,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-scrollable-card-width: var(--dimension-scrollable-card-width); + --layout-scrollable-card-height: var(--dimension-scrollable-card-height); --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop); --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile); --layout-notification-card-width: var(--dimension-notification-card-width); @@ -287,6 +289,8 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; + --dimension-scrollable-card-width: 600px; + --dimension-scrollable-card-height: 600px; --dimension-content-card-margin-top-desktop: 100px; --dimension-content-card-margin-top-mobile: 1rem; --dimension-object-group-card-min-width: 450px; diff --git a/docs/styleguide/styles/46-patterns-scrollable-card.css b/docs/styleguide/styles/46-patterns-scrollable-card.css new file mode 100644 index 0000000..6049c14 --- /dev/null +++ b/docs/styleguide/styles/46-patterns-scrollable-card.css @@ -0,0 +1,34 @@ +/* ========================================================= */ +/* Patterns: Scrollable Card */ +/* ========================================================= */ + +.sg-scrollable-card { + display: flex; + flex-direction: column; + width: var(--layout-scrollable-card-width); + max-width: 100%; + height: var(--layout-scrollable-card-height); + box-sizing: border-box; +} + +.sg-scrollable-card__header, +.sg-scrollable-card__actions-segment { + flex: 0 0 auto; +} + +.sg-scrollable-card__content { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; +} + +.sg-scrollable-card__actions { + display: flex; + gap: var(--spacing-small); + width: 100%; +} + +.sg-scrollable-card__actions > .sg-button { + flex: 1 1 0; + min-width: 0; +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 890c4cd..49fc75b 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -175,6 +175,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-scrollable-card-width: var(--dimension-scrollable-card-width); + --layout-scrollable-card-height: var(--dimension-scrollable-card-height); --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop); --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile); --layout-notification-card-width: var(--dimension-notification-card-width); @@ -287,6 +289,8 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; + --dimension-scrollable-card-width: 600px; + --dimension-scrollable-card-height: 600px; --dimension-content-card-margin-top-desktop: 100px; --dimension-content-card-margin-top-mobile: 1rem; --dimension-object-group-card-min-width: 450px; @@ -5031,3 +5035,38 @@ main { } } +/* ========================================================= */ +/* Patterns: Scrollable Card */ +/* ========================================================= */ + +.sg-scrollable-card { + display: flex; + flex-direction: column; + width: var(--layout-scrollable-card-width); + max-width: 100%; + height: var(--layout-scrollable-card-height); + box-sizing: border-box; +} + +.sg-scrollable-card__header, +.sg-scrollable-card__actions-segment { + flex: 0 0 auto; +} + +.sg-scrollable-card__content { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; +} + +.sg-scrollable-card__actions { + display: flex; + gap: var(--spacing-small); + width: 100%; +} + +.sg-scrollable-card__actions > .sg-button { + flex: 1 1 0; + min-width: 0; +} + diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 9b5e139..98226ed 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "3f4ec38", - "syncedAtUtc": "2026-09-03T15:57:49Z", + "styleguideCommit": "fd73842", + "syncedAtUtc": "2026-09-06T13:32:07Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 890c4cd..49fc75b 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -175,6 +175,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-scrollable-card-width: var(--dimension-scrollable-card-width); + --layout-scrollable-card-height: var(--dimension-scrollable-card-height); --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop); --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile); --layout-notification-card-width: var(--dimension-notification-card-width); @@ -287,6 +289,8 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; + --dimension-scrollable-card-width: 600px; + --dimension-scrollable-card-height: 600px; --dimension-content-card-margin-top-desktop: 100px; --dimension-content-card-margin-top-mobile: 1rem; --dimension-object-group-card-min-width: 450px; @@ -5031,3 +5035,38 @@ main { } } +/* ========================================================= */ +/* Patterns: Scrollable Card */ +/* ========================================================= */ + +.sg-scrollable-card { + display: flex; + flex-direction: column; + width: var(--layout-scrollable-card-width); + max-width: 100%; + height: var(--layout-scrollable-card-height); + box-sizing: border-box; +} + +.sg-scrollable-card__header, +.sg-scrollable-card__actions-segment { + flex: 0 0 auto; +} + +.sg-scrollable-card__content { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; +} + +.sg-scrollable-card__actions { + display: flex; + gap: var(--spacing-small); + width: 100%; +} + +.sg-scrollable-card__actions > .sg-button { + flex: 1 1 0; + min-width: 0; +} +
    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.