theme: Fix scale sizing during .fine-tune
Using fine-tune on a GtkScale is maybe a little known feature, but it's also quite wonky. It causes marks, values, and sliders to jump around when activated. This is because it's implemented with less padding around the scale and an increased minimum size. For example a value drawn left or right of a horizontal scale, as then the height of the scale is the value height plus padding. So fine-tuning compresses the scale vertically. We can fix this by adding negative margin on the trough instead, without any changes to the padding or minimum size of the scale. Also, because the trough now grows 3px in all directions, the slider has to do that to, so that margin increases by 3px in all directions compared to what it was, also for the cases with marks. One last minor detail is that for vertical scales, fine-tuning causes the height of the mark indicators to grow, whereas their width should decrease. That's also fixed.
This commit is contained in:
@@ -2728,19 +2728,8 @@ scale {
|
||||
|
||||
// click-and-hold the slider to activate
|
||||
&.fine-tune {
|
||||
&.horizontal {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
// to make the trough grow in fine-tune mode
|
||||
> trough { margin: -3px; }
|
||||
> trough > slider { margin: -6px; }
|
||||
|
||||
> trough > fill,
|
||||
@@ -2885,7 +2874,7 @@ scale {
|
||||
&.top { margin-left: 3px; }
|
||||
&.bottom { margin-right: 3px; }
|
||||
|
||||
indicator { min-height: ($_marks_length - 3px); }
|
||||
indicator { min-width: ($_marks_length - 3px); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2957,7 +2946,7 @@ scale {
|
||||
&.fine-tune > trough > slider {
|
||||
@if $dir_class == 'horizontal' {
|
||||
// bigger negative margins to make the trough grow here as well
|
||||
margin: -7px -10px;
|
||||
margin: -7px;
|
||||
|
||||
@if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
|
||||
|
||||
@@ -2965,7 +2954,7 @@ scale {
|
||||
}
|
||||
|
||||
@else {
|
||||
margin: -10px -7px;
|
||||
margin: -7px;
|
||||
|
||||
@if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user