AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2025-01-15 14:50:06 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: Scrollbar transitions and size

Browse Source 
- tone down the size of the controller again
- transition between the indicator and control fluidly

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/1886
This commit is contained in:
Jakub Steiner 2021-02-10 12:37:45 +01:00
parent 4ce071721f
commit 5c5cd34c2f
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
gtk/theme/Adwaita/_common.scss
View File

@ -2278,11 +2278,14 @@ notebook {
/************** /**************
* Scrollbars * * Scrollbars *
**************/ **************/
scrollbar { scrollbar {
$_slider_min_length: 40px; $_slider_min_length: 40px;
$_slider_width: 8px;
$_scrollbar_transition: all 300ms $ease-out-quad;
background-color: $scrollbar_bg_color; background-color: $scrollbar_bg_color;
transition: 300ms $ease-out-quad; transition: $_scrollbar_transition;
// scrollbar border // scrollbar border
&.top { border-bottom: 1px solid $borders_color; } &.top { border-bottom: 1px solid $borders_color; }
@ -2291,13 +2294,14 @@ scrollbar {
&.right { border-left: 1px solid $borders_color; } &.right { border-left: 1px solid $borders_color; }
> range > trough > slider { > range > trough > slider {
min-width: 10px; min-width: $_slider_width;
min-height: 10px; min-height: $_slider_width;
margin: -1px; margin: -1px;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: 10px; border-radius: 10px;
background-clip: padding-box; background-clip: padding-box;
background-color: $scrollbar_slider_color; background-color: $scrollbar_slider_color;
transition: $_scrollbar_transition;
&:hover { background-color: $scrollbar_slider_hover_color; } &:hover { background-color: $scrollbar_slider_hover_color; }
@ -2308,8 +2312,8 @@ scrollbar {
> range.fine-tune { > range.fine-tune {
> trough > slider { > trough > slider {
min-width: 6px; min-width: $_slider_width - 2;
min-height: 6px; min-height: $_slider_width - 2;
} }
&.horizontal > trough > slider { border-width: 6px 4px; } &.horizontal > trough > slider { border-width: 6px 4px; }