CSS-based pokeys

No more need to add in an html pokey element every potential dropdown menu.
Aaaaaagh that made it bigger, didn't it.

Change-Id: I5d3817aa026849a5304710a32a3585f3e698321d

includes/TimelessTemplate.php

@@ -309,8 +309,7 @@ class TimelessTemplate extends BaseTemplate {
 			Html::rawElement( 'h2', [],
 				Html::element( 'span', [],
 					$this->getMsg( $headerMessage )->text()
-				) .
-				Html::element( 'div', [ 'class' => 'pokey' ] )
+				)
 			) .
 			Html::rawElement( 'div', [ 'class' => 'sidebar-inner' ], $content )
 		);
@@ -548,8 +547,7 @@ class TimelessTemplate extends BaseTemplate {
 
 		$html .= Html::rawElement( 'div', [ 'id' => 'personal' ],
 			Html::rawElement( 'h2', [],
-				Html::element( 'span', [], $dropdownHeader ) .
-				Html::element( 'div', [ 'class' => 'pokey' ] )
+				Html::element( 'span', [], $dropdownHeader )
 			) .
 			Html::rawElement( 'div', [ 'id' => 'personal-inner', 'class' => 'dropdown' ],
 				$this->getPortlet( 'personal', $personalTools, $headerMsg )
@@ -870,8 +868,7 @@ class TimelessTemplate extends BaseTemplate {
 		if ( $this->data['language_urls'] || $this->pileOfTools['variants'] ) {
 			$html .= Html::rawElement( 'div', [ 'id' => 'ca-languages' ],
 				Html::rawElement( 'h2', [],
-					Html::element( 'span', [], $this->getMsg( 'timeless-languages' )->text() ) .
-					Html::element( 'div', [ 'class' => 'pokey' ] )
+					Html::element( 'span', [], $this->getMsg( 'timeless-languages' )->text() )
 				) .
 				Html::rawElement( 'div', [ 'id' => 'languages-inner', 'class' => 'dropdown' ],
 					$variants .

resources/mixins.less

@@ -126,6 +126,59 @@
 	z-index: 3;
 }
 
+.dropdown-pokey() {
+	&:before,
+	&:after {
+		transform: rotate( 360deg ); // to force some smoothing in annoying browsers
+		border-bottom: 10px solid @base80;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		content: '';
+		height: 0;
+		width: 0;
+		position: absolute;
+		right: 1em;
+		z-index: 4;
+	}
+
+	&:before {
+		top: -10px;
+	}
+
+	&:after {
+		border-bottom-color: @base100;
+		top: -8px;
+	}
+}
+
+// stupid pokey alignment for menus on the left... (desktop-small dropdowns)
+.dropdown-pokey-left() {
+	&:hover h2 span {
+		&:before,
+		&:after {
+			display: block;
+		}
+	}
+
+	h2 span {
+		.dropdown-pokey();
+
+		&:before,
+		&:after {
+			right: 0;
+			display: none;
+		}
+
+		&:before {
+			top: 34px;
+		}
+
+		&:after {
+			top: 36px;
+		}
+	}
+}
+
 // Categories on bottom of page
 
 .categories-bottom() {

resources/screen-common.less

@@ -152,33 +152,6 @@ body {
 	}
 }
 
-/* Dropdown stuff */
-
-.pokey,
-.pokey:after {
-	border-bottom: 10px solid @base80;
-	border-left: 10px solid transparent;
-	border-right: 10px solid transparent;
-	content: '';
-	height: 0;
-	position: absolute;
-	transform: rotate( 360deg ); // to force some smoothing in annoying browsers
-	width: 0;
-	z-index: 4;
-}
-
-.pokey {
-	top: 1.85em;
-	right: 1px;
-	display: none;
-}
-
-.pokey:after {
-	border-bottom-color: #fff;
-	right: -10px;
-	top: 2px;
-}
-
 .dropdown-toggle {
 	.dropdown-header();
 }

resources/screen-desktop-small.less

@@ -87,6 +87,10 @@
 	.sidebar-inner {
 		.dropdown-menu( left );
 	}
+
+	.sidebar-chunk {
+		.dropdown-pokey-left();
+	}
 }
 
 #mw-related-navigation {
@@ -100,6 +104,7 @@
 
 	.sidebar-inner {
 		.dropdown-menu();
+		.dropdown-pokey();
 		top: 2.95em !important; // to override mobile positioning
 	}
 }

resources/screen-desktop.less

@@ -71,6 +71,7 @@
 		top: 3.15em;
 		display: none !important;
 		.dropdown-menu();
+		.dropdown-pokey();
 	}
 
 	.pokey {
@@ -118,7 +119,7 @@
 	.dropdown {
 		display: none !important;
 		.dropdown-menu();
-		right: 0;
+		.dropdown-pokey();
 		// Override the mobile thing
 		top: 2.25em !important;
 	}