wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization

Browse source 
Bug: T324877
Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
This commit is contained in:
bwang 2022-12-20 12:09:01 -06:00
parent fe105edcdb
commit af21dec1c1
5 changed files with 61 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/common/variables.less
View file

@ -139,6 +139,16 @@
@selector-main-menu-open: ~'#mw-sidebar-checkbox:checked';
@selector-main-menu-closed: ~'#mw-sidebar-checkbox:not( :checked )';
// TOC
@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: 15px + @sidebar-toc-right-padding;
@toc-subsection-toggle-icon-size: 1.834em;
// Sidebar
@width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px;

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

@ -1,62 +1,5 @@
@import '../../common/variables.less';
@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: 15px + @sidebar-toc-right-padding;
@toc-subsection-toggle-icon-size: 1.834em;
.mw-table-of-contents-container {
// Needed for Grid-based layout
align-self: start;
height: 100%;
}
#vector-toc-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
@media ( min-width: @min-width-desktop ) {
.vector-toc-pinned & {
// Default spacing separating the sidebar TOC from the main menu or viewport.
// Need to use padding in order for the spacing to apply when sticky
padding-top: 1.5em;
}
.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
margin-top: 1.5em;
}
.sidebar-toc,
.sidebar-toc:after {
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@sidebar-toc-left-padding;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
.vector-toc-pinned & .sidebar-toc:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: @sidebar-toc-fade-height;
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
}
}
}
.sidebar-toc {
max-height: 75vh;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;

49
resources/skins.vector.styles/components/TableOfContentsPinned.less Normal file
View file

@ -0,0 +1,49 @@
@import '../../common/variables.less';
.mw-table-of-contents-container {
// Needed for Grid-based layout
align-self: start;
height: 100%;
}
#vector-toc-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
@media ( min-width: @min-width-desktop ) {
.vector-toc-pinned & {
// Default spacing separating the sidebar TOC from the main menu or viewport.
// Need to use padding in order for the spacing to apply when sticky
padding-top: 1.5em;
}
.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
margin-top: 1.5em;
}
.sidebar-toc,
.sidebar-toc:after {
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@sidebar-toc-left-padding;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
.vector-toc-pinned .sidebar-toc:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: @sidebar-toc-fade-height;
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
}
}
}

0
resources/skins.vector.styles/components/TableOfContentsCollapsed.less → resources/skins.vector.styles/components/TableOfContentsUnpinned.less
View file

3
resources/skins.vector.styles/skin.less
View file

@ -30,7 +30,8 @@
@import './components/StickyHeader.less';
@import './components/TabWatchstarLink.less';
@import './components/TableOfContents.less';
@import './components/TableOfContentsCollapsed.less';
@import './components/TableOfContentsPinned.less';
@import './components/TableOfContentsUnpinned.less';
@import './components/Icon.less';
.vector-feature-page-tools-disabled {