From 390155c67fb6bfbcb8e1987a5a90e9ed4b5fb6a9 Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Tue, 5 Oct 2021 17:03:51 -0600 Subject: [PATCH] Move #mw-sidebar-button layout styles to Header.less Given that these styles deal with the layout of the sidebar button in the main header and don't make sense in any other context (at least currently), I think they belong in Header.less. Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944 --- resources/common/variables.less | 3 +++ resources/skins.vector.styles/components/Header.less | 7 ++++++- resources/skins.vector.styles/layouts/screen.less | 9 --------- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index 4aeb3c78a..7ff2fff9a 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -109,6 +109,9 @@ @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`. @padding-horizontal-tabs: 8px; +// Menu button +@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 + // Search @min-width-search-button: 28px; @width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em ); diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 4a38f0b9b..db446461b 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -17,7 +17,7 @@ .mw-header { // A min-height is set to account for projects where no icon is set. min-height: @height-logo-icon; - margin: @margin-top-header 0 @margin-bottom-header; + margin: @margin-top-header 0 @margin-bottom-header 0; padding: @padding-vertical-header 0; // Vertical centering of header elements (IE>=11), requires flex. // Non-flex fallback for IE<=9: float rule on the child elements. @@ -26,6 +26,11 @@ // https://caniuse.com/#search=align-items align-items: center; + #mw-sidebar-button { + float: left; // Browser: IE9 support - button as flex-child fallback. + margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same. + } + .vector-search-box { float: left; z-index: @z-index-menu; diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 04a232dc4..3644e5b61 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -11,9 +11,6 @@ // Sidebar @width-grid-column-one: 11em; -// Menu button -@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16 - // Adjust the left position of the sidebar to align it with the sidebar menu button, // in the header, while ensuring the background gradient still extends to the edge of the screen. // note: the 1px comes from the transparent border of the sidebar button. @@ -154,12 +151,6 @@ body { } } -#mw-sidebar-button { - float: left; // Browser: IE9 support - button as flex-child fallback. - margin-left: -@margin-horizontal-sidebar-button-icon; - margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same. -} - #mw-panel { background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% ); position: absolute;