From d26014107335b7613caab1e3411226e3bd5b9e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Fri, 22 Sep 2017 12:37:02 +0200 Subject: [PATCH 1/8] Update perfect scrollbar style --- src/scss/vendor/perfect-scrollbar/_variables.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index 7454fb0..36f26b6 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -1,17 +1,17 @@ // Colors -$ps-border-radius: 6px !default; +$ps-border-radius: 0 !default; -$ps-rail-default-opacity: 0 !default; -$ps-rail-container-hover-opacity: 0.6 !default; -$ps-rail-hover-opacity: 0.9 !default; +$ps-rail-default-opacity: 1 !default; +$ps-rail-container-hover-opacity: 1 !default; +$ps-rail-hover-opacity: 1 !default; -$ps-bar-bg: transparent !default; -$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-bg: #eee !default; +$ps-bar-container-hover-bg: #999 !default; $ps-bar-hover-bg: #999 !default; $ps-rail-hover-bg: #eee !default; // Sizes -$ps-scrollbar-x-rail-bottom: 0px !default; +$ps-scrollbar-x-rail-bottom: 0 !default; $ps-scrollbar-x-rail-height: 15px !default; $ps-scrollbar-x-bottom: 2px !default; $ps-scrollbar-x-height: 6px !default; From ddd59386c3ddebfc98f0d444a739c420fecb34e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Fri, 22 Sep 2017 13:15:58 +0200 Subject: [PATCH 2/8] Update perfect scrollbar size --- src/scss/vendor/perfect-scrollbar/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index 36f26b6..459b193 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -12,10 +12,10 @@ $ps-rail-hover-bg: #eee !default; // Sizes $ps-scrollbar-x-rail-bottom: 0 !default; -$ps-scrollbar-x-rail-height: 15px !default; -$ps-scrollbar-x-bottom: 2px !default; -$ps-scrollbar-x-height: 6px !default; -$ps-scrollbar-x-hover-height: 11px !default; +$ps-scrollbar-x-rail-height: 4px !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: 15px !default; From 13966110bf34f7a2773b063889645dc1b75403df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Fri, 22 Sep 2017 13:43:57 +0200 Subject: [PATCH 3/8] Update perfect scrollbar colors --- src/scss/vendor/perfect-scrollbar/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index 459b193..2944c49 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -6,8 +6,8 @@ $ps-rail-container-hover-opacity: 1 !default; $ps-rail-hover-opacity: 1 !default; $ps-bar-bg: #eee !default; -$ps-bar-container-hover-bg: #999 !default; -$ps-bar-hover-bg: #999 !default; +$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-hover-bg: #aaa !default; $ps-rail-hover-bg: #eee !default; // Sizes From 113141d86d2442a1ac37f9615d0ef0660739cbda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Fri, 22 Sep 2017 14:17:43 +0200 Subject: [PATCH 4/8] Update perfect scrollbar-y size --- src/scss/vendor/perfect-scrollbar/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index 2944c49..cfc7d00 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -18,7 +18,7 @@ $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: 15px !default; -$ps-scrollbar-y-right: 2px !default; -$ps-scrollbar-y-width: 6px !default; -$ps-scrollbar-y-hover-width: 11px !default; +$ps-scrollbar-y-rail-width: 4px !default; +$ps-scrollbar-y-right: 0 !default; +$ps-scrollbar-y-width: 4px !default; +$ps-scrollbar-y-hover-width: 8px !default; From 4339cd0a6982a35ef9705ce89cba048fad3f750d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 27 Sep 2017 15:32:58 +0200 Subject: [PATCH 5/8] Show default cursor in scrollbars --- src/scss/vendor/perfect-scrollbar/_mixins.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss index 79d3d2c..a2d0d75 100644 --- a/src/scss/vendor/perfect-scrollbar/_mixins.scss +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -61,6 +61,7 @@ &.ps-active-y > .ps-scrollbar-y-rail { display: block; background-color: map_get($theme, bar-bg); + cursor: default !important; } @include in-scrolling($theme); From fb62dfda0757782ba6fd8175159e61745c77c13e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 27 Sep 2017 16:09:08 +0200 Subject: [PATCH 6/8] Add rail-size hover in scrollbar --- src/scss/vendor/perfect-scrollbar/_mixins.scss | 11 ++++++++++- src/scss/vendor/perfect-scrollbar/_themes.scss | 2 ++ src/scss/vendor/perfect-scrollbar/_variables.scss | 2 ++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss index a2d0d75..3bda63e 100644 --- a/src/scss/vendor/perfect-scrollbar/_mixins.scss +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -2,7 +2,8 @@ display: none; position: absolute; /* please don't change 'position' */ opacity: map_get($theme, rail-default-opacity); - transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, + border-radius .2s ease-in-out; } @mixin scrollbar-rail-hover($theme) { @@ -26,6 +27,8 @@ &.ps-in-scrolling { &.ps-x > .ps-scrollbar-x-rail { @include scrollbar-rail-hover($theme); + height: map_get($theme, scrollbar-x-rail-hover-height); + > .ps-scrollbar-x { @include scrollbar-hover($theme); height: map_get($theme, scrollbar-x-hover-height); @@ -33,6 +36,8 @@ } &.ps-y > .ps-scrollbar-y-rail { @include scrollbar-rail-hover($theme); + width: map_get($theme, scrollbar-y-rail-hover-width); + > .ps-scrollbar-y { @include scrollbar-hover($theme); width: map_get($theme, scrollbar-y-hover-width); @@ -78,6 +83,8 @@ } &:hover, &:active { + height: map_get($theme, scrollbar-x-rail-hover-height); + > .ps-scrollbar-x { height: map_get($theme, scrollbar-x-hover-height); } @@ -96,6 +103,8 @@ } &:hover, &:active { + width: map_get($theme, scrollbar-y-rail-hover-width); + > .ps-scrollbar-y { width: map_get($theme, scrollbar-y-hover-width); } diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss index bf7729a..089241c 100644 --- a/src/scss/vendor/perfect-scrollbar/_themes.scss +++ b/src/scss/vendor/perfect-scrollbar/_themes.scss @@ -9,11 +9,13 @@ $ps-theme-default: ( rail-hover-bg: $ps-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, scrollbar-x-bottom: $ps-scrollbar-x-bottom, scrollbar-x-height: $ps-scrollbar-x-height, scrollbar-x-hover-height: $ps-scrollbar-x-hover-height, scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, + scrollbar-y-rail-hover-width: $ps-scrollbar-y-rail-hover-width, scrollbar-y-right: $ps-scrollbar-y-right, scrollbar-y-width: $ps-scrollbar-y-width, scrollbar-y-hover-width: $ps-scrollbar-y-hover-width, diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index cfc7d00..814509a 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -13,12 +13,14 @@ $ps-rail-hover-bg: #eee !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-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-right: 0 !default; $ps-scrollbar-y-width: 4px !default; $ps-scrollbar-y-hover-width: 8px !default; 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 7/8] 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; From ed70ee8e10bbcc163b1c3edda0a23e651e9f1fe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 27 Sep 2017 18:15:05 +0200 Subject: [PATCH 8/8] Fix hound --- src/scss/vendor/perfect-scrollbar/_mixins.scss | 8 ++++---- src/scss/vendor/perfect-scrollbar/_variables.scss | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss index e56aa91..b9411bb 100644 --- a/src/scss/vendor/perfect-scrollbar/_mixins.scss +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -2,7 +2,7 @@ display: none; position: absolute; /* please don't change 'position' */ opacity: map_get($theme, rail-default-opacity); - transition: height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out; } @mixin scrollbar-rail-hover($theme) { @@ -13,7 +13,7 @@ position: absolute; /* please don't change 'position' */ background: map_get($theme, bar-bg); border-radius: map_get($theme, border-radius); - transition: height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out; } @mixin scrollbar-hover($theme) { @@ -24,8 +24,8 @@ &.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); + background: map_get($theme, bar-x-rail-hover-bg); > .ps-scrollbar-x { @include scrollbar-hover($theme); @@ -34,8 +34,8 @@ } &.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); + background: map_get($theme, bar-y-rail-hover-bg); > .ps-scrollbar-y { @include scrollbar-hover($theme); diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss index e4c0233..2ad6964 100644 --- a/src/scss/vendor/perfect-scrollbar/_variables.scss +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -5,14 +5,14 @@ $ps-rail-default-opacity: 1 !default; $ps-rail-container-hover-opacity: 1 !default; $ps-rail-hover-opacity: 1 !default; -$ps-bar-bg: #aaa !default; -$ps-bar-hover-bg: #aaa !default; +$ps-bar-bg: #AAA !default; +$ps-bar-hover-bg: #AAA !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-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; +$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;