diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index bc5e3f0..ebe52cd 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -108,6 +108,7 @@ layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder. 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. 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 e578066..7c5deb4 100644 --- a/styleguide.css +++ b/styleguide.css @@ -72,6 +72,7 @@ --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal); --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-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); @@ -1136,6 +1137,7 @@ section + section { min-width: 100%; width: max-content; max-width: calc(100vw - (2 * var(--spacing-large))); + box-sizing: border-box; padding-block: var(--spacing-large); padding-inline: var(--layout-pulldown-panel-padding-inline); border-radius: var(--radius-card); @@ -1560,6 +1562,54 @@ section + section { width: 100%; } + .sg-options-row .sg-pulldown-panel:has(.sg-form-sections-card-wrapper) { + width: min( + var(--layout-pulldown-panel-form-mobile-width), + calc(100vw - (2 * var(--spacing-large))) + ); + min-width: 0; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + + .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper, + .sg-options-row .sg-pulldown-panel .sg-form-sections-card { + min-width: 0; + width: 100%; + max-width: 100%; + } + + .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: minmax(0, 1fr) auto var(--interaction-height); + align-items: center; + column-gap: var(--spacing-small); + padding-right: 0; + } + + .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 0; + flex: 0 0 auto; + } + + .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + } + + .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + justify-self: end; + align-self: center; + white-space: nowrap; + } + + .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove { + position: static; + transform: none; + grid-column: 3; + grid-row: 1; + } } /* ========================================================= */