Menu: Added support for wb-navcurr highlighting in the mobile panel (f…

…ixes #4916)
wet-boew · Mar 20, 2014 · 65f2b8e · 65f2b8e
1 parent c37c2c2
commit 65f2b8e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 30 deletions.
diff --git a/src/plugins/menu/menu.scss b/src/plugins/menu/menu.scss
@@ -107,16 +107,70 @@
 %menu-mb-pnl-margin-bottom-5px {
 	margin-bottom: 5px;
 }
+%menu-mb-pnl-wb-navcurr {
+	outline: 1px solid;
+}
+%menu-mb-pnl-wb-navcurr-focus {
+	outline-style: dotted;
+}
+%menu-mb-pnl-padding-10-20-8 {
+	padding: 10px 20px 8px;
+}
 #mb-pnl {
 	ul {
-		margin-bottom: 0;
 		li {
-			padding: 6px 0;
 			&.no-sect {
 				padding-left: 1.27em;
 			}
 		}
 	}
+	.srch-pnl {
+		@extend %menu-mb-pnl-padding-10-20-8;
+	}
+	.lng-ofr {
+		padding: 7px 15px 0;
+		text-align: right;
+		ul {
+			margin-bottom: 0;
+		}
+		li {
+			padding-left: 10px;
+			padding-right: 0;
+			line-height: normal;
+			a {
+				padding: 5px;
+			}
+		}
+	}
+	nav {
+		@extend %menu-mb-pnl-padding-10-20-8;
+		.mb-menu {
+			> {
+				li {
+					padding: 10px 0 2px;
+				}
+			}
+		}
+		a {
+			margin: 6px 0 6px -6px;
+			padding: 0 6px;
+			display: inline-block;
+			&.wb-navcurr {
+				@extend %menu-mb-pnl-wb-navcurr;
+				&:focus {
+					@extend %menu-mb-pnl-wb-navcurr-focus;
+				}
+			}
+		}
+		summary {
+			&.wb-navcurr {
+				@extend %menu-mb-pnl-wb-navcurr;
+				&:focus {
+					@extend %menu-mb-pnl-wb-navcurr-focus;
+				}
+			}
+		}
+	}
 	details {
 		ul {
 			padding-left: 2em;
@@ -140,12 +194,27 @@
 
 [dir=rtl] {
 	#mb-pnl {
+		.lng-ofr {
+			text-align: left;
+			li {
+				padding-left: 0;
+				padding-right: 10px;
+			}
+		}
 		details {
 			ul {
 				padding-left: 0;
 				padding-right: 2em;
 			}
 		}
+		ul {
+			li {
+				&.no-sect {
+					padding-left: 0;
+					padding-right: 1.27em
+				}
+			}
+		}
 	}
 }
 

diff --git a/theme/sass/parts/_siteMenu.scss b/theme/sass/parts/_siteMenu.scss
@@ -77,9 +77,6 @@
 %wet-theme-site-menu-mb-pnl-bg-0e4164 {
 	background: #0e4164;
 }
-%wet-theme-site-menu-mb-pnl-padding-10-20 {
-	padding: 10px 20px;
-}
 #mb-pnl {
 	&.modal-content {
 		background: #193451;
@@ -103,12 +100,6 @@
 	}
 	.lng-ofr {
 		@extend %wet-theme-site-menu-mb-pnl-bg-0e4164;
-		padding: 5px 20px;
-		text-align: right;
-		li {
-			padding-left: 10px;
-			line-height: normal;				
-		}
 	}
 	summary {
 		&:hover, &:focus {
@@ -122,39 +113,28 @@
 	}
 	.srch-pnl {
 		@extend %wet-theme-site-menu-mb-pnl-bg-0e4164;
-		@extend %wet-theme-site-menu-mb-pnl-padding-10-20;
 		.form-group {
 			float: left;
 			margin-right: 5px;
 			width: 75%;
 		}
 	}
 	.sec-pnl {
-		@extend %wet-theme-site-menu-mb-pnl-padding-10-20;
 		background: #cdd4da;
 		a, summary {
 			color: #2e5576;
 		}
 	}
 	.sm-pnl{
 		@extend %wet-theme-site-menu-mb-pnl-bg-0e4164;
-		@extend %wet-theme-site-menu-mb-pnl-padding-10-20;
 	}
 	.info-pnl {
 		border-top: 2px solid #061E38;
-		@extend %wet-theme-site-menu-mb-pnl-padding-10-20;
 	}
 }
 
 [dir=rtl] {
 	#mb-pnl {
-		.lng-ofr {
-			text-align: left;
-			li {
-				padding-left: 0;
-				padding-right: 10px;
-			}
-		}
 		.srch-pnl {
 			.form-group {
 				float: right;
@@ -163,13 +143,5 @@
 				width: 75%;
 			}
 		}
-		ul {
-			li {
-				&.no-sect {
-					padding-left: 0;
-					padding-right: 1.27em
-				}
-			}
-		}
 	}
 }