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

feat(components): add pulldown labels and activatable wrap behavior

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:11:40 +02:00
parent 793878c92a
commit 102e391977
2 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+46
View File
@@ -811,6 +811,18 @@ section + section {
max-width: var(--layout-input-field-max-width);
}
#component-pulldown .sg-labeled-input-row {
width: 100%;
max-width: none;
}
#component-pulldown .sg-labeled-input-row .sg-pulldown,
#component-pulldown .sg-labeled-input-row .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%;
@@ -819,8 +831,35 @@ section + section {
}
#component-pulldown .sg-activatable-row {
display: grid;
grid-template-columns: 1fr;
align-items: start;
row-gap: var(--spacing-small);
width: 100%;
}
#component-pulldown .sg-pulldown-activatable-header {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: var(--spacing-large);
width: 100%;
justify-content: start;
}
#component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle {
grid-column: 1;
}
#component-pulldown .sg-pulldown-activatable-header .sg-label {
grid-column: 2;
min-width: 0;
}
#component-pulldown .sg-activatable-row .sg-pulldown-demo {
width: 100%;
max-width: var(--layout-input-field-max-width);
min-width: 0;
}
.sg-input-component .sg-state-example {
@@ -862,6 +901,13 @@ section + section {
min-width: 0;
}
#component-pulldown .sg-labeled-input-row .sg-pulldown,
#component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: 100%;
}
#component-pulldown .sg-activatable-row {
width: 100%;
max-width: 100%;