Make scrollbar overlay content in left pane

This commit is contained in:
Josh Perez 2021-09-17 17:03:18 -04:00 committed by GitHub
parent e2454ef7c5
commit 277992a468
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 22 deletions

View file

@ -29,9 +29,6 @@
@include light-theme {
background-color: $color-gray-02;
::-webkit-scrollbar-track {
background: $color-gray-02;
}
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-02;
}
@ -39,9 +36,6 @@
@include dark-theme {
background-color: $color-gray-80;
::-webkit-scrollbar-track {
background: $color-gray-80;
}
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-80;
}

View file

@ -572,3 +572,30 @@
}
}
}
@mixin scrollbar {
&::-webkit-scrollbar-thumb {
border-radius: 4px;
visibility: hidden;
width: 6px;
@include light-theme {
background: $color-black-alpha-40;
}
@include dark-theme {
background: $color-white-alpha-40;
}
}
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
}

View file

@ -5622,22 +5622,7 @@ button.module-image__border-overlay:focus {
// Module: conversation list
.module-conversation-list {
&::-webkit-scrollbar-thumb {
border-radius: 4px;
visibility: hidden;
width: 6px;
@include light-theme {
background: $color-black-alpha-40;
}
@include dark-theme {
background: $color-white-alpha-40;
}
}
&:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
@include scrollbar;
&--scroll-behavior {
&-default {
@ -6373,6 +6358,10 @@ button.module-image__border-overlay:focus {
.module-timeline {
height: 100%;
overflow: hidden;
.ReactVirtualized__List {
@include scrollbar;
}
}
.module-timeline--disabled {

View file

@ -1369,6 +1369,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
scrollToIndex={scrollToIndex}
tabIndex={-1}
width={width}
style={{ overflow: 'overlay' }}
/>
);
}}