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
This commit is contained in:
Nicholas Ray 2021-10-05 17:03:51 -06:00 committed by bwang
parent d94c685f02
commit 390155c67f
3 changed files with 9 additions and 10 deletions

View File

@ -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 );

View File

@ -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;

View File

@ -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;