From 5a6e5c47d24784bcb8da446ef03fd590934a7c6e Mon Sep 17 00:00:00 2001 From: Fomafix Date: Tue, 19 Feb 2019 21:13:41 +0100 Subject: [PATCH] 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 --- resources/src/mediawiki.toc.styles/screen.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 { -- 2.20.1