wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 09:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Table of contents: Update TOC styles

Browse source 
Visual changes:
* Changes to table of contents text alignment and padding

Bug: T312156
Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
This commit is contained in:
bwang 2022-07-19 18:18:07 -07:00 committed by Jdlrobson
parent 6ecbd5e970
commit 2d9585c8e3
3 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/skins.vector.styles/components/Sidebar.less
View file

@ -39,6 +39,15 @@
}
}
.sidebar-toc,
.sidebar-toc:after {
margin-left: -@margin-start-sidebar-content;
@media ( min-width: @min-width-desktop-wide ) {
margin-left: 0;
}
}
.vector-layout-grid {
@media ( min-width: @min-width-desktop ) {
.mw-sidebar {
@ -139,10 +148,3 @@
visibility: hidden;
opacity: 0;
}
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
.mw-sidebar {
background: @background-color-page-container;
border-right: @border-width-base @border-style-base @border-color-sidebar;
}
}

10
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -3,14 +3,18 @@
@sidebar-toc-fade-height: 30px;
@sidebar-toc-vertical-padding: 20px;
@sidebar-toc-right-padding: 12px;
// Sidebar TOC uses increased left padding and a negative left margin to achieve
// a 15px spacing without clipping the chevron icon
// https://phabricator.wikimedia.org/T312156#8095894
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )';
@toc-subsection-toggle-icon-size: 1.834em;
.sidebar-toc {
max-height: 75vh;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding 32px;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
box-sizing: border-box;
overflow: auto;
background-color: @border-color-sidebar;
background-color: @background-color-page-container;
.sidebar-toc-header {
padding-bottom: 12px;
@ -87,7 +91,7 @@
left: 0;
right: 0;
height: @sidebar-toc-fade-height;
background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
background-repeat: no-repeat;
background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
pointer-events: none; // Make the link below the fade clickable

3
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View file

@ -44,10 +44,9 @@
top: 44px;
left: -2px;
// !important needed to override rules in Sidebar.less
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
margin: 0 !important; /* stylelint-disable-line declaration-no-important */
// Dropdown styles
background-color: @color-base--inverted;
border: @border-width-base @border-style-base @border-color-base;
// Remove TOC fade