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

Slider: sauberes Grid-Alignment ohne Transform-Hacks

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:19:00 +02:00
parent e359894d95
commit ca17548669
1 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+7 -8
View File
@@ -1057,9 +1057,9 @@ section + section {
} }
#component-slider .sg-slider-row .sg-slider-value { #component-slider .sg-slider-row .sg-slider-value {
min-width: calc(var(--interaction-height) * 1.25); min-width: 0;
grid-column: 3; grid-column: 3;
justify-self: end; justify-self: start;
} }
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
@@ -1096,19 +1096,18 @@ section + section {
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 4; grid-column: 4;
justify-self: end; justify-self: start;
min-width: calc(var(--interaction-height) * 1.25); min-width: 0;
} }
#component-slider .sg-slider-row .sg-slider-value, #component-slider .sg-slider-row .sg-slider-value,
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-start;
height: var(--interaction-height);
line-height: var(--line-height-base); line-height: var(--line-height-base);
transform: translateY(2px);
align-self: center; align-self: center;
transform: none;
} }
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
@@ -1187,7 +1186,7 @@ section + section {
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
justify-self: end; justify-self: start;
align-self: center; align-self: center;
} }