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

feat(components): make pulldown responsive like single-line input

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:07:56 +02:00
parent 758de215ed
commit f42bd57c7d
1 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+55
View File
@@ -790,6 +790,39 @@ section + section {
box-sizing: border-box; box-sizing: border-box;
} }
#component-pulldown .sg-form-preview-area {
width: 100%;
box-sizing: border-box;
}
#component-pulldown .sg-state-example {
grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
width: 100%;
}
#component-pulldown .sg-state-example > :last-child {
width: 100%;
min-width: 0;
}
#component-pulldown .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
#component-pulldown .sg-pulldown-demo__trigger,
#component-pulldown .sg-state-example > .sg-pulldown {
width: 100%;
min-width: 0;
max-width: 100%;
}
#component-pulldown .sg-activatable-row {
width: 100%;
max-width: var(--layout-input-field-max-width);
}
.sg-input-component .sg-state-example { .sg-input-component .sg-state-example {
grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
} }
@@ -801,17 +834,39 @@ section + section {
box-sizing: border-box; box-sizing: border-box;
} }
#component-pulldown .sg-form-preview-area {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.sg-input-component .sg-state-example { .sg-input-component .sg-state-example {
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: start; align-items: start;
width: 100%; width: 100%;
} }
#component-pulldown .sg-state-example {
grid-template-columns: 1fr;
align-items: start;
width: 100%;
}
.sg-input-component .sg-state-example > :last-child { .sg-input-component .sg-state-example > :last-child {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }
#component-pulldown .sg-state-example > :last-child {
width: 100%;
min-width: 0;
}
#component-pulldown .sg-activatable-row {
width: 100%;
max-width: 100%;
}
.sg-labeled-input-row { .sg-labeled-input-row {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;