feat(core): add overlay transition to header menus

StarCitizenTools · Jul 19, 2023 · 2f64346 · 2f64346
1 parent ef5e081
commit 2f64346
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -183,19 +183,32 @@
 		.citizen-header__button {
 			contain: initial;
 
+			~ .citizen-header__button {
+				&::before {
+					position: fixed;
+					z-index: 1;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					opacity: 0;
+					visibility: hidden;
+					pointer-events: none;
+					width: auto;
+					height: auto;
+					transition: var( --transition-menu );
+					transition-property: opacity;
+					background-color: var( --background-color-overlay );
+					content: '';
+				}
+			}
+
 			&[ aria-expanded='true' ] {
 				~ .citizen-header__button {
 					&::before {
-						position: fixed;
-						z-index: 1;
-						top: 0;
-						right: 0;
-						bottom: 0;
-						left: 0;
-						width: auto;
-						height: auto;
-						background-color: var( --background-color-overlay );
-						content: '';
+						opacity: 1;
+						visibility: visible;
+						pointer-events: auto;
 					}
 				}
 			}