Slider: sauberes Grid-Alignment ohne Transform-Hacks
This commit is contained in:
+7
-8
@@ -1057,9 +1057,9 @@ section + section {
|
||||
}
|
||||
|
||||
#component-slider .sg-slider-row .sg-slider-value {
|
||||
min-width: calc(var(--interaction-height) * 1.25);
|
||||
min-width: 0;
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
#component-slider .sg-activatable-row {
|
||||
@@ -1096,19 +1096,18 @@ section + section {
|
||||
|
||||
#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);
|
||||
justify-self: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#component-slider .sg-slider-row .sg-slider-value,
|
||||
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: var(--interaction-height);
|
||||
justify-content: flex-start;
|
||||
line-height: var(--line-height-base);
|
||||
transform: translateY(2px);
|
||||
align-self: center;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user