Merge "Implement new zebra design for the header under the flag"

includes/templates/Header.mustache

@@ -1,4 +1,4 @@
-<header class="mw-header">
+<header class="vector-header mw-header">
 	<div class="vector-header-start">
 		<nav class="vector-main-menu-landmark" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
 			{{>MainMenuDropdown}}

resources/common/variables.less

@@ -164,12 +164,13 @@
 // Language button
 @height-button-lang: unit( 32 / @font-size-browser, em );
 
-// T296321 For sticky header, set an explicit height. This is needed for scroll padding
+// Header
+// T245190 T296321 For sticky header, set an explicit height. This is needed for scroll padding
 // and for other sticky elements on the page. Setting the height in relative units enables
 // the header's height to adapt to the browser's font size setting. Because
 // this variable is used to determine top offsets for sticky elements where the
 // font-size might not be 16px, using rem avoids the cascading effects of em units.
-@height-sticky-header: unit( 50px / @font-size-browser, rem );
+@height-header: unit( 50px / @font-size-browser, rem );
 
 // Z-indices
 // See skinStyles/jquery.ui/jquery.ui.datepicker.css.

resources/skins.vector.styles/components/Header.less

@@ -2,23 +2,14 @@
 @import '../../common/mixins.less';
 @import 'mediawiki.mixins.less';
 
-// Header sizes defined in the description of T246170 and comment T246170#5957100
-@padding-vertical-header: 0.125em;
-@margin-top-header: 0.5em;
-@margin-bottom-header: 2em;
-
-// Logo sizes per specification in T245190.
-@height-logo-icon: 3.125em;
-
 .mw-header {
-	// A min-height is set to account for projects where no icon is set.
-	min-height: @height-logo-icon;
-	padding: 8px 0;
 	// Vertical centering of header elements (IE>=11), requires Flexbox.
 	.flex-display();
 	flex-wrap: nowrap;
 	// https://caniuse.com/#search=align-items
 	align-items: center;
+	padding-top: 8px;
+	padding-bottom: 8px;
 
 	.vector-header-start,
 	.vector-header-end {

resources/skins.vector.styles/components/StickyHeader.less

@@ -20,8 +20,6 @@
 }
 
 .vector-sticky-header {
-	width: 100%;
-	height: @height-sticky-header;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -141,11 +139,11 @@
 		// .vector-sticky-header-visible class to correctly handle situations where the
 		// sticky header isn't visible yet but we still need scroll padding applied
 		// (e.g. when the user navigates to a page with a hash fragment in the URI).
-		scroll-padding-top: ~'calc( @{height-sticky-header} + @{scroll-padding-top} )';
+		scroll-padding-top: ~'calc( @{height-header} + @{scroll-padding-top} )';
 
 		.vector-sticky-header-container {
 			// Sticky header is only enabled for js users and when feature flag is enabled
-			display: block;
+			display: flex;
 		}
 
 		.vector-sticky-header-visible .vector-sticky-header-container {
@@ -166,12 +164,12 @@
 		.mw-sticky-header-element,
 		.charts-stickyhead th {
 			/* stylelint-disable-next-line declaration-no-important */
-			top: @height-sticky-header !important;
+			top: @height-header !important;
 		}
 
 		#vector-toc-pinned-container .vector-toc,
 		#vector-page-tools-pinned-container .vector-page-tools {
-			max-height: ~'calc( 100vh - @{height-sticky-header} - @{max-height-bottom-spacing-scroll-indicator} )';
+			max-height: ~'calc( 100vh - @{height-header} - @{max-height-bottom-spacing-scroll-indicator} )';
 		}
 	}
 }

resources/skins.vector.styles/layouts/preZebra.less

@@ -0,0 +1,7 @@
+.vector-header-container {
+	.mixin-page-container();
+
+	.vector-feature-limited-width-disabled& {
+		max-width: none;
+	}
+}

resources/skins.vector.styles/layouts/screen.less

@@ -131,10 +131,6 @@ body {
 		padding-left: @padding-horizontal-page-container-desktop-wide;
 		padding-right: @padding-horizontal-page-container-desktop-wide;
 	}
-
-	.vector-feature-limited-width-disabled & {
-		max-width: none;
-	}
 }
 
 // Container logic.
@@ -148,16 +144,33 @@ body {
 	// mitigate a long sidebar overflowing the page container (T257518).
 	min-height: 100%;
 	.mixin-page-container();
-}
 
-.vector-header-container {
-	.mixin-page-container();
+	.vector-feature-limited-width-disabled & {
+		max-width: none;
+	}
 }
 
 .skin--responsive .mw-page-container {
 	min-width: auto;
 }
 
+.vector-header-container {
+	.mw-header,
+	.vector-sticky-header {
+		width: 100%;
+		// A min-height is set to account for projects where no icon is set.
+		min-height: @height-header;
+	}
+}
+
+.vector-feature-zebra-design-disabled {
+	@import 'preZebra.less';
+}
+
+.vector-feature-zebra-design-enabled {
+	@import 'zebra.less';
+}
+
 @import 'grid.less';
 @import 'toc/pinned.less';
 @import 'toc/unpinned.less';

resources/skins.vector.styles/layouts/zebra.less

@@ -0,0 +1,31 @@
+.vector-header-container {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	background-color: @background-color-page-container;
+
+	.mw-header,
+	.vector-sticky-header {
+		max-width: @max-width-page-container;
+		padding-left: @padding-horizontal-page-container;
+		padding-right: @padding-horizontal-page-container;
+		box-sizing: border-box;
+
+		@media ( min-width: @min-width-desktop ) {
+			padding-left: @padding-horizontal-page-container-desktop;
+			padding-right: @padding-horizontal-page-container-desktop;
+		}
+
+		@media ( min-width: @min-width-desktop-wide ) {
+			padding-left: @padding-horizontal-page-container-desktop-wide;
+			padding-right: @padding-horizontal-page-container-desktop-wide;
+		}
+	}
+}
+
+&.vector-feature-limited-width-disabled .vector-header-container {
+	.mw-header,
+	.vector-sticky-header {
+		max-width: none;
+	}
+}

skinStyles/mediawiki.notification.less

@@ -26,5 +26,5 @@
  * should be moved so that it doesn't obstruct the sticky header
  */
 .vector-sticky-header-visible .mw-notification-area-overlay > .mw-notification-area-floating {
-	transform: translateY( @height-sticky-header );
+	transform: translateY( @height-header );
 }