imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add scroll indicator gradients to top and bottom of room sub list

Browse source
This commit is contained in:
Bruno Windels 2018-11-12 12:57:21 +01:00
parent b0032b247d
commit 0f226853f5
5 changed files with 118 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
res/css/structures/_AutoHideScrollbar.scss
View file

@ -41,14 +41,26 @@ is overflowing. This is what Firefox ends up using. Overflow is detected
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
This only works in Firefox, which should be fine as this fallback is only needed there.
*/
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar {
overflow-y: hidden;
}
body.mx_scrollbar_nooverlay {
.mx_AutoHideScrollbar {
overflow-y: hidden;
}
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover {
overflow-y: auto;
}
.mx_AutoHideScrollbar:hover {
overflow-y: auto;
}
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset {
margin-right: calc(-1 * var(--scrollbar-width));
/*
offset scrollbar width with negative margin-right
include before and after psuedo-elements here so they can
be used to do something interesting like scroll-indicating
gradients (see IndicatorScrollBar)
*/
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
{
margin-right: calc(-1 * var(--scrollbar-width));
}
}

30
res/css/structures/_RoomSubList.scss
View file

@ -110,6 +110,36 @@ limitations under the License.
padding: 0 8px;
}
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before,
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
position: sticky;
left: 0;
right: 0;
height: 40px;
content: "";
display: block;
z-index: 100;
pointer-events: none;
}
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -40px;
}
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -40px;
}
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
background: linear-gradient($secondary-accent-color, transparent);
}
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
background: linear-gradient(transparent, $secondary-accent-color);
}
.collapsed {
.mx_RoomSubList_scroll {