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

Merge "Update CSS to allow TOC to be collapsed at larger viewports using grid"

This commit is contained in:
jenkins-bot 2022-07-25 21:41:42 +00:00 committed by Gerrit Code Review
parent a32a2cc322 4511b94b21
commit 9fc2f4403e
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/common/variables.less
View File

@ -64,6 +64,8 @@
@size-icon: unit( 20 / @font-size-browser, em );
@size-indicator: unit( 12 / @font-size-browser, em );
// Copied from mediawiki.ui.icons
@icon-padding-md: unit( 12 / @font-size-browser, em );
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );

57
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -4,30 +4,29 @@
#vector-toc-collapsed-button {
display: none;
float: left;
margin-right: 4px;
margin-left: -@icon-padding-md;
// Reduce padding to fit with page title
padding: 7px 10px 7px 10px;
// Override background color for when the TOC is overlaps content
// as a sticky element when the page is scrolled down.
background-color: @background-color-base;
&:hover,
&:active {
background-color: @colorGray15;
}
}
@media ( max-width: @max-width-tablet ) {
#vector-toc-collapsed-button,
.sidebar-toc {
z-index: @z-index-menu;
}
#vector-toc-collapsed-button,
.sidebar-toc {
z-index: @z-index-menu;
}
.mixin-collapse-toc-page-title {
#vector-toc-collapsed-button {
display: block;
float: left;
margin-right: 4px;
margin-left: -10px;
// Reduce padding to fit with page title
padding: 7px 10px 7px 10px;
// Override background color for when the TOC is overlaps content
// as a sticky element when the page is scrolled down.
background-color: @background-color-base;
&:hover,
&:active {
background-color: @colorGray15;
}
}
.mw-table-of-contents-container {
@ -59,6 +58,10 @@
// Hide the TOC when the button is not checked
display: none;
}
}
@media ( max-width: @max-width-tablet ) {
.mixin-collapse-toc-page-title();
.vector-below-page-title {
#vector-toc-collapsed-button,
@ -79,3 +82,19 @@
}
}
}
@media ( min-width: @min-width-desktop ) {
@supports ( display: grid ) {
.vector-toc-collapsed .vector-layout-grid {
.mixin-collapse-toc-page-title();
.mw-table-of-contents-container {
grid-area: content;
}
.sidebar-toc {
left: -@icon-padding-md;
}
}
}
}