Merge "Revert "Refactor Vector tabs layout for reduced size & complexity""

resources/common/components/MenuDropdown.less

@@ -7,6 +7,7 @@
 	float: left;
 	cursor: pointer;
 	position: relative;
+	line-height: 1.125em;
 
 	.vector-menu-heading {
 		color: @color-base--subtle;
@@ -43,7 +44,6 @@
 	.vector-menu-content {
 		background-color: @background-color-base;
 		list-style: none none;
-		line-height: 1.125em;
 		// Match the width of the dropdown "heading" (the tab)
 		min-width: 100%;
 		position: absolute;
@@ -84,6 +84,10 @@
 			display: block;
 			white-space: nowrap;
 			cursor: pointer;
+
+			span:not( .mw-ui-icon ) {
+				font-size: @font-size-tabs;
+			}
 		}
 	}
 
@@ -121,6 +125,7 @@
 		padding-top: 1.25em;
 		padding-left: 8px;
 		padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
+		font-size: @font-size-tabs;
 		font-weight: normal;
 	}
 

resources/skins.vector.styles.legacy/components/MenuDropdown.less

@@ -17,13 +17,7 @@
 }
 
 .vector-menu-dropdown {
-	line-height: 1.125em;
-
 	li {
-		span:not( .mw-ui-icon ) {
-			font-size: @font-size-tabs;
-		}
-
 		a {
 			// Historic value.
 			padding: unit( ( 8.125px / @font-size-browser ), em );
@@ -44,10 +38,6 @@
 	}
 }
 
-.vector-menu-dropdown-noicon .vector-menu-heading {
-	font-size: @font-size-tabs;
-}
-
 #mw-head .vector-menu-dropdown .vector-menu-heading {
 	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
 	background-position: right bottom;

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

@@ -2,18 +2,43 @@
 
 @border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
 
-.mw-article-toolbar-container {
+.vector-article-toolbar .mw-article-toolbar-container {
+	display: flex;
 	border-bottom: @border-tabs;
 
-	/* Targets #left-navigation and #right-navigation */
+	a {
-	& > div {
+		// The hover effect is on `li` elements.
-		font-size: @font-size-tabs;
+		&:hover,
+		&:focus {
+			text-decoration: none;
+		}
 	}
 
 	@media ( min-width: @min-width-desktop-wide ) {
 		padding-right: @padding-horizontal-tabs - 1px;
 	}
 
+	#right-navigation {
+		display: flex;
+		flex-grow: 1;
+		justify-content: end;
+		// Layout correction - as it was before introduce of flex box.
+		margin-right: -1px;
+
+		@media ( min-width: @min-width-desktop-wide ) {
+			margin-right: -@border-base-ems * 3;
+		}
+	}
+
+	#left-navigation {
+		display: flex;
+
+		// Layout correction - as it was before introduce of flex box.
+		@media ( min-width: @min-width-desktop-wide ) {
+			margin-left: @border-base-ems * 3;
+		}
+	}
+
 	.mw-portlet-views {
 		display: none;
 

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

@@ -5,61 +5,85 @@
  * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
  */
 
-/* Tab list items */
+/* Namespaces and Views */
 .vector-menu-tabs {
+	// Tab separator: Outer start border (left in LTR) of tab row.
 	float: left;
+	height: 2.5em;
 	padding-left: @border-width-base;
 
-	li {
+	/* Navigation Labels */
-		display: inline-block;
+	.vector-menu-heading {
-		vertical-align: middle;
+		display: none;
-		white-space: nowrap;
+	}
+
+	ul {
+		float: left;
+		height: 100%;
+		list-style: none none;
 		margin: 0;
+		padding: 0;
+	}
 
-		// Make first and last elements flush with edge of header.
+	li {
-		&:first-child {
+		// Tab fade background: Fade inside from light grey to white.
-			margin-left: -8px;
+		float: left;
+		display: block;
+		height: 100%;
+		padding: 0;
+		line-height: @line-height-nav;
+		white-space: nowrap;
+
+		&:first-child a {
+			margin-left: 0;
 		}
 
-		&:last-child {
+		&:last-child a {
-			margin-right: -8px;
+			margin-right: 0;
+		}
+
+		a {
+			// Tab separator: Border between tabs and outer right border.
+			color: @color-link;
+			box-sizing: border-box;
+			display: block;
+			float: left;
+			height: unit( 40 / @font-size-tabs / @font-size-browser, em );
+			position: relative;
+			padding-top: 1.25em;
+			margin: 0 @padding-horizontal-tabs;
+			font-size: @font-size-tabs;
+			cursor: pointer;
+
+			&:hover {
+				text-decoration: none;
+				border-bottom: 1px solid;
+			}
 		}
 	}
 
-	/* focus and hover have outlines. Text underline interferes with bottom border */
+	.new {
-	li a:focus,
+		a,
-	li a:hover {
+		a:visited {
-		text-decoration: none;
+			color: @color-link-new;
-		border-bottom: 1px solid;
+		}
 	}
 
-	.new a,
+	.selected {
-	.new a:visited {
+		a {
-		color: @color-link-new;
+			border-bottom: 1px solid;
+		}
+
+		a,
+		a:visited {
+			color: @color-link-selected;
+		}
 	}
 
-	.selected a,
+	.icon {
-	.selected a:visited {
+		a {
-		color: @color-link-selected;
+			background-position: right bottom;
-		border-bottom: 1px solid;
+			background-repeat: no-repeat;
+		}
 	}
 }
-
-/**
- * Tab link appearance, applies to
- * - <a> inside vector-menu-tabs  (e.g. read, edit, view, history)
- * - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
-*/
-.vector-menu-tabs li a,
-.vector-article-toolbar .vector-menu-heading {
-	display: block;
-	position: relative;
-	// Top bottom padding to increase clickable area.
-	padding-top: 18px;
-	padding-bottom: 7px;
-	// left & right margin separate bottom border between words,
-	// bottom margin makes link border overlap toolbar border.
-	margin: 0 8px -1px 8px;
-	cursor: pointer;
-	border-bottom: 1px solid transparent;
-}