diff --git a/resources/common/mixins.less b/resources/common/mixins.less index d3f89dab..e4589927 100644 --- a/resources/common/mixins.less +++ b/resources/common/mixins.less @@ -27,3 +27,44 @@ color: @color-link-selected; } } + +// Copied from mediawiki.ui.icons +// (Ifccaadabd72a12814d3d4d01200931f7254c6cd5) +// but converted to px to match `mw-ui-button` +@icon-padding-md: 12px; +// Copied from mediawiki.ui.icons, +// (Ifccaadabd72a12814d3d4d01200931f7254c6cd5) +// but converted to px to match `mw-ui-button` +@icon-padding-md-next: 5px; + +.mixin-vector-flush-right-margin-left() { + margin-left: @icon-padding-md; + + .vector-feature-visual-enhancement-next-enabled & { + margin-left: @icon-padding-md-next; + } +} + +.mixin-vector-flush-left-margin-left() { + margin-left: -@icon-padding-md; + + .vector-feature-visual-enhancement-next-enabled & { + margin-left: -@icon-padding-md-next; + } +} + +.mixin-vector-flush-right-margin-right() { + margin-right: -@icon-padding-md; + + .vector-feature-visual-enhancement-next-enabled & { + margin-right: -@icon-padding-md-next; + } +} + +.mixin-vector-flush-left-left() { + left: -@icon-padding-md; + + .vector-feature-visual-enhancement-next-enabled & { + left: -@icon-padding-md-next; + } +} diff --git a/resources/common/variables.less b/resources/common/variables.less index 9d71444f..03181c7c 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -66,6 +66,7 @@ @size-indicator: unit( 12 / @font-size-browser, em ); // Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button` @icon-padding-md: 12px; +@icon-padding-md-next: 5px; @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 ); diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 04b77830..573c5e9f 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -1,4 +1,5 @@ @import '../../common/variables.less'; +@import '../../common/mixins.less'; @import 'mediawiki.mixins.less'; // Header sizes defined in the description of T246170 and comment T246170#5957100 @@ -53,7 +54,9 @@ @media ( max-width: @max-width-tablet ) { // T315261 Align header icon buttons with main content - margin: 0 -@icon-padding-md 0 -@icon-padding-md; + margin: 0; + .mixin-vector-flush-left-margin-left(); + .mixin-vector-flush-right-margin-right(); /** * Toggles the visibility of the search box at lower resolutions. diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less index 2fa15a59..8bd4b34a 100644 --- a/resources/skins.vector.styles/components/LanguageButton.less +++ b/resources/skins.vector.styles/components/LanguageButton.less @@ -1,5 +1,6 @@ // The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook @import '../../common/variables.less'; +@import '../../common/mixins.less'; @import 'mediawiki.mixins.less'; // Note vector-feature-language-in-header-enabled class is not used here as that class @@ -9,7 +10,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; + .mixin-vector-flush-right-margin-right(); box-sizing: border-box; height: @height-button-lang; flex-shrink: 0; diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index abab231e..970c2bd7 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -1,4 +1,5 @@ @import '../../common/variables.less'; +@import '../../common/mixins.less'; @import 'mediawiki.mixins.less'; @import '../layouts/screen.less'; @import './checkboxHack.less'; @@ -17,7 +18,7 @@ // 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: @icon-padding-md; + .mixin-vector-flush-right-margin-left(); } } @@ -25,7 +26,7 @@ .sidebar-toc:after { // 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; + .mixin-vector-flush-left-margin-left(); @media ( min-width: @min-width-desktop-wide ) { // Align the TOC subsection toggle button icon with the main menu button icon. diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 63b5fae4..d8e52183 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -1,4 +1,5 @@ @import '../../common/variables.less'; +@import '../../common/mixins.less'; @import 'mediawiki.mixins.less'; @font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`. @@ -69,7 +70,7 @@ &-toc-container { display: none; position: relative; - margin-left: -@icon-padding-md; + .mixin-vector-flush-left-margin-left(); // Only show TOC in sticky header when collapsed class is present .vector-toc-collapsed & { diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index b3f481ab..6b0b9c8f 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -7,6 +7,7 @@ // a 15px spacing without clipping the chevron icon // https://phabricator.wikimedia.org/T312156#8095894 @sidebar-toc-left-padding: 15px + @icon-padding-md; +@sidebar-toc-left-padding-next: 15px + @icon-padding-md-next; @toc-subsection-toggle-icon-size: 1.834em; .mw-table-of-contents-container { @@ -42,6 +43,10 @@ overflow-x: hidden; background-color: @background-color-page-container; + .vector-feature-visual-enhancement-next-enabled & { + padding-left: @sidebar-toc-left-padding-next; + } + .sidebar-toc-header { padding-bottom: 12px; } diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index ab2d20c4..d867a0fe 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -1,4 +1,5 @@ @import '../../common/variables.less'; +@import '../../common/mixins.less'; @height-collapsed-toc-button: 36px; @padding-top-content-px: unit( @padding-top-content * @font-size-browser, px ); @@ -10,9 +11,9 @@ display: none; float: left; margin-right: 4px; - margin-left: -@icon-padding-md; + .mixin-vector-flush-left-margin-left(); // Reduce vertical padding to fit with page title - padding: 7px @icon-padding-md; + padding: 7px @icon-padding-md-next; // 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; @@ -21,6 +22,12 @@ &:active { background-color: @colorGray15; } + + .vector-feature-visual-enhancement-next-disabled & { + // Reduce vertical padding to fit with page title + padding-left: @icon-padding-md; + padding-right: @icon-padding-md; + } } #vector-toc-collapsed-button, @@ -119,7 +126,7 @@ .mixin-toc-collapsed-header(); .sidebar-toc { - left: -@icon-padding-md; + .mixin-vector-flush-left-left(); } // @@ -170,8 +177,15 @@ // and manually account for horizontal padding in the max width box-sizing: content-box; width: max-content; + @sidebar-toc-left-padding-next-em: unit( @sidebar-toc-left-padding-next / @font-size-browser, em ); @sidebar-toc-left-padding-em: unit( @sidebar-toc-left-padding / @font-size-browser, em ); @sidebar-toc-right-padding-em: unit( @sidebar-toc-right-padding / @font-size-browser, em ); + @max-width-sticky-header-collapsed-toc: @max-width-collapsed-toc - @sidebar-toc-left-padding-em - @sidebar-toc-right-padding-em; + @max-width-sticky-header-collapsed-toc-next: @max-width-collapsed-toc - @sidebar-toc-left-padding-next-em - @sidebar-toc-right-padding-em; max-width: ~'min( @{max-width-sticky-header-collapsed-toc}, 75vw )'; // min( 48.5625em, 75vw ) + + .vector-feature-visual-enhancement-next-enabled & { + max-width: ~'min( @{max-width-sticky-header-collapsed-toc-next}, 75vw )'; + } }