diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css index d78e98a..5bba2fe 100644 --- a/styles/25-patterns-form-sections.css +++ b/styles/25-patterns-form-sections.css @@ -3,15 +3,19 @@ /* ========================================================= */ .sg-form-sections-card { + --layout-form-sections-label-column-width: var(--layout-input-label-width); + --layout-form-sections-interaction-indent: calc( + var(--layout-form-sections-label-column-width) + var(--spacing-large) + ); display: flex; flex-direction: column; width: 100%; min-width: min( 100%, - calc(var(--layout-input-label-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) + calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) ); max-width: calc( - var(--layout-input-label-width) + var(--spacing-small) + var(--layout-form-input-field-max-width) + var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-form-input-field-max-width) ); } @@ -57,6 +61,17 @@ margin-top: var(--spacing-large); } +.sg-form-sections-card .sg-labeled-input-row .sg-label { + min-width: var(--layout-form-sections-label-column-width); + flex: 0 0 var(--layout-form-sections-label-column-width); + margin-right: var(--spacing-large); +} + +.sg-form-sections-card__option-group, +.sg-form-sections-card__actions { + padding-left: var(--layout-form-sections-interaction-indent); +} + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) { margin-top: var(--spacing-large); } @@ -277,7 +292,7 @@ .sg-form-sections-card__actions { display: flex; - justify-content: flex-end; + justify-content: flex-start; gap: var(--spacing-small); margin-top: 0; } @@ -313,3 +328,16 @@ flex-direction: column; gap: var(--layout-content-cards-group-gap); } + +@media (max-width: 48rem) { + .sg-form-sections-card .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + margin-right: 0; + } + + .sg-form-sections-card__option-group, + .sg-form-sections-card__actions { + padding-left: 0; + } +}