diff --git a/foundations.html b/foundations.html index 7adc265..46d31d9 100644 --- a/foundations.html +++ b/foundations.html @@ -138,6 +138,8 @@ input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. + multiselect-pulldown-panel-desktop-width500pxDesktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern. + multiselect-pulldown-panel-mobile-width80vwMobile Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern. options-row-mode-toggle-width7remBreite des Modus-Schiebers in der Options Row. options-row-help-panel-width16remBreite des Help-Panels in der Options Row. card-list-drawer-width40%Relative Breite des ausziehbaren Card-Listenbereichs. diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html index 6a38cf6..f568ccd 100644 --- a/patterns/multiselektions-pulldown.html +++ b/patterns/multiselektions-pulldown.html @@ -404,20 +404,20 @@ return; } - const viewportInset = 16; demo.dataset.align = 'left'; panel.style.left = '0px'; panel.style.right = 'auto'; const initialRect = panel.getBoundingClientRect(); let offsetX = 0; + const maxRight = window.innerWidth; - if (initialRect.right > window.innerWidth - viewportInset) { - offsetX -= initialRect.right - (window.innerWidth - viewportInset); + if (initialRect.right > maxRight) { + offsetX -= initialRect.right - maxRight; } - if (initialRect.left + offsetX < viewportInset) { - offsetX += viewportInset - (initialRect.left + offsetX); + if (initialRect.left + offsetX < 0) { + offsetX += 0 - (initialRect.left + offsetX); } panel.style.left = `${offsetX}px`; diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index ebe52cd..c14d431 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -109,6 +109,8 @@ layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown. layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. layout-pulldown-panel-form-mobile-width90%Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. + layout-multiselect-pulldown-panel-desktop-widthdimension-multiselect-pulldown-panel-desktop-widthDesktop-Breite des geöffneten Panels im Pattern Multiselektions-Pulldown. + layout-multiselect-pulldown-panel-mobile-widthdimension-multiselect-pulldown-panel-mobile-widthMobile Breite des geöffneten Panels im Pattern Multiselektions-Pulldown. surface-menu-panel-portalcolor-light-greyFläche des Sandwich-Menü-Panels für große und kleine Variante. text-menu-link-portalcolor-font-darkLinktextfarbe im Sandwich-Menü für große und kleine Variante. text-activatable-removetext-control-defaultZeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten. diff --git a/styleguide.css b/styleguide.css index 30f9fa5..5df7b45 100644 --- a/styleguide.css +++ b/styleguide.css @@ -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); } }