From ba31de8870173eb61b67fbf4793e648a3eeddbfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 19 May 2026 13:31:26 +0200 Subject: [PATCH] Add Multiselektionspulldown pattern based on form sections structure --- index.html | 1 + patterns/multiselektionspulldown.html | 140 ++++++++++++++++++++++++++ semantic-tokens-patterns.html | 12 +++ styleguide.css | 140 ++++++++++++++++++++++++++ 4 files changed, 293 insertions(+) create mode 100644 patterns/multiselektionspulldown.html diff --git a/index.html b/index.html index a344570..6cc2912 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@
  • Object Group Card
  • Navigation Card
  • Content Cards Group
    • +
  • Multiselektionspulldown
  • Card Gruppe mit Tastennavigation
  • Formular mit Abschnitten
    • diff --git a/patterns/multiselektionspulldown.html b/patterns/multiselektionspulldown.html new file mode 100644 index 0000000..fba3af0 --- /dev/null +++ b/patterns/multiselektionspulldown.html @@ -0,0 +1,140 @@ + + + + + + Styleguide – Pattern Multiselektionspulldown + + + + +

    Pattern – Multiselektionspulldown

    +
    +

    Pattern: Multiselektionspulldown

    + +
    + + +
    + + +
    +
    +
    +
    +
    +

    Scores Minimum

    + + + +
    + Aktienbewertung + + 6.5 + +
    + +
    + Wachstum + + 9.5 + +
    + +
    + Profitabilität + + 5.0 + +
    + +
    + Stabilität + + 6.5 + +
    +
    + +
    +

    Marktbewertung Maximum

    + +
    + PE + + 30 + +
    + +
    + PE forw. + + 25 + +
    + +
    + PEG + + 1.6 + +
    +
    + +
    +

    Weitere Filter

    + +
    + Zyklus-Empfehlung + + +
    + +
    + Moat mindestens + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 67099bc..b0a67d9 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -47,6 +47,18 @@ surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card. +

    Multiselektionspulldown

    + + + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    surface-multiselect-pulldowncolor-light-greyGrundfläche des geöffneten Kennzahlen-Panels.
    surface-multiselect-pulldown-shellcolor-light-greyGrundfläche der oberen Trigger-/Suche-Zeile.
    surface-multiselect-pulldown-controlsurface-control-defaultAlias auf Standard-Control-Fläche innerhalb des Patterns.
    surface-multiselect-pulldown-control-selectedsurface-control-activeAlias auf aktive Control-Fläche innerhalb des Patterns.
    text-multiselect-pulldown-defaulttext-control-defaultAlias auf Standard-Textfarbe im Pattern.
    text-multiselect-pulldown-mutedtext-control-disabledAlias auf reduzierte Textfarbe für deaktivierte Zeilen.
    layout-multiselect-pulldown-widthdimension-multiselect-pulldown-widthFixe Panelbreite für die geöffnete Desktop-Darstellung.
    layout-multiselect-pulldown-row-label-widthdimension-multiselect-pulldown-row-label-widthBreite der linken Label-Spalte im Panel.
    +

    Navigation Card

    diff --git a/styleguide.css b/styleguide.css index 1351771..94ae9f4 100644 --- a/styleguide.css +++ b/styleguide.css @@ -150,6 +150,14 @@ --layout-options-row-group-gap: var(--spacing-small); --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width); --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width); + --surface-multiselect-pulldown: var(--color-light-grey); + --surface-multiselect-pulldown-shell: var(--color-light-grey); + --surface-multiselect-pulldown-control: var(--surface-control-default); + --surface-multiselect-pulldown-control-selected: var(--surface-control-active); + --text-multiselect-pulldown-default: var(--text-control-default); + --text-multiselect-pulldown-muted: var(--text-control-disabled); + --layout-multiselect-pulldown-width: var(--dimension-multiselect-pulldown-width); + --layout-multiselect-pulldown-row-label-width: var(--dimension-multiselect-pulldown-row-label-width); --layout-object-card-min-width: var(--dimension-object-card-min-width); --layout-object-card-max-width: var(--dimension-object-card-max-width); --layout-object-card-height: var(--dimension-object-card-height); @@ -222,6 +230,8 @@ --dimension-search-field-width: 15.3rem; --dimension-options-row-mode-toggle-width: 7rem; --dimension-options-row-help-panel-width: 16rem; + --dimension-multiselect-pulldown-width: 48rem; + --dimension-multiselect-pulldown-row-label-width: 15rem; --dimension-card-list-drawer-width: 40%; --dimension-slider-track-height: 6px; --dimension-slider-thumb-size: 22px; @@ -1616,6 +1626,136 @@ section + section { } } +/* ========================================================= */ +/* Patterns: Multiselektionspulldown */ +/* ========================================================= */ + +.sg-multiselect-pulldown-demo { + width: var(--layout-multiselect-pulldown-width); + max-width: 100%; +} + +.sg-multiselect-pulldown-demo__controls { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + width: 100%; + margin-bottom: var(--spacing-small); + padding: var(--spacing-small); + border-radius: var(--radius-card); + background: var(--surface-multiselect-pulldown-shell); +} + +.sg-multiselect-pulldown-demo__search-wrap { + flex: 0 1 15rem; +} + +.sg-multiselect-pulldown-demo__results { + color: var(--text-multiselect-pulldown-default); +} + +.sg-multiselect-pulldown { + --surface-pulldown-panel: var(--surface-multiselect-pulldown); + --surface-control-default: var(--surface-multiselect-pulldown-control); + --surface-control-active: var(--surface-multiselect-pulldown-control-selected); + --text-control-default: var(--text-multiselect-pulldown-default); + --text-control-disabled: var(--text-multiselect-pulldown-muted); +} + +.sg-multiselect-pulldown > .sg-pulldown-demo__trigger { + display: none; +} + +.sg-multiselect-pulldown > .sg-pulldown-panel { + position: static; + display: flex; + min-width: 0; + width: 100%; + max-width: 100%; + padding: var(--spacing-large); +} + +.sg-multiselect-pulldown__form-wrapper, +.sg-multiselect-pulldown__form { + width: 100%; + min-width: 0; + max-width: 100%; +} + +.sg-multiselect-pulldown__form { + box-shadow: none; +} + +.sg-multiselect-pulldown__form-body { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + padding: 0; + background: var(--surface-multiselect-pulldown); +} + +.sg-multiselect-pulldown__actions-segment { + display: none; +} + +.sg-multiselect-pulldown__section { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-multiselect-pulldown__section-title { + margin: 0; +} + +.sg-multiselect-pulldown__section .sg-slider-row, +.sg-multiselect-pulldown__row-label, +.sg-multiselect-pulldown__radio-row { + display: grid; + grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) minmax(0, 1fr) auto auto; + align-items: center; + column-gap: var(--spacing-small); +} + +.sg-multiselect-pulldown__section .sg-slider-row .sg-label, +.sg-multiselect-pulldown__row-label .sg-label, +.sg-multiselect-pulldown__radio-row > .sg-label { + min-width: 0; + margin: 0; +} + +.sg-multiselect-pulldown__section .sg-slider-row .sg-slider { + min-width: 0; + width: 100%; +} + +.sg-multiselect-pulldown__section .sg-slider-row .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + text-align: right; +} + +.sg-multiselect-pulldown__radio-row { + grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) auto auto; +} + +.sg-multiselect-pulldown__compact-pulldown { + width: max-content; + min-width: 7.5rem; +} + +@media (max-width: 48rem) { + .sg-multiselect-pulldown-demo { + width: 100%; + } + + .sg-multiselect-pulldown__section .sg-slider-row, + .sg-multiselect-pulldown__row-label, + .sg-multiselect-pulldown__radio-row { + grid-template-columns: 1fr; + row-gap: var(--spacing-small); + } +} + /* ========================================================= */ /* Patterns: Object Card */ /* ========================================================= */
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    surface-navigation-cardcolor-whiteGrundfläche der Navigation Card.