wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-24 10:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify grid styles now that grid is no longer needed to position ToC

Browse source 
Bug: T318013
Change-Id: Id2dda853c18673ee98ca674128f5da5aa8370cc4
This commit is contained in:
bwang 2022-12-06 17:40:03 -06:00
parent fa0ae68f4c
commit 2e095bd066
1 changed files with 17 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
resources/skins.vector.styles/layouts/grid.less
View file

@ -2,8 +2,6 @@
// Grid layout
//
@width-sidebar-end: unit( 185px / @font-size-browser, em );
// Match styles between TOC and fade element to ensure the fade covers the correct area
// This is expressed in pixels to support different font sizes since our layout is currently
// expressed in pixels. See T313817.
@ -70,14 +68,6 @@
}
}
.mixin-horizontally-centered() {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
.mw-content-container,
.mw-table-of-contents-container {
.vector-feature-page-tools-disabled & {
@ -100,28 +90,26 @@
}
}
// Our usage of grid to position the ToC when it is collapsed in the page title
// requires us to manually define the max width depending on the number of columns.
// This also requires us to define a set width for the sidebar end column
// FIXME: Remove this max-width mess with T318013
@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
.mixin-horizontally-centered();
max-width: @max-width-content-container;
.vector-feature-page-tools-enabled.vector-feature-page-tools-pinned-enabled & {
max-width: @max-width-content-container + @width-sidebar-end;
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-page-tools-disabled {
@{selector-sidebar-no-toc-sidebar-closed},
&.vector-toc-unpinned @{selector-main-menu-closed} {
& ~ .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
}
.vector-toc-unpinned @{selector-main-menu-closed} {
& ~ .mw-content-container,
& ~ .mw-table-of-contents-container {
.mixin-horizontally-centered();
max-width: @max-width-content-container;
.vector-feature-page-tools-enabled.vector-feature-page-tools-pinned-enabled& {
max-width: @max-width-content-container + @width-sidebar-end;
}
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-page-tools-enabled {
&.vector-main-menu-unpinned .vector-sidebar-container-no-toc ~ .mw-content-container,
&.vector-toc-unpinned.vector-main-menu-unpinned .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;
}
}