Tokenize multiselect panel sizing and remove local viewport magic values

This commit is contained in:
2026-05-20 13:20:11 +02:00
parent 25c7654534
commit 83c6b0289a
4 changed files with 15 additions and 7 deletions
+6 -2
View File
@@ -73,6 +73,8 @@
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
--layout-pulldown-panel-form-mobile-width: 90%;
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
--layout-input-field-max-width: var(--dimension-input-field-max-width);
@@ -220,6 +222,8 @@
--dimension-input-field-desktop-width: 400px;
--dimension-input-field-max-width: 600px;
--dimension-search-field-width: 15.3rem;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-card-list-drawer-width: 40%;
@@ -1874,13 +1878,13 @@ section + section {
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
width: 500px;
width: var(--layout-multiselect-pulldown-panel-desktop-width);
max-width: calc(100vw - (2 * var(--spacing-large)));
}
@media (max-width: 48rem) {
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
width: 80vw;
width: var(--layout-multiselect-pulldown-panel-mobile-width);
}
}