jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TOC scrollbar should not fade 

Bug: T311436
Change-Id: I50e2d82982515f045596c1a19dd7f9932cde25ef
This commit is contained in:
Clare Ming 2022-06-30 15:49:34 -06:00 committed by bwang
parent 189b953096
commit c18c9856b5
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/skins.vector.styles/components/Sidebar.less
View File

@ -39,24 +39,23 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
// Update styling when TOC is enabled
.vector-toc-enabled {
.mw-sidebar,
.sidebar-toc {
.sidebar-toc,
.sidebar-toc:after {
// Match styles between TOC and fade element to ensure the fade covers the correct area
width: @width-sidebar;
margin-left: 0;
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
margin-left: @margin-start-sidebar-content;
}
}
.mw-sidebar {
width: @width-sidebar;
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-image: none;
background-color: @border-color-sidebar;
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
}
}
& .vector-layout-grid {

15
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -2,22 +2,17 @@
@fade-height: 40px;
@vertical-padding: 20px;
@right-padding: 12px;
@toggle-icon-size: 1.834em;
.sidebar-toc {
display: none;
width: @width-sidebar;
max-height: 75vh;
padding: @vertical-padding 12px @vertical-padding 32px;
padding: @vertical-padding @right-padding @vertical-padding 32px;
box-sizing: border-box;
overflow: auto;
background-color: @border-color-sidebar;
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
padding-right: 8px;
}
.sidebar-toc-header {
padding-bottom: 12px;
}
@ -76,10 +71,12 @@
display: block;
position: absolute;
bottom: 0;
left: @margin-start-sidebar-content; // T306893: Ensure scrollable indicator is contained in the TOC
right: @border-width-base; // Ensure scrollable indicator doesn't cover border/scrollbar
left: 0;
right: 0;
height: @fade-height;
background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
background-repeat: no-repeat;
background-position: -@right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
pointer-events: none; // Make the link below the fade clickable
}