diff --git a/resources/common/variables.less b/resources/common/variables.less index e61bbf36..261dae9f 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -64,8 +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 ); +// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button` +@icon-padding-md: 12px; @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 ); @@ -138,9 +138,6 @@ // Sidebar @width-sidebar-px: 220px; @width-sidebar-px-wide: 244px; -// T305069 Layout adjustments of sidebar elements: -// 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 // TOC @sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc'; diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less index cd03a03f..5ca15572 100644 --- a/resources/skins.vector.styles/components/LanguageButton.less +++ b/resources/skins.vector.styles/components/LanguageButton.less @@ -9,6 +9,7 @@ .mw-body-header .mw-portlet-lang { // FIXME [review whether margin-top is needed] center vertically in heading. margin-top: 2px; + margin-right: -@icon-padding-md; box-sizing: border-box; height: @height-button-lang; diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index b0827ac7..387033c8 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -3,26 +3,32 @@ @import '../layouts/screen.less'; @import './checkboxHack.less'; +// 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. +.sidebar-toc:after, .mw-sidebar, -.sidebar-toc, -.sidebar-toc:after { - // 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. +.sidebar-toc { + // T305069 Layout adjustments of sidebar elements + // Align the left edge of main menu with the main menu button. width: @width-sidebar-px; margin-left: 0; + // Align the left edge of main menu with the main menu button icon. @media ( min-width: @min-width-desktop-wide ) { width: @width-sidebar-px-wide; - margin-left: @margin-start-sidebar-content; + margin-left: @icon-padding-md; } } .sidebar-toc, .sidebar-toc:after { - margin-left: -@margin-start-sidebar-content; + // T312156 Update TOC spacing after removing background color + // Align the left edge of the TOC text with the main menu button icon. + margin-left: -@icon-padding-md; @media ( min-width: @min-width-desktop-wide ) { + // Align the TOC subsection toggle button icon with the main menu button icon. margin-left: 0; } } diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index f1f18951..ede20bcf 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -6,7 +6,7 @@ // 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} )'; +@sidebar-toc-left-padding: 15px + @icon-padding-md; @toc-subsection-toggle-icon-size: 1.834em; .mw-table-of-contents-container {