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

Aktivierbarer Slider: Grid-Layout auf volle Restbreite korrigieren

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:06:54 +02:00
parent 3a3391cd6c
commit 90716491e6
1 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+35 -12
View File
@@ -1064,12 +1064,34 @@ section + section {
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto var(--layout-input-label-width) minmax(0, 1fr) auto;
align-items: center; align-items: center;
column-gap: var(--spacing-small); column-gap: var(--spacing-large);
width: 100%; width: 100%;
} }
#component-slider .sg-activatable-row .sg-slider-row {
display: contents;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-label {
grid-column: 2;
min-width: 0;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 3;
width: 100%;
max-width: none;
min-width: 0;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 4;
justify-self: end;
min-width: calc(var(--interaction-height) * 1.25);
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
display: grid; display: grid;
grid-template-columns: grid-template-columns:
@@ -1119,26 +1141,27 @@ section + section {
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
align-items: start; align-items: start;
}
#component-slider .sg-activatable-row .sg-slider-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"label label"
"slider value";
row-gap: var(--spacing-small); row-gap: var(--spacing-small);
} }
#component-slider .sg-activatable-row .sg-slider-row {
display: contents;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-label { #component-slider .sg-activatable-row .sg-slider-row .sg-label {
grid-area: label; grid-column: 2;
grid-row: 1;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider { #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-area: slider; grid-column: 1;
grid-row: 2;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-area: value; grid-column: 2;
grid-row: 2;
justify-self: end;
align-self: center; align-self: center;
} }