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

Merge pull request #171 from CartoDB/12184-unify-scrollbars

Browse Source 
Unify scrollbars
This commit is contained in:
Buti 2017-10-02 09:31:53 +02:00 committed by GitHub
commit 6bad8afd8a
3 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,30 +2,31 @@
display: none; display: none;
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
opacity: map_get($theme, rail-default-opacity); opacity: map_get($theme, rail-default-opacity);
transition: background-color .2s linear, opacity .2s linear; transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
} }
@mixin scrollbar-rail-hover($theme) { @mixin scrollbar-rail-hover($theme) {
background-color: map_get($theme, rail-hover-bg);
opacity: map_get($theme, rail-hover-opacity); opacity: map_get($theme, rail-hover-opacity);
} }
@mixin scrollbar-default($theme) { @mixin scrollbar-default($theme) {
position: absolute; /* please don't change 'position' */ 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); border-radius: map_get($theme, border-radius);
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
border-radius .2s ease-in-out;
} }
@mixin scrollbar-hover($theme) { @mixin scrollbar-hover($theme) {
background-color: map_get($theme, bar-hover-bg); background: map_get($theme, bar-hover-bg);
} }
@mixin in-scrolling($theme) { @mixin in-scrolling($theme) {
&.ps-in-scrolling { &.ps-in-scrolling {
&.ps-x > .ps-scrollbar-x-rail { &.ps-x > .ps-scrollbar-x-rail {
@include scrollbar-rail-hover($theme); @include scrollbar-rail-hover($theme);
height: map_get($theme, scrollbar-x-rail-hover-height);
background: map_get($theme, bar-x-rail-hover-bg);
> .ps-scrollbar-x { > .ps-scrollbar-x {
@include scrollbar-hover($theme); @include scrollbar-hover($theme);
height: map_get($theme, scrollbar-x-hover-height); height: map_get($theme, scrollbar-x-hover-height);
@ -33,6 +34,9 @@
} }
&.ps-y > .ps-scrollbar-y-rail { &.ps-y > .ps-scrollbar-y-rail {
@include scrollbar-rail-hover($theme); @include scrollbar-rail-hover($theme);
width: map_get($theme, scrollbar-y-rail-hover-width);
background: map_get($theme, bar-y-rail-hover-bg);
> .ps-scrollbar-y { > .ps-scrollbar-y {
@include scrollbar-hover($theme); @include scrollbar-hover($theme);
width: map_get($theme, scrollbar-y-hover-width); width: map_get($theme, scrollbar-y-hover-width);
@ -57,10 +61,16 @@
overflow: auto !important; 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 { &.ps-active-y > .ps-scrollbar-y-rail {
display: block; display: block;
background-color: map_get($theme, bar-bg); background: map_get($theme, bar-y-rail-bg);
cursor: default !important;
} }
@include in-scrolling($theme); @include in-scrolling($theme);
@ -77,6 +87,8 @@
} }
&:hover, &:hover,
&:active { &:active {
height: map_get($theme, scrollbar-x-rail-hover-height);
> .ps-scrollbar-x { > .ps-scrollbar-x {
height: map_get($theme, scrollbar-x-hover-height); height: map_get($theme, scrollbar-x-hover-height);
} }
@ -95,6 +107,8 @@
} }
&:hover, &:hover,
&:active { &:active {
width: map_get($theme, scrollbar-y-rail-hover-width);
> .ps-scrollbar-y { > .ps-scrollbar-y {
width: map_get($theme, scrollbar-y-hover-width); width: map_get($theme, scrollbar-y-hover-width);
} }
@ -111,6 +125,7 @@
> .ps-scrollbar-x-rail:hover { > .ps-scrollbar-x-rail:hover {
@include scrollbar-rail-hover($theme); @include scrollbar-rail-hover($theme);
background: map_get($theme, bar-x-rail-hover-bg);
> .ps-scrollbar-x { > .ps-scrollbar-x {
@include scrollbar-hover($theme); @include scrollbar-hover($theme);
@ -119,6 +134,7 @@
> .ps-scrollbar-y-rail:hover { > .ps-scrollbar-y-rail:hover {
@include scrollbar-rail-hover($theme); @include scrollbar-rail-hover($theme);
background: map_get($theme, bar-y-rail-hover-bg);
> .ps-scrollbar-y { > .ps-scrollbar-y {
@include scrollbar-hover($theme); @include scrollbar-hover($theme);

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

@ -4,16 +4,20 @@ $ps-theme-default: (
rail-container-hover-opacity: $ps-rail-container-hover-opacity, rail-container-hover-opacity: $ps-rail-container-hover-opacity,
rail-hover-opacity: $ps-rail-hover-opacity, rail-hover-opacity: $ps-rail-hover-opacity,
bar-bg: $ps-bar-bg, bar-bg: $ps-bar-bg,
bar-container-hover-bg: $ps-bar-container-hover-bg,
bar-hover-bg: $ps-bar-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-bottom: $ps-scrollbar-x-rail-bottom,
scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, 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-bottom: $ps-scrollbar-x-bottom,
scrollbar-x-height: $ps-scrollbar-x-height, scrollbar-x-height: $ps-scrollbar-x-height,
scrollbar-x-hover-height: $ps-scrollbar-x-hover-height, scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, 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-right: $ps-scrollbar-y-right,
scrollbar-y-width: $ps-scrollbar-y-width, scrollbar-y-width: $ps-scrollbar-y-width,
scrollbar-y-hover-width: $ps-scrollbar-y-hover-width, scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,

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

@ -1,24 +1,30 @@
// Colors // Colors
$ps-border-radius: 6px !default; $ps-border-radius: 0 !default;
$ps-rail-default-opacity: 0 !default; $ps-rail-default-opacity: 1 !default;
$ps-rail-container-hover-opacity: 0.6 !default; $ps-rail-container-hover-opacity: 1 !default;
$ps-rail-hover-opacity: 0.9 !default; $ps-rail-hover-opacity: 1 !default;
$ps-bar-bg: transparent !default; $ps-bar-bg: #AAA !default;
$ps-bar-container-hover-bg: #aaa !default; $ps-bar-hover-bg: #AAA !default;
$ps-bar-hover-bg: #999 !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 // 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-rail-height: 8px !default;
$ps-scrollbar-x-bottom: 2px !default; $ps-scrollbar-x-rail-hover-height: 16px !default;
$ps-scrollbar-x-height: 6px !default; $ps-scrollbar-x-bottom: 0 !default;
$ps-scrollbar-x-hover-height: 11px !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-right: 0 !default;
$ps-scrollbar-y-rail-width: 15px !default; $ps-scrollbar-y-rail-width: 8px !default;
$ps-scrollbar-y-right: 2px !default; $ps-scrollbar-y-rail-hover-width: 16px !default;
$ps-scrollbar-y-width: 6px !default; $ps-scrollbar-y-right: 0 !default;
$ps-scrollbar-y-hover-width: 11px !default; $ps-scrollbar-y-width: 4px !default;
$ps-scrollbar-y-hover-width: 8px !default;