gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust form sections pattern interaction alignment with fixed label token

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-29 15:18:34 +02:00
parent bbf212bbf9
commit 0653dd923d
1 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/25-patterns-form-sections.css
+31 -3
View File
@@ -3,15 +3,19 @@
/* ========================================================= */ /* ========================================================= */
.sg-form-sections-card { .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; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-width: min( min-width: min(
100%, 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( 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); 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) { .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); margin-top: var(--spacing-large);
} }
@@ -277,7 +292,7 @@
.sg-form-sections-card__actions { .sg-form-sections-card__actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
gap: var(--spacing-small); gap: var(--spacing-small);
margin-top: 0; margin-top: 0;
} }
@@ -313,3 +328,16 @@
flex-direction: column; flex-direction: column;
gap: var(--layout-content-cards-group-gap); 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;
}
}