diff --git a/bundlesize.config.json b/bundlesize.config.json index fce1b071c..ca1888e8b 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "11.8kB" + "maxSize": "11.9kB" }, { "resourceModule": "skins.vector.legacy.js", diff --git a/resources/common/variables.less b/resources/common/variables.less index 4e861d939..c3a3c3788 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -152,10 +152,6 @@ // Calculated with: 1.5em (TOC top padding) + @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading) @margin-top-pinned-toc: @padding-top-content + (@font-size-heading-1 * @line-height-heading) - 1.5em; -// Sidebar -@width-sidebar-px: 220px; -@width-sidebar-px-wide: 244px; - // Search @max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202 @min-width-search-button: 28px; @@ -218,3 +214,6 @@ // Grid @grid-row-gap: 24px; +@grid-column-gap: 36px; +@width-column-start-desktop: 196px; // Total width including gap is 232px +@width-column-start-desktop-wide: 248px; // Total width including gap is 284px diff --git a/resources/skins.vector.styles/components/MainMenu.less b/resources/skins.vector.styles/components/MainMenu.less index e8e22e7ca..af6d2ff57 100644 --- a/resources/skins.vector.styles/components/MainMenu.less +++ b/resources/skins.vector.styles/components/MainMenu.less @@ -45,10 +45,12 @@ // Main menu when pinned in the sidebar .vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu { - padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item; - background-color: @background-color-secondary--modern; - // Align text with page container + // Align the left edge of the text with the page container margin-left: -@padding-horizontal-dropdown-menu-item; + padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item; + // Ensure main menu takes up full width of its container factoring in the negative left margin + width: ~'calc( 100% + @{padding-horizontal-dropdown-menu-item} )'; + background-color: @background-color-secondary--modern; // Match styles of .mw-list-item a in PinnableElement.less .vector-main-menu-action-opt-out a, diff --git a/resources/skins.vector.styles/components/PageTools.less b/resources/skins.vector.styles/components/PageTools.less index 3d9e2f4a1..30f709233 100644 --- a/resources/skins.vector.styles/components/PageTools.less +++ b/resources/skins.vector.styles/components/PageTools.less @@ -8,8 +8,9 @@ .vector-page-tools { #vector-page-tools-pinned-container & { - padding-left: 45px; width: 140px; + // Match spacing of TOC and main menu + padding-left: @padding-horizontal-dropdown-menu-item; } } diff --git a/resources/skins.vector.styles/components/TableOfContentsPinned.less b/resources/skins.vector.styles/components/TableOfContentsPinned.less index fb8e2a5b6..902224790 100644 --- a/resources/skins.vector.styles/components/TableOfContentsPinned.less +++ b/resources/skins.vector.styles/components/TableOfContentsPinned.less @@ -39,9 +39,11 @@ } .vector-feature-page-tools-enabled & { - // Align the left edge of the TOC text with the main menu button icon. + // Align the left edge of the TOC text with the page container margin-left: -@spacing-subsection-toggle; - padding-left: @spacing-subsection-toggle; + padding: 0 @padding-horizontal-dropdown-menu-item 0 @spacing-subsection-toggle; + // Ensure TOC takes up full width of its container factoring in the negative left margin + width: ~'calc( 100% + @{spacing-subsection-toggle} )'; } } diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index 99ed39c54..17f0c0c65 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -7,29 +7,29 @@ // expressed in pixels. See T313817. // FIXME: Remove this selector after Iab94f9f600f8e6d032ad70d6b8e502686977441c has been in prod for 5 days // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days -#vector-toc-pinned-container .sidebar-toc:after, -#vector-toc-pinned-container .sidebar-toc, -#vector-toc-pinned-container .vector-toc:after, -#vector-toc-pinned-container .vector-toc, -.vector-feature-page-tools-disabled .vector-main-menu, -.vector-main-menu-container .vector-main-menu { +.vector-feature-page-tools-disabled #vector-toc-pinned-container .sidebar-toc:after, +.vector-feature-page-tools-disabled #vector-toc-pinned-container .sidebar-toc, +.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc:after, +.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc, +.vector-feature-page-tools-disabled .vector-main-menu { // T305069 Layout adjustments of sidebar elements // Align the left edge of main menu with the main menu button. - width: @width-sidebar-px; + width: 220px; // 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; + width: 244px; } } /* Use of minmax is important to restrict the maximum grid column width more information: T314756 */ -@grid-template-column-desktop: ~'232px minmax(0, 1fr)'; -@grid-template-column-desktop-wide: ~'284px minmax(0, 1fr)'; +@grid-template-column-desktop: ~'@{width-column-start-desktop} minmax(0, 1fr)'; +@grid-template-column-desktop-wide: ~'@{width-column-start-desktop-wide} minmax(0, 1fr)'; @media ( min-width: @min-width-desktop ) { .mw-page-container-inner { display: grid; + column-gap: @grid-column-gap; grid-template: ~'min-content min-content min-content 1fr min-content / @{grid-template-column-desktop}'; grid-template-areas: 'header header' 'siteNotice siteNotice' @@ -39,7 +39,7 @@ } .vector-feature-page-tools-disabled .mw-page-container-inner { - column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing + column-gap: @grid-column-gap + 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing } .vector-sitenotice-container { @@ -74,6 +74,7 @@ .vector-feature-page-tools-enabled .mw-header { display: grid; + column-gap: @grid-column-gap; grid-template: ~'auto / @{grid-template-column-desktop-wide}'; grid-template-areas: 'headerStart headerEnd'; @@ -136,6 +137,7 @@ .vector-feature-page-tools-enabled .mw-body { display: grid; grid-auto-rows: auto; + column-gap: @grid-column-gap; grid-template-columns: ~'minmax(0, @{max-width-content-container}) min-content'; grid-template-areas: 'titlebar .' 'toolbar columnEnd'