diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html index f81c525..ba9e786 100644 --- a/patterns/multiselektions-pulldown.html +++ b/patterns/multiselektions-pulldown.html @@ -224,14 +224,16 @@
- -

Pulldown 1

+ +

Pulldown 1

+
@@ -262,14 +266,16 @@
- -

Pulldown 3

+ +

Pulldown 3

+
diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css index fe6b73d..ac5d366 100644 --- a/styles/25-patterns-form-sections.css +++ b/styles/25-patterns-form-sections.css @@ -113,7 +113,7 @@ .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label, -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] .sg-pulldown-panel__label { white-space: normal; } @@ -203,37 +203,35 @@ .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle), .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle), -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > :not(.sg-mode-toggle) { +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > :not(.sg-mode-toggle), +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown { pointer-events: none; } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { display: grid; - grid-template-columns: max-content minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--interaction-height) auto; - column-gap: var(--spacing-large); row-gap: var(--spacing-small); - align-items: center; } -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header { + display: flex; grid-column: 1; grid-row: 1; + align-items: center; + gap: var(--spacing-large); + min-width: 0; } -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - grid-column: 2; - grid-row: 1; - display: flex; - align-items: center; - justify-content: flex-start; - align-self: center; - height: var(--layout-mode-toggle-local-height); - line-height: var(--layout-mode-toggle-local-height); +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label { + margin: 0; + min-width: 0; + line-height: var(--line-height-base); } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { - grid-column: 1 / -1; + grid-column: 1; grid-row: 2; } @@ -241,7 +239,7 @@ opacity: 1; } -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__label, +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label, .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown { opacity: var(--disabled-opacity); }