diff --git a/index.html b/index.html index 6cc2912..a344570 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,6 @@
  • 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 deleted file mode 100644 index fba3af0..0000000 --- a/patterns/multiselektionspulldown.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - - 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 b0a67d9..67099bc 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -47,18 +47,6 @@ 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 94ae9f4..1351771 100644 --- a/styleguide.css +++ b/styleguide.css @@ -150,14 +150,6 @@ --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); @@ -230,8 +222,6 @@ --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; @@ -1626,136 +1616,6 @@ 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.