Merge pull request #2381 from Automattic/fix-menu-hover-state

Seedlet: Fix menu hover state

seedlet/assets/css/ie.css

@@ -4175,6 +4175,9 @@ nav a {
 
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
 }
 
 @media only screen and (max-width: 481px) {
@@ -4188,18 +4191,21 @@ nav a {
 }
 
 .menu-button-container .button {
+	font-size: 16px;
 	background-color: transparent;
 	color: #000000;
 	z-index: 500;
 }
 
 .primary-navigation .button {
+	font-size: 16px;
 	background-color: transparent;
 	color: #000000;
 	z-index: 500;
 }
 
 .woo-navigation .button {
+	font-size: 16px;
 	background-color: transparent;
 	color: #000000;
 	z-index: 500;
@@ -4218,16 +4224,22 @@ nav a {
 	display: none;
 }
 
-.menu-button-container .button:hover {
-	color: #3C8067;
+.menu-button-container .button#woo-open-menu {
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-left: 5px;
 }
 
-.primary-navigation .button:hover {
-	color: #3C8067;
+.primary-navigation .button#woo-open-menu {
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-left: 5px;
 }
 
-.woo-navigation .button:hover {
-	color: #3C8067;
+.woo-navigation .button#woo-open-menu {
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-left: 5px;
 }
 
 .menu-button-container .button#woo-open-menu .svg-icon {
@@ -4292,10 +4304,27 @@ nav a {
 	display: none;
 }
 
-.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
-.primary-navigation #primary-close-menu, .primary-navigation-open
+.primary-navigation-open .menu-button-container #primary-close-menu {
+	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
+}
+
+.primary-navigation-open
+.primary-navigation #primary-close-menu {
+	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
+}
+
+.primary-navigation-open
 .woo-navigation #primary-close-menu {
 	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
 }
 
 .woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
@@ -4304,10 +4333,27 @@ nav a {
 	display: none;
 }
 
-.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
-.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation-open .menu-button-container #woo-close-menu {
+	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
+}
+
+.woo-navigation-open
+.primary-navigation #woo-close-menu {
+	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
+}
+
+.woo-navigation-open
 .woo-navigation #woo-close-menu {
 	display: flex;
+	padding: 18px 20px;
+	margin-top: 5px;
+	margin-right: 5px;
 }
 
 .primary-navigation {

seedlet/assets/sass/components/header/_primary-navigation.scss

@@ -10,6 +10,9 @@
 	width: 100%;
 	#primary-open-menu {
 		margin-left: auto;
+		padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+		margin-top: calc(0.25 * var(--global--spacing-unit));
+		margin-right: calc(0.25 * var(--global--spacing-unit));
 	}
 
 	@include media(mobile-only){
@@ -25,9 +28,11 @@
 .primary-navigation,
 .woo-navigation {
 	.button {
+		font-size: var(--primary-nav--font-size);
 		background-color: transparent;
 		color: var(--primary-nav--color-link);
 		z-index: 500;
+
 		&.open {
 			display: flex;
 			z-index: 499;
@@ -36,11 +41,11 @@
 			display: none;
 		}
 
-		&:hover {
-			color: var(--primary-nav--color-link-hover);
-		}
-
 		&#woo-open-menu {
+			padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+			margin-top: calc(0.25 * var(--global--spacing-unit));
+			margin-left: calc(0.25 * var(--global--spacing-unit));
+
 			.svg-icon {
 				margin-left: 0;
 				margin-right: calc(0.25 * var(--global--spacing-unit));
@@ -81,6 +86,9 @@
 		}
 		#primary-close-menu {
 			display: flex;
+			padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+			margin-top: calc(0.25 * var(--global--spacing-unit));
+			margin-right: calc(0.25 * var(--global--spacing-unit));
 		}
 	}
 	.woo-navigation-open & {
@@ -89,6 +97,9 @@
 		}
 		#woo-close-menu {
 			display: flex;
+			padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+			margin-top: calc(0.25 * var(--global--spacing-unit));
+			margin-right: calc(0.25 * var(--global--spacing-unit));
 		}
 	}
 }

seedlet/header.php

@@ -82,7 +82,7 @@
 									</li>
 								</ul>
 							</li>',
-						esc_html__( 'Cart', 'seedlet' ),
+						esc_html__( 'Close', 'seedlet' ),
 						seedlet_get_icon_svg( 'close' ),
 						esc_html__( 'collapsed', 'seedlet' ),
 						esc_attr__( 'submenu', 'seedlet' ),

seedlet/style-rtl.css

@@ -2837,6 +2837,9 @@ nav a {
 
 .menu-button-container #primary-open-menu {
 	margin-right: auto;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
 @media only screen and (max-width: 481px) {
@@ -2852,6 +2855,7 @@ nav a {
 .menu-button-container .button,
 .primary-navigation .button,
 .woo-navigation .button {
+	font-size: var(--primary-nav--font-size);
 	background-color: transparent;
 	color: var(--primary-nav--color-link);
 	z-index: 500;
@@ -2870,10 +2874,12 @@ nav a {
 	display: none;
 }
 
-.menu-button-container .button:hover,
-.primary-navigation .button:hover,
-.woo-navigation .button:hover {
-	color: var(--primary-nav--color-link-hover);
+.menu-button-container .button#woo-open-menu,
+.primary-navigation .button#woo-open-menu,
+.woo-navigation .button#woo-open-menu {
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
 .menu-button-container .button#woo-open-menu .svg-icon,
@@ -2926,6 +2932,9 @@ nav a {
 .primary-navigation #primary-close-menu, .primary-navigation-open
 .woo-navigation #primary-close-menu {
 	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
 .woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
@@ -2938,6 +2947,9 @@ nav a {
 .primary-navigation #woo-close-menu, .woo-navigation-open
 .woo-navigation #woo-close-menu {
 	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
 .primary-navigation,

seedlet/style.css

@@ -2862,6 +2862,9 @@ nav a {
 
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
 @media only screen and (max-width: 481px) {
@@ -2877,6 +2880,7 @@ nav a {
 .menu-button-container .button,
 .primary-navigation .button,
 .woo-navigation .button {
+	font-size: var(--primary-nav--font-size);
 	background-color: transparent;
 	color: var(--primary-nav--color-link);
 	z-index: 500;
@@ -2895,10 +2899,12 @@ nav a {
 	display: none;
 }
 
-.menu-button-container .button:hover,
-.primary-navigation .button:hover,
-.woo-navigation .button:hover {
-	color: var(--primary-nav--color-link-hover);
+.menu-button-container .button#woo-open-menu,
+.primary-navigation .button#woo-open-menu,
+.woo-navigation .button#woo-open-menu {
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
 .menu-button-container .button#woo-open-menu .svg-icon,
@@ -2951,6 +2957,9 @@ nav a {
 .primary-navigation #primary-close-menu, .primary-navigation-open
 .woo-navigation #primary-close-menu {
 	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
 .woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
@@ -2963,6 +2972,9 @@ nav a {
 .primary-navigation #woo-close-menu, .woo-navigation-open
 .woo-navigation #woo-close-menu {
 	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
 .primary-navigation,