@import '../../../minerva.less/minerva.variables.less'; .toc { display: none; position: relative; margin: 1em 0; padding: 0.2em 0.5em; background-color: @colorGray15; border: solid 1px @grayLightest; box-sizing: border-box; } .toctogglecheckbox ~ ul { visibility: hidden; height: 0; } .toctogglecheckbox:checked ~ ul { visibility: visible; padding-bottom: 20px; height: auto; } .toctitle { padding: 0 25px 0 32px; .mw-ui-icon { position: absolute; left: 0; } .toctogglespan + .mw-ui-icon { top: 8px; right: 0; left: auto; } } .toctogglelabel { cursor: pointer; position: absolute; left: 0; top: 0; right: 0; height: 50px; z-index: @z-indexAboveContent; } .client-js .toc { .toctitle { @toctitle-vertical-padding: 1.4em / 2; visibility: hidden; background-position: right center; font-weight: bold; border-bottom: 0; h2 { display: inline-block; font-family: @font-family-base; font-size: unit( 18/16, em ); vertical-align: middle; } } .tocnumber { display: none; } > ul { // Account for the icon spaces left and right. margin: 0 unit( @icon-glyph-size-md / @font-size-minerva-small, em ) 0 32px; // Reset `.client-js .toc > ul`. padding-left: 0; font-size: @font-size-minerva-small; } ul { list-style: none; } } @media screen and ( min-width: @width-breakpoint-tablet ) { .client-js .toc { // Reset the rule for mobile mode (but not for .client-nojs) display: table; .toctitle { visibility: visible; } } }