diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index c8cbd7b..2a7b9ec 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -72,6 +72,7 @@
  • VSF Card Listen Seite
  • VSF List Detailseite
  • VSF Meldungen
  • +
  • VSF Register Step 1
  • VSF Listen Übersicht Seite V2
  • VSF Card Listen Fundamentalanalyse Mobile
  • VSF Card Listen Fundamentalanalyse Drawer
  • diff --git a/docs/styleguide/patterns/object-card.html b/docs/styleguide/patterns/object-card.html index 75e6987..f55ab6a 100644 --- a/docs/styleguide/patterns/object-card.html +++ b/docs/styleguide/patterns/object-card.html @@ -103,6 +103,48 @@ + +

    Object Card variable height

    +

    Pattern: Object Card variable height

    +

    Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.

    + +
    +
    +
    +
    Alcon Inc.
    +
    +
    +

    Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.

    +
    +
    + +
    +
    +
    Meyer Optik AG
    +
    +
    +

    Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.

    +
    +
    + +
    +
    +
    Nordwind Therapeutics Holding
    +
    +
    +

    Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.

    +
    +
    + +
    +
    +
    Valencia Holding Group International
    +
    +
    +

    Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.

    +
    +
    +
    + + + + diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 66b3a38..38f04e1 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -15,6 +15,7 @@ @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/35-layouts-vsf-register-step-1.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/docs/styleguide/styles/22-patterns-object-card.css b/docs/styleguide/styles/22-patterns-object-card.css index 8a52384..d426cb7 100644 --- a/docs/styleguide/styles/22-patterns-object-card.css +++ b/docs/styleguide/styles/22-patterns-object-card.css @@ -67,3 +67,6 @@ min-width: 0; } +.sg-object-card--variable-height { + height: auto; +} diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css index e82df23..94d43a7 100644 --- a/docs/styleguide/styles/25-patterns-form-sections.css +++ b/docs/styleguide/styles/25-patterns-form-sections.css @@ -10,6 +10,7 @@ display: flex; flex-direction: column; width: 100%; + background: var(--surface-form-preview); min-width: min( 100%, calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) @@ -27,7 +28,6 @@ } .sg-form-sections-card__body { - background: var(--surface-form-preview); padding: 0; } @@ -36,7 +36,7 @@ } .sg-form-sections-card__actions-segment { - background: var(--surface-form-preview); + margin-top: var(--spacing-large); padding: 0; } @@ -61,6 +61,10 @@ margin-top: var(--spacing-large); } +.sg-form-sections-card__field-group { + gap: var(--spacing-large); +} + .sg-form-sections-card .sg-labeled-input-row .sg-label { min-width: var(--layout-form-sections-label-column-width); flex: 0 0 var(--layout-form-sections-label-column-width); @@ -205,7 +209,19 @@ opacity: var(--disabled-opacity); } +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); +} + @media (max-width: 48rem) { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { grid-template-columns: max-content minmax(0, 1fr) auto; row-gap: var(--spacing-small); @@ -280,9 +296,12 @@ .sg-form-sections-card__actions { display: flex; - justify-content: flex-start; + width: 100%; + justify-content: flex-end; gap: var(--spacing-small); margin-top: 0; + padding-left: 0; + padding-right: 0; } .sg-form-sections-card__action { @@ -324,8 +343,7 @@ margin-right: 0; } - .sg-form-sections-card__option-group, - .sg-form-sections-card__actions { + .sg-form-sections-card__option-group { padding-left: 0; } } diff --git a/docs/styleguide/styles/35-layouts-vsf-register-step-1.css b/docs/styleguide/styles/35-layouts-vsf-register-step-1.css new file mode 100644 index 0000000..a07ec94 --- /dev/null +++ b/docs/styleguide/styles/35-layouts-vsf-register-step-1.css @@ -0,0 +1,29 @@ +/* ========================================================= */ +/* Layouts: VSF Register Step 1 */ +/* ========================================================= */ + +.sg-vsf-register-step-1 { + display: block; + margin-top: clamp(32px, 6vw, 100px); + padding: 0 var(--layout-page-content-inset-inline); + box-sizing: border-box; +} + +.sg-vsf-register-step-1-page { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.sg-vsf-register-step-1__card { + width: 100%; + max-width: var(--layout-object-card-max-width); + margin: 0 auto; +} + +.sg-vsf-register-step-1__social-links { + display: flex; + justify-content: center; + gap: var(--spacing-large); + margin-top: var(--spacing-large); +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 8d3e162..83b1301 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -2282,6 +2282,9 @@ section + section { min-width: 0; } +.sg-object-card--variable-height { + height: auto; +} /* ========================================================= */ /* Patterns: Object Group Card */ @@ -2347,6 +2350,7 @@ section + section { display: flex; flex-direction: column; width: 100%; + background: var(--surface-form-preview); min-width: min( 100%, calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) @@ -2364,7 +2368,6 @@ section + section { } .sg-form-sections-card__body { - background: var(--surface-form-preview); padding: 0; } @@ -2373,7 +2376,7 @@ section + section { } .sg-form-sections-card__actions-segment { - background: var(--surface-form-preview); + margin-top: var(--spacing-large); padding: 0; } @@ -2398,6 +2401,10 @@ section + section { margin-top: var(--spacing-large); } +.sg-form-sections-card__field-group { + gap: var(--spacing-large); +} + .sg-form-sections-card .sg-labeled-input-row .sg-label { min-width: var(--layout-form-sections-label-column-width); flex: 0 0 var(--layout-form-sections-label-column-width); @@ -2542,7 +2549,19 @@ section + section { opacity: var(--disabled-opacity); } +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); +} + @media (max-width: 48rem) { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { grid-template-columns: max-content minmax(0, 1fr) auto; row-gap: var(--spacing-small); @@ -2617,9 +2636,12 @@ section + section { .sg-form-sections-card__actions { display: flex; - justify-content: flex-start; + width: 100%; + justify-content: flex-end; gap: var(--spacing-small); margin-top: 0; + padding-left: 0; + padding-right: 0; } .sg-form-sections-card__action { @@ -2661,8 +2683,7 @@ section + section { margin-right: 0; } - .sg-form-sections-card__option-group, - .sg-form-sections-card__actions { + .sg-form-sections-card__option-group { padding-left: 0; } } @@ -3296,6 +3317,36 @@ section + section { } } +/* ========================================================= */ +/* Layouts: VSF Register Step 1 */ +/* ========================================================= */ + +.sg-vsf-register-step-1 { + display: block; + margin-top: clamp(32px, 6vw, 100px); + padding: 0 var(--layout-page-content-inset-inline); + box-sizing: border-box; +} + +.sg-vsf-register-step-1-page { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.sg-vsf-register-step-1__card { + width: 100%; + max-width: var(--layout-object-card-max-width); + margin: 0 auto; +} + +.sg-vsf-register-step-1__social-links { + display: flex; + justify-content: center; + gap: var(--spacing-large); + margin-top: var(--spacing-large); +} + /* ========================================================= */ /* Patterns: Text Layouts */ /* ========================================================= */ diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 36e2968..68fd82d 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": "96d7915", - "syncedAtUtc": "2026-06-10T11:55:15Z", + "styleguideCommit": "66d0740", + "syncedAtUtc": "2026-06-10T16:04:47Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 8d3e162..83b1301 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -2282,6 +2282,9 @@ section + section { min-width: 0; } +.sg-object-card--variable-height { + height: auto; +} /* ========================================================= */ /* Patterns: Object Group Card */ @@ -2347,6 +2350,7 @@ section + section { display: flex; flex-direction: column; width: 100%; + background: var(--surface-form-preview); min-width: min( 100%, calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) @@ -2364,7 +2368,6 @@ section + section { } .sg-form-sections-card__body { - background: var(--surface-form-preview); padding: 0; } @@ -2373,7 +2376,7 @@ section + section { } .sg-form-sections-card__actions-segment { - background: var(--surface-form-preview); + margin-top: var(--spacing-large); padding: 0; } @@ -2398,6 +2401,10 @@ section + section { margin-top: var(--spacing-large); } +.sg-form-sections-card__field-group { + gap: var(--spacing-large); +} + .sg-form-sections-card .sg-labeled-input-row .sg-label { min-width: var(--layout-form-sections-label-column-width); flex: 0 0 var(--layout-form-sections-label-column-width); @@ -2542,7 +2549,19 @@ section + section { opacity: var(--disabled-opacity); } +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); +} + @media (max-width: 48rem) { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { grid-template-columns: max-content minmax(0, 1fr) auto; row-gap: var(--spacing-small); @@ -2617,9 +2636,12 @@ section + section { .sg-form-sections-card__actions { display: flex; - justify-content: flex-start; + width: 100%; + justify-content: flex-end; gap: var(--spacing-small); margin-top: 0; + padding-left: 0; + padding-right: 0; } .sg-form-sections-card__action { @@ -2661,8 +2683,7 @@ section + section { margin-right: 0; } - .sg-form-sections-card__option-group, - .sg-form-sections-card__actions { + .sg-form-sections-card__option-group { padding-left: 0; } } @@ -3296,6 +3317,36 @@ section + section { } } +/* ========================================================= */ +/* Layouts: VSF Register Step 1 */ +/* ========================================================= */ + +.sg-vsf-register-step-1 { + display: block; + margin-top: clamp(32px, 6vw, 100px); + padding: 0 var(--layout-page-content-inset-inline); + box-sizing: border-box; +} + +.sg-vsf-register-step-1-page { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.sg-vsf-register-step-1__card { + width: 100%; + max-width: var(--layout-object-card-max-width); + margin: 0 auto; +} + +.sg-vsf-register-step-1__social-links { + display: flex; + justify-content: center; + gap: var(--spacing-large); + margin-top: var(--spacing-large); +} + /* ========================================================= */ /* Patterns: Text Layouts */ /* ========================================================= */