From 20bdb04c0e2eab324be8e8abbf95d0a06d54f6da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 28 May 2026 13:20:03 +0200 Subject: [PATCH] =?UTF-8?q?Add=20VSF=20Listen=20=C3=9Cbersicht=20Seite=20V?= =?UTF-8?q?2=20layout=20scaffold?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + patterns/vsf-listen-uebersicht-seite-v2.html | 27 ++++++++++++ styleguide.css | 1 + ...layouts-vsf-listen-uebersicht-seite-v2.css | 43 +++++++++++++++++++ 4 files changed, 72 insertions(+) create mode 100644 patterns/vsf-listen-uebersicht-seite-v2.html create mode 100644 styles/34-layouts-vsf-listen-uebersicht-seite-v2.css diff --git a/index.html b/index.html index e495ce8..51a62e3 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@
  • VSF Card Listen Seite
  • VSF List Detailseite
  • VSF Listen Übersicht Seite
    • +
  • VSF Listen Übersicht Seite V2
  • VSF Card Listen Fundamentalanalyse Mobile
  • VSF Card Listen Fundamentalanalyse Drawer
    • diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html new file mode 100644 index 0000000..28b9535 --- /dev/null +++ b/patterns/vsf-listen-uebersicht-seite-v2.html @@ -0,0 +1,27 @@ + + + + + + Styleguide – VSF Listen Übersicht Seite V2 + + + + +

    Layout – VSF Listen Übersicht Seite V2

    + +
    +
    + +
    + +
    + +
    +
    + +
    +
    + + + diff --git a/styleguide.css b/styleguide.css index 28dab2e..376b0fb 100644 --- a/styleguide.css +++ b/styleguide.css @@ -12,6 +12,7 @@ @import "./styles/27-patterns-delete-confirmation.css"; @import "./styles/30-layouts-card-list-page.css"; @import "./styles/33-layouts-vsf-list-detailseite.css"; +@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css"; @import "./styles/31-patterns-text-layouts.css"; @import "./styles/32-patterns-card-group-keyboard-nav.css"; @import "./styles/40-components-cards.css"; diff --git a/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css b/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css new file mode 100644 index 0000000..318af8f --- /dev/null +++ b/styles/34-layouts-vsf-listen-uebersicht-seite-v2.css @@ -0,0 +1,43 @@ +/* ========================================================= */ +/* Layouts: VSF Listen Übersicht Seite V2 */ +/* ========================================================= */ + +.sg-vsf-list-overview-page-v2 { + display: flex; + flex-direction: column; +} + +.sg-vsf-list-overview-page-v2 > * + * { + margin-top: var(--spacing-large); +} + +.sg-vsf-list-overview-page-v2__content { + display: flex; + gap: var(--spacing-small); + width: 100%; +} + +.sg-vsf-list-overview-page-v2__primary { + width: 70%; + min-width: 0; +} + +.sg-vsf-list-overview-page-v2__secondary { + width: 30%; + min-width: 0; +} + +@media (max-width: 767px) { + .sg-vsf-list-overview-page-v2__content { + display: block; + } + + .sg-vsf-list-overview-page-v2__primary, + .sg-vsf-list-overview-page-v2__secondary { + width: 100%; + } + + .sg-vsf-list-overview-page-v2__secondary { + margin-top: var(--spacing-large); + } +}