1 /* This style adds a toggle button with internationalized message for the TOC. */
3 /* stylelint-disable selector-class-pattern */
5 /* When the browser supports :checked then overwrite the style="display:none" and make the */
6 /* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
7 :not( :checked ) > .toctogglecheckbox {
8 // Make the checkbox visible to allow it to focus with keyboard.
9 display: inline !important; /* stylelint-disable-line declaration-no-important */
10 // Remove any size of the checkbox.
12 // Make the checkbox invisible.
14 // Prevent that the checkbox is clickable and changes the cursor.
22 /* IE8 does not support :checked and therefor it does not support the hiding at all. */
23 /* The selector ":not( :checked ) >" prevents that the useless brackets are shown on IE8. */
24 :not( :checked ) > .toctogglespan:before {
28 :not( :checked ) > .toctogglespan:after {
32 /* Make the label look like a link. */
38 .toctogglelabel:hover {
39 text-decoration: underline;
42 /* Show a focus ring around the label when focusing the invisible checkbox. */
43 /* This simulates that the label is in focus. */
44 .toctogglecheckbox:focus + .toctitle .toctogglelabel {
45 text-decoration: underline;
46 outline: dotted 1px; /* Firefox style for focus */
47 outline: auto -webkit-focus-ring-color; /* Webkit style for focus */
50 /* Change the text of the button based on the state of the checkbox. */
51 .toctogglecheckbox:checked + .toctitle .toctogglelabel:after {
52 content: '@{msg-showtoc}';
55 .toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel:after {
56 content: '@{msg-hidetoc}';