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

styles: Replace @top-margin… with @margin-top… variable names

Browse source 
Bug: T313243
Change-Id: Ibdcc50d2a67074bc7b3f28c58baf73ad39db922d
This commit is contained in:
Volker E 2022-07-19 12:14:20 -07:00
parent 4ab2b1bff1
commit 0c7cc69e30
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,9 +7,9 @@
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu. // Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 @margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title. // Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
@top-margin-sidebar-toc_title_inline: 3.5em; @margin-top-sidebar-toc_title_inline: 3.5em;
// Default spacing separating the sidebar TOC from the main menu or viewport // Default spacing separating the sidebar TOC from the main menu or viewport.
@top-margin-sidebar-toc: 1.5em; @margin-top-sidebar-toc: 1.5em;
.mw-sidebar { .mw-sidebar {
box-sizing: border-box; box-sizing: border-box;
@ -62,7 +62,7 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
.sidebar-toc { .sidebar-toc {
// Use margin-top to align TOC rather than grid row gap // Use margin-top to align TOC rather than grid row gap
// Applies when the TOC sticky and when the main menu is both open and closed. // Applies when the TOC sticky and when the main menu is both open and closed.
margin-top: @top-margin-sidebar-toc; margin-top: @margin-top-sidebar-toc;
} }
} }
} }
@ -71,17 +71,17 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
.sidebar-toc { .sidebar-toc {
.vector-toc-enabled .vector-layout-legacy & { .vector-toc-enabled .vector-layout-legacy & {
// Main menu is closed // Main menu is closed
margin-top: @top-margin-sidebar-toc_title_inline; margin-top: @margin-top-sidebar-toc_title_inline;
} }
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} & { .vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// Main menu is open // Main menu is open
margin-top: @top-margin-sidebar-toc; margin-top: @margin-top-sidebar-toc;
} }
.vector-toc-enabled.vector-sticky-header-visible .vector-layout-legacy & { .vector-toc-enabled.vector-sticky-header-visible .vector-layout-legacy & {
// Sticky header is visible // Sticky header is visible
margin-top: @top-margin-sidebar-toc; margin-top: @margin-top-sidebar-toc;
} }
} }

4
resources/skins.vector.styles/layouts/screen.less
View file

@ -207,11 +207,11 @@ body {
clear: both; clear: both;
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky // To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
// we account for the TOC's top margin // we account for the TOC's top margin
top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em top: ~'calc( 1.5em - @{margin-top-sidebar-toc_title_inline} )'; // top: -2em
} }
.vector-layout-legacy @{selector-workspace-container-sidebar-open} & { .vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// When main menu is open the TOC's top margin is reduced // When main menu is open the TOC's top margin is reduced
top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0 top: ~'calc( 1.5em - @{margin-top-sidebar-toc} )'; // top: 0
} }
} }