cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 8px active zone in scrollbar

Browse Source
This commit is contained in:
Jesús Arroyo Torrens 2017-09-27 17:34:01 +02:00
parent fb62dfda07
commit f39e4da135
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/scss/vendor/perfect-scrollbar/_mixins.scss vendored
View File

@ -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);

6
src/scss/vendor/perfect-scrollbar/_themes.scss vendored
View File

@ -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,

18
src/scss/vendor/perfect-scrollbar/_variables.scss vendored
View File

@ -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;