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

Unify form input max width across interactive elements and form sections

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 08:31:29 +02:00
parent e1cf43abc0
commit 7fc8214872
3 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/01-foundations.css
+1
View File
@@ -81,6 +81,7 @@
--layout-input-label-width: var(--dimension-input-label-width); --layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
--layout-input-field-max-width: var(--dimension-input-field-max-width); --layout-input-field-max-width: var(--dimension-input-field-max-width);
--layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
--layout-search-field-width: var(--dimension-search-field-width); --layout-search-field-width: var(--dimension-search-field-width);
--layout-mode-toggle-local-height: var(--compact-interaction-height); --layout-mode-toggle-local-height: var(--compact-interaction-height);
--layout-mode-toggle-local-width-factor: 3; --layout-mode-toggle-local-width-factor: 3;
styles/10-components-interactive-elements.css
+1 -6
View File
@@ -317,12 +317,7 @@
.sg-labeled-input-row .sg-input-multi-line { .sg-labeled-input-row .sg-input-multi-line {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: var(--layout-input-field-max-width); max-width: var(--layout-form-input-field-max-width);
}
#component-input-field-single-line .sg-labeled-input-row .sg-input-single-line,
#component-input-field-multi-line .sg-labeled-input-row .sg-input-multi-line {
max-width: calc(var(--layout-input-field-max-width) + 100px);
} }
.sg-labeled-input-row:has(.sg-input-multi-line) { .sg-labeled-input-row:has(.sg-input-multi-line) {
styles/25-patterns-form-sections.css
+1 -1
View File
@@ -11,7 +11,7 @@
calc(var(--layout-input-label-width) + var(--spacing-small) + var(--layout-input-field-desktop-width)) calc(var(--layout-input-label-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-input-field-max-width) + 100px var(--layout-input-label-width) + var(--spacing-small) + var(--layout-form-input-field-max-width)
); );
} }