Cleanup: Merge layout-search-header.less into default layout rules

Dropped all usages of the no longer applicable `skin-vector-search-header-legacy`
class.

Bug: T258116
Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd

resources/skins.vector.styles/Sidebar.less

@@ -61,8 +61,7 @@
 
 // Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
 // checkbox input for the menu panel.
-.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
+#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
-.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
 	// Turn off presentation so that screen readers get the same effect as visually hiding.
 	// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
 	// instead to avoid hidden rendering.

resources/skins.vector.styles/layout-default.less

@@ -2,8 +2,6 @@
 // Default layout for Modern Vector.
 //
 
-@margin-horizontal-sidebar-button-icon: 12px;
-
 body {
 	// General background/foreground color definition as one exception to the rule.
 	background-color: @background-color-base;
@@ -49,13 +47,19 @@ body {
 /* Searchbox */
 #p-search {
 	float: left;
-	margin: 0.5em 0.5em 0 0.5em;
+	margin: 0 0 0 @margin-horizontal-search;
-	min-width: 5em;
+	min-width: @min-width-search;
 	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
 	width: 13.2em;
 	// Support: Modern browsers, responsive width.
 	width: 20vw;
-	max-width: 20em;
+	max-width: 100%;
+	flex-grow: 1;
+
+	#searchform {
+		margin-left: 0;
+		max-width: @max-width-search;
+	}
 }
 
 /* Main column */
@@ -97,6 +101,15 @@ body {
 	float: right;
 }
 
+#p-personal {
+	flex-grow: 1;
+	flex-basis: @min-width-personal-tools;
+	margin-left: @margin-horizontal-search;
+
+	// Support IE9: This is reset in @support query below if Flexbox is available.
+	float: right;
+}
+
 #mw-sidebar-button {
 	float: left; // Browser: IE9 support - button as flex-child fallback.
 	margin-left: -@margin-horizontal-sidebar-button-icon;
@@ -112,3 +125,12 @@ body {
 	padding-left: @padding-left-sidebar;
 	z-index: @z-index-sidebar;
 }
+
+// At low resolutions the search must be pushed to the right of the screen
+// We use @width-comfortable to determine this threshold as we know it's not possible for
+// personal tools to be on the same line at this resolution.
+@media ( max-width: @width-comfortable ) {
+	#p-search #searchform {
+		margin-left: auto;
+	}
+}

resources/skins.vector.styles/layout-max-width.less

@@ -59,29 +59,6 @@
 		margin-left: 0;
 	}
 
-	&.skin-vector-search-header-legacy #mw-head {
-		width: auto;
-		left: 0;
-		right: 0;
-	}
-
-	&.skin-vector-search-header-legacy #left-navigation {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	&.skin-vector-search-header-legacy #right-navigation {
-		margin-top: 0;
-	}
-
-	&.skin-vector-search-header-legacy #p-personal {
-		right: 0;
-	}
-
-	&.skin-vector-search-header-legacy #p-search {
-		margin-right: 0;
-	}
-
 	#p-namespaces {
 		background-image: none;
 		padding-left: 0;
@@ -154,10 +131,6 @@
 		margin-right: auto;
 	}
 
-	&.skin-vector-search-header-legacy .mw-article-toolbar-container {
-		margin-top: @height-header;
-	}
-
 	&.skin-vector-search-header .mw-article-toolbar-container {
 		// We want to keep the max-width of the article-toolbar-container the
 		// same max-width as the article page's content container in order to
@@ -189,14 +162,6 @@
 			max-width: none;
 		}
 
-		// We want to keep the max-width of the article-toolbar-container the
-		// same max-width as the article page's content container in order to
-		// prevent it from moving when going from an article page to a
-		// history/special page.
-		&.skin-vector-search-header-legacy .mw-article-toolbar-container {
-			max-width: @max-width-content-container;
-		}
-
 		// Adjusts the content when sidebar is open regardless of the viewport width.
 		.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
 			margin-left: @margin-start-content;
@@ -208,8 +173,7 @@
 	// `.mw-page-container` because that will cut off the sidebar. Therefore, we
 	// calculate the maximum distance from the start of `mw-page-container` to the
 	// start of the sidebar.
-	&.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
+	#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
-	&.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
 		.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
 	}
 
@@ -226,8 +190,7 @@
 	@media ( max-width: @max-width-margin-start-content ) {
 		// Adjusts the content and mw-article-toolbar-container.
 		.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
-		&.skin-vector-search-header-legacy .mw-checkbox-hack-checkbox:checked ~ #mw-navigation .mw-content-container,
+		.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
-		&.skin-vector-search-header .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
 			margin-left: @margin-start-content;
 		}
 

resources/skins.vector.styles/layout-search-header.less

@@ -1,63 +0,0 @@
-// This assumes the presence of variables inside layout.less. DO NOT import it separately.
-// Assumes various variables defined there.
-
-@min-width-search: unit( 350px / @font-size-browser, em );
-@max-width-search: unit( 450px / @font-size-browser, em );
-@margin-horizontal-search: unit( 56px / @font-size-browser, em );
-
-// The logo is variable width but typically consists of:
-// - a icon (50x50)
-// - a wordmark (approx 120px)
-@min-width-logo: unit( 180px / @font-size-browser, em );
-
-@min-width-personal-tools: unit( 300px / @font-size-browser, em );
-
-@padding-horizontal-page-container: 30px;
-@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
-@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
-@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
-
-// the width of the container if you exclude consideration for search
-@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
-
-@min-width-supported: @min-width-container-base + @min-width-search;
-@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
-
-@height-personal-tools: 2em;
-
-.skin-vector-search-header {
-
-	// Header components
-	#p-search {
-		flex-grow: 1;
-		// Support IE9: float will be disabled if display flex is supported
-		float: left;
-		// Override values to reflect new behaviour.
-		min-width: @min-width-search;
-		max-width: 100%;
-		margin: 0 0 0 @margin-horizontal-search;
-
-		#searchform {
-			margin-left: 0;
-			max-width: @max-width-search;
-		}
-	}
-
-	#p-personal {
-		flex-grow: 1;
-		flex-basis: @min-width-personal-tools;
-		margin-left: @margin-horizontal-search;
-
-		// Support IE9: This is reset in @support query below if Flexbox is available.
-		float: right;
-	}
-
-	// At low resolutions the search must be pushed to the right of the screen
-	// We use @width-comfortable to determine this threshold as we know it's not possible for
-	// personal tools to be on the same line at this resolution.
-	@media ( max-width: @width-comfortable ) {
-		#p-search #searchform {
-			margin-left: auto;
-		}
-	}
-}

resources/skins.vector.styles/layout.less

@@ -21,6 +21,33 @@
 	2 * @padding-vertical-header;
 @width-grid-column-one: 11em;
 @padding-horizontal-page-container: 30px;
+@margin-horizontal-sidebar-button-icon: 12px;
+// This assumes the presence of variables inside layout.less. DO NOT import it separately.
+// Assumes various variables defined there.
+
+@min-width-search: unit( 350px / @font-size-browser, em );
+@max-width-search: unit( 450px / @font-size-browser, em );
+@margin-horizontal-search: unit( 56px / @font-size-browser, em );
+
+// The logo is variable width but typically consists of:
+// - a icon (50x50)
+// - a wordmark (approx 120px)
+@min-width-logo: unit( 180px / @font-size-browser, em );
+
+@min-width-personal-tools: unit( 300px / @font-size-browser, em );
+
+@padding-horizontal-page-container: 30px;
+@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
+@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
+@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
+
+// the width of the container if you exclude consideration for search
+@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
+
+@min-width-supported: @min-width-container-base + @min-width-search;
+@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
+
+@height-personal-tools: 2em;
 
 // Default layout.
 @import 'layout-default.less';
@@ -29,4 +56,3 @@
 // Feature flag modifications to layout (additive)
 //
 @import 'layout-max-width.less';
-@import 'layout-search-header.less';