From: Fomafix <fomafix@googlemail.com>
Date: Tue, 19 Feb 2019 20:13:41 +0000 (+0100)
Subject: TOC: Add z-index: -1 to hidden checkbox
X-Git-Tag: 1.34.0-rc.0~2779^2
X-Git-Url: https://git.cyclocoop.org/%7B%24admin_url%7Dmembres/modifier.php?a=commitdiff_plain;h=5a6e5c47d24784bcb8da446ef03fd590934a7c6e;p=lhc%2Fweb%2Fwiklou.git

TOC: Add z-index: -1 to hidden checkbox

The hidden checkbox is not visible but still clickable and changes the
cursor. The z-index: -1 prevent this.

Also add comments to explain the reason for each declaration.

This change is a follow-up to 68527cf47935a0350d3f0a153bd06cbb98062ec8.

Change-Id: Ia66f4fb250d1685fe5bb0089b789b36d9916a5d5
---

diff --git a/resources/src/mediawiki.toc.styles/screen.less b/resources/src/mediawiki.toc.styles/screen.less
index 16b2591c16..ff41b5e6bf 100644
--- a/resources/src/mediawiki.toc.styles/screen.less
+++ b/resources/src/mediawiki.toc.styles/screen.less
@@ -1,11 +1,16 @@
 /* This style adds a toggle button with internationalized message for the TOC. */
 
-/* When the browser supports :checked then overwrite the style="display:none" and make the /*
+/* When the browser supports :checked then overwrite the style="display:none" and make the */
 /* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
 :not( :checked ) > .toctogglecheckbox {
+	// Make the checkbox visible to allow it to focus with keyboard.
 	display: inline !important; /* stylelint-disable-line declaration-no-important */
+	// Remove any size of the checkbox.
 	position: absolute;
+	// Make the checkbox invisible.
 	opacity: 0;
+	// Prevent that the checkbox is clickable and changes the cursor.
+	z-index: -1;
 }
 
 .toctogglespan {