From 703fac62942a15b7ae74b642b3c86a1367047fc2 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 14 Jul 2023 18:18:18 -0400
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E2=9C=A8=20add=20overlay=20as=20?=
 =?UTF-8?q?affordnance=20to=20popup=20menus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/mixins.less                         |  1 +
 .../components/Header.less                    | 28 ++++++++++++++++++-
 .../skins.citizen.styles/components/Menu.less |  1 -
 .../components/Search.less                    | 28 -------------------
 .../Echo/ext.echo.styles.badge.less           |  1 -
 5 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/resources/mixins.less b/resources/mixins.less
index fe5eca9e..386496f1 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -34,6 +34,7 @@
 // When using fadeChildren, the child elements need to have
 // opacity: 0 set manually
 .citizen-card-show( @fadeChildren: true ) {
+	z-index: @z-index-overlay;
 	opacity: 1;
 	pointer-events: auto;
 	transform: none;
diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
index 7c1f0ca2..92e3db2c 100644
--- a/resources/skins.citizen.styles/components/Header.less
+++ b/resources/skins.citizen.styles/components/Header.less
@@ -89,7 +89,6 @@
 	}
 
 	&__inner {
-		z-index: -1; // Inner element should be behind menu and search
 		display: flex;
 		min-width: 0;
 		flex-direction: var( --header-direction );
@@ -177,6 +176,33 @@
 	.citizen-header {
 		transition: var( --transition-menu );
 		transition-property: transform;
+
+		/*
+		 * Add overlay to menus as affordnance
+		 * TODO: We should use JS to add the overlay instead of abusing CSS
+		*/
+		.citizen-menu-checkbox-checkbox,
+		.citizen-button {
+			contain: initial;
+
+			&[ aria-expanded='true' ] {
+				&::before {
+					position: fixed;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					width: auto;
+					height: auto;
+					background-color: var( --background-color-overlay );
+					content: '';
+				}
+
+				~ .citizen-menu-checkbox-target {
+					z-index: 1;
+				}
+			}
+		}
 	}
 
 	.citizen-scroll--down .citizen-header {
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
index a5743e57..de8fae67 100644
--- a/resources/skins.citizen.styles/components/Menu.less
+++ b/resources/skins.citizen.styles/components/Menu.less
@@ -82,7 +82,6 @@
 		height: 0;
 		padding: 0;
 		margin: 0;
-		opacity: 0;
 
 		// HACK: Fake focus styles
 		&:focus {
diff --git a/resources/skins.citizen.styles/components/Search.less b/resources/skins.citizen.styles/components/Search.less
index 56014557..4eb509d3 100644
--- a/resources/skins.citizen.styles/components/Search.less
+++ b/resources/skins.citizen.styles/components/Search.less
@@ -127,32 +127,4 @@
 			transition: none;
 		}
 	}
-
-	#citizen-search__checkbox:checked {
-		+ .citizen-search__card {
-			z-index: 2;
-		}
-
-		// HACK: Click overlay to dismiss search bar
-		~ .citizen-search__button {
-			// Reset containment so that the overlay is visible
-			contain: initial;
-
-			.citizen-search__buttonIcon {
-				display: none;
-			}
-
-			#citizen-search__buttonCheckbox {
-				position: fixed;
-				z-index: 1;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				width: auto;
-				height: auto;
-				background-color: var( --background-color-overlay );
-			}
-		}
-	}
 }
diff --git a/skinStyles/extensions/Echo/ext.echo.styles.badge.less b/skinStyles/extensions/Echo/ext.echo.styles.badge.less
index 1333d7e8..d0cbcd7f 100644
--- a/skinStyles/extensions/Echo/ext.echo.styles.badge.less
+++ b/skinStyles/extensions/Echo/ext.echo.styles.badge.less
@@ -82,7 +82,6 @@
 // Add quiet background hover states
 #pt-notifications-alert,
 #pt-notifications-notice {
-	z-index: 1; // fix background clipping
 	border-radius: var( --border-radius--small );
 
 	&:hover {