From 8d8627a9f5c70334ead61b303f3ea9196da584ad Mon Sep 17 00:00:00 2001 From: SammysHP Date: Mon, 18 Apr 2016 17:31:59 +0200 Subject: [PATCH] Fix #357: Scrollbar margin inconsistency Completely refactored scrollbar and added proper stepper support (although they are disabled by default). --- gtk-3.20/scss/widgets/_scrollbar.scss | 131 ++++++++++---------------- 1 file changed, 52 insertions(+), 79 deletions(-) diff --git a/gtk-3.20/scss/widgets/_scrollbar.scss b/gtk-3.20/scss/widgets/_scrollbar.scss index 2658546..9c8a095 100644 --- a/gtk-3.20/scss/widgets/_scrollbar.scss +++ b/gtk-3.20/scss/widgets/_scrollbar.scss @@ -4,7 +4,9 @@ @include exports("scrollbar") { scrollbar { - $_slider_min_length: 20px; + $_slider_min_length: 40px; + $_slider_normal_width: 7px; + $_slider_small_width: 4px; // disable steppers @at-root * { @@ -15,7 +17,7 @@ background-color: $scrollbar_bg_color; transition: 300ms ease-out; - // scrollbar border + // scrollbar border on the content side &.top { border-bottom: 1px solid $borders_color; } &.bottom { border-top: 1px solid $borders_color; } &.left { border-right: 1px solid $borders_color; } @@ -27,135 +29,106 @@ transition: 400ms ease-in; } - // slider slider { - min-width: 7px; - min-height: 7px; - margin: -2px; - border: 4px solid transparent; + min-width: $_slider_normal_width; + min-height: $_slider_normal_width; + border: 1px solid transparent; border-radius: $roundness; background-clip: padding-box; background-color: $scrollbar_slider_color; &:hover { background-color: $scrollbar_slider_hover_color; } - &:hover:active { background-color: $scrollbar_slider_active_color; } - &:backdrop { background-color: $backdrop_scrollbar_slider_color; } - &:disabled { background-color: transparent; } } - &.fine-tune { - slider { - min-width: 7px; - min-height: 7px; - } + &.horizontal slider { min-width: $_slider_min_length; } + &.vertical slider { min-height: $_slider_min_length; } - &.horizontal slider { border-width: 1px; } - &.vertical slider { border-width: 1px; } + &.fine-tune slider:active { + background-color: lighten($scrollbar_slider_active_color, 10%); } &.overlay-indicator { + opacity: .8; + &:not(.dragging):not(.hovering) { border-color: transparent; - opacity: 0.4; + opacity: .4; background-color: transparent; slider { - margin: 0; - min-width: 5px; - min-height: 5px; + min-width: $_slider_small_width; + min-height: $_slider_small_width; background-color: $fg_color; - border: 1px solid if($variant == 'light', white, black); + border: 1px solid if($variant == "light", white, black); } + // hide steppers button { - min-width: 5px; - min-height: 5px; - background-color: $fg_color; - background-clip: padding-box; - border-radius: $roundness; - border: 1px solid if($variant == 'light', white, black); + min-width: $_slider_small_width; + min-height: $_slider_small_width; + border-color: transparent; -gtk-icon-source: none; } &.horizontal { - slider { - margin: 0 2px; - min-width: $_slider_min_length; - } - - button { - margin: 1px 2px; - min-width: 5px; - } + slider { min-width: $_slider_min_length; } + button { min-width: $_slider_normal_width; } } &.vertical { - slider { - margin: 2px 0; - min-height: $_slider_min_length; - } - - button { - margin: 2px 1px; - min-height: 5px; - } + slider { min-height: $_slider_min_length; } + button { min-height: $_slider_normal_width; } } } - - &.dragging, - &.hovering { opacity: 0.8; } } - &.horizontal slider { min-width: $_slider_min_length; } - - &.vertical slider { min-height: $_slider_min_length; } - // button styling + // stepper styling button { + min-width: $_slider_normal_width; + min-height: $_slider_normal_width; padding: 0; - min-width: 7px; - min-height: 7px; - border-style: none; - border-radius: $roundness; - transition-property: min-height, min-width, color; - + border: 0; + border-radius: 0; + border-color: $borders_color; // FIXME overwritten by global button definition + background-color: transparent; + box-shadow: none; color: $scrollbar_slider_color; - &:hover { - color: $scrollbar_slider_hover_color; - } - - &:active, &:checked { - color: $scrollbar_slider_active_color; - } - - &:backdrop { - color: $backdrop_scrollbar_slider_color; - } + &:hover { color: $scrollbar_slider_hover_color; } + &:active, &:checked { color: $scrollbar_slider_active_color; } + &:backdrop { color: $backdrop_scrollbar_slider_color; } } // button icons &.vertical { button { - &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + &.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid $borders_color; + } - &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + &.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid $borders_color; + } } } &.horizontal { button { - &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } + &.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); + border-left: 1px solid $borders_color; + } - &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } + &.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); + border-right: 1px solid $borders_color; + } } } } - - treeview ~ scrollbar.vertical { - border-top: 1px solid $borders_color; - margin-top: -1px; - } }