From bf8909e2bbfcf03bc99f7b4cd880de0340b0462f Mon Sep 17 00:00:00 2001
From: Cameron <roger.dodger.thor@gmail.com>
Date: Mon, 23 Nov 2020 16:14:09 +1030
Subject: [PATCH] Fix closed toc eating clicks with phantom div

Previous behaviour was to remove the toc from view by applying a transform to the .toc > ul but *not* .toc itself.

This meant that .toc was still covering the body when the toc was "closed", eating clicks on anything that would be covered by the toc when opened.

This change puts a transform on .toc itself (and changes the transforms on the ul to match), fixing the issue. However, this creates a new stacking context, which affects .toctogglelabel, since its fixed position is now with respect to .toc, not the viewport. Setting .toctogglelabel { right: -100vw } keeps it in the same place.
---
 .../skins.citizen.styles.toc/skins.citizen.styles.toc.less | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
index 2da1b1ba..8db4713a 100644
--- a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
+++ b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
@@ -97,6 +97,7 @@
 		height: 100%;
 		margin-top: -@header-height;
 		padding: 0;
+		transform: translateX(-100%);
 
 		&:before,
 		&:after {
@@ -112,7 +113,7 @@
 			&label {
 				position: fixed;
 				z-index: 7;
-				right: 0;
+				right: -100vw;
 				bottom: 0;
 				margin: @margin-side;
 				padding: 0 @margin-side / 2;
@@ -144,7 +145,7 @@
 			}
 
 			&checkbox:not( :checked ) ~ ul {
-				transform: translateX( -300px - @margin-side );
+				transform: none;
 			}
 		}
 
@@ -162,7 +163,7 @@
 			background: @base-100;
 			border-radius: 0 @border-radius-large @border-radius-large 0;
 			.boxshadow(3);
-			transform: none;
+			transform: translateX(100%);
 			transition: @transition-transform;
 		}
 	}