mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-25 06:36:32 +00:00
5d6ffe7072
Make sure the table of contents doesn't change size when it is enhanced by JavaScript. Take opportunity to fix alignment of table of contents based on 20x20 icons (previously 24x24) and icon/heading alignment. Bug: T268787 Change-Id: I4ac26068687579484381af5b08e680e3a65f8f1e
92 lines
1.5 KiB
Plaintext
92 lines
1.5 KiB
Plaintext
@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;
|
|
}
|
|
}
|
|
}
|