From f39e4da135af99a443c2fc5cc890a185cfe65ea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 27 Sep 2017 17:34:01 +0200 Subject: [PATCH] Add 8px active zone in scrollbar --- .../vendor/perfect-scrollbar/_mixins.scss | 24 ++++++++++++------- .../vendor/perfect-scrollbar/_themes.scss | 6 +++-- .../vendor/perfect-scrollbar/_variables.scss | 18 ++++++++------ 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss index 3bda63e..e56aa91 100644 --- a/src/scss/vendor/perfect-scrollbar/_mixins.scss +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -2,31 +2,29 @@ display: none; position: absolute; /* please don't change 'position' */ opacity: map_get($theme, rail-default-opacity); - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, - border-radius .2s ease-in-out; + transition: height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; } @mixin scrollbar-rail-hover($theme) { - background-color: map_get($theme, rail-hover-bg); opacity: map_get($theme, rail-hover-opacity); } @mixin scrollbar-default($theme) { position: absolute; /* please don't change 'position' */ - background-color: map_get($theme, bar-container-hover-bg); + background: map_get($theme, bar-bg); border-radius: map_get($theme, border-radius); - transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, - border-radius .2s ease-in-out; + transition: height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; } @mixin scrollbar-hover($theme) { - background-color: map_get($theme, bar-hover-bg); + background: map_get($theme, bar-hover-bg); } @mixin in-scrolling($theme) { &.ps-in-scrolling { &.ps-x > .ps-scrollbar-x-rail { @include scrollbar-rail-hover($theme); + background: map_get($theme, bar-x-rail-hover-bg); height: map_get($theme, scrollbar-x-rail-hover-height); > .ps-scrollbar-x { @@ -36,6 +34,7 @@ } &.ps-y > .ps-scrollbar-y-rail { @include scrollbar-rail-hover($theme); + background: map_get($theme, bar-y-rail-hover-bg); width: map_get($theme, scrollbar-y-rail-hover-width); > .ps-scrollbar-y { @@ -62,10 +61,15 @@ overflow: auto !important; } - &.ps-active-x > .ps-scrollbar-x-rail, + &.ps-active-x > .ps-scrollbar-x-rail { + display: block; + background: map_get($theme, bar-x-rail-bg); + cursor: default !important; + } + &.ps-active-y > .ps-scrollbar-y-rail { display: block; - background-color: map_get($theme, bar-bg); + background: map_get($theme, bar-y-rail-bg); cursor: default !important; } @@ -121,6 +125,7 @@ > .ps-scrollbar-x-rail:hover { @include scrollbar-rail-hover($theme); + background: map_get($theme, bar-x-rail-hover-bg); > .ps-scrollbar-x { @include scrollbar-hover($theme); @@ -129,6 +134,7 @@ > .ps-scrollbar-y-rail:hover { @include scrollbar-rail-hover($theme); + background: map_get($theme, bar-y-rail-hover-bg); > .ps-scrollbar-y { @include scrollbar-hover($theme); diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss index 089241c..e0d972a 100644 --- a/src/scss/vendor/perfect-scrollbar/_themes.scss +++ b/src/scss/vendor/perfect-scrollbar/_themes.scss @@ -4,9 +4,11 @@ $ps-theme-default: ( rail-container-hover-opacity: $ps-rail-container-hover-opacity, rail-hover-opacity: $ps-rail-hover-opacity, bar-bg: $ps-bar-bg, - bar-container-hover-bg: $ps-bar-container-hover-bg, bar-hover-bg: $ps-bar-hover-bg, - rail-hover-bg: $ps-rail-hover-bg, + bar-x-rail-bg: $ps-bar-x-rail-bg, + bar-x-rail-hover-bg: $ps-bar-x-rail-hover-bg, + bar-y-rail-bg: $ps-bar-y-rail-bg, + bar-y-rail-hover-bg: $ps-bar-y-rail-hover-bg, scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, scrollbar-x-rail-hover-height: $ps-scrollbar-x-rail-hover-height, diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index 814509a..e4c0233 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -5,22 +5,26 @@ $ps-rail-default-opacity: 1 !default; $ps-rail-container-hover-opacity: 1 !default; $ps-rail-hover-opacity: 1 !default; -$ps-bar-bg: #eee !default; -$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-bg: #aaa !default; $ps-bar-hover-bg: #aaa !default; -$ps-rail-hover-bg: #eee !default; + +$ps-bar-x-rail-bg: linear-gradient(180deg, transparent 50%, #eee 50%) !default; +$ps-bar-x-rail-hover-bg: linear-gradient(180deg, transparent 50%, #eee 50%) !default; + +$ps-bar-y-rail-bg: linear-gradient(90deg, transparent 50%, #eee 50%) !default; +$ps-bar-y-rail-hover-bg: linear-gradient(90deg, transparent 50%, #eee 50%) !default; // Sizes $ps-scrollbar-x-rail-bottom: 0 !default; -$ps-scrollbar-x-rail-height: 4px !default; -$ps-scrollbar-x-rail-hover-height: 8px !default; +$ps-scrollbar-x-rail-height: 8px !default; +$ps-scrollbar-x-rail-hover-height: 16px !default; $ps-scrollbar-x-bottom: 0 !default; $ps-scrollbar-x-height: 4px !default; $ps-scrollbar-x-hover-height: 8px !default; $ps-scrollbar-y-rail-right: 0 !default; -$ps-scrollbar-y-rail-width: 4px !default; -$ps-scrollbar-y-rail-hover-width: 8px !default; +$ps-scrollbar-y-rail-width: 8px !default; +$ps-scrollbar-y-rail-hover-width: 16px !default; $ps-scrollbar-y-right: 0 !default; $ps-scrollbar-y-width: 4px !default; $ps-scrollbar-y-hover-width: 8px !default;