mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-04 18:48:15 +00:00
be0b43042e
Converts all Less variable names from CamelCase to snake-case per the MediaWiki coding conventions. Removes the following unused Less variables, mostly related to icons, since those were converted to Codex: - @icon-touch-area-sm - @icon-touch-area-md - @min-size-icon (replaced with @size-icon-medium) - @icon-glyph-size-sm - @icon-size-sm - @icon-padding-sm - @icon-glyph-size-md - @icon-size-md - @margin-icon-md-labelled Bug: T350581 Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
103 lines
2 KiB
Plaintext
103 lines
2 KiB
Plaintext
@import '../../../minerva.less/minerva.variables.less';
|
|
|
|
@toc-large-icon: 44px;
|
|
@toc-small-icon: 34px;
|
|
|
|
.toc {
|
|
display: none;
|
|
position: relative;
|
|
margin: 1em 0;
|
|
padding: 0 1em 1em 1em;
|
|
background-color: @background-color-lightest;
|
|
border: @border-width-base @border-style-base #eaecf0;
|
|
box-sizing: border-box;
|
|
|
|
// We need high specificity to override .content ul
|
|
&.toc > ul {
|
|
// Account for the icon spaces left and right.
|
|
// margin: 0 @toc-small-icon 0 @toc-large-icon;
|
|
font-size: @font-size-minerva-small;
|
|
// Reset `.client-js .toc > ul`.
|
|
padding-left: 0;
|
|
}
|
|
|
|
// We need high specificity to override .content ul
|
|
&.toc ul {
|
|
list-style: none;
|
|
// break long headings like urls
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.toctitle {
|
|
@toctitle-vertical-padding: 1.4em / 2;
|
|
font-weight: bold;
|
|
display: flex;
|
|
// Force vertical centering on title by making this full height
|
|
align-items: center;
|
|
// Ensure height for icon
|
|
min-height: @toc-large-icon;
|
|
|
|
// We need high specificity to override .content h2
|
|
&.toctitle h2 {
|
|
display: inline-block;
|
|
font-family: @font-family-base;
|
|
font-size: unit( 18/16, em );
|
|
vertical-align: middle;
|
|
flex-grow: 1;
|
|
margin-left: @toc-large-icon;
|
|
margin-right: @toc-large-icon;
|
|
}
|
|
}
|
|
|
|
.tocnumber {
|
|
display: none;
|
|
}
|
|
|
|
.toctogglelabel {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
height: @toc-large-icon;
|
|
z-index: @z-index-above-content;
|
|
}
|
|
|
|
// Do stuff we only need to do with JS
|
|
// Collapsing and reserving space for the JS icons
|
|
.client-js .toc {
|
|
// Reset padding, because we need to reserve space for icons
|
|
padding: 0;
|
|
|
|
> ul {
|
|
// Account for the icon spaces left and right.
|
|
margin: 0 @toc-small-icon 0 @toc-large-icon;
|
|
}
|
|
|
|
.toctogglecheckbox ~ ul {
|
|
visibility: hidden;
|
|
height: 0;
|
|
}
|
|
|
|
.toctogglecheckbox:checked ~ ul {
|
|
visibility: visible;
|
|
padding-bottom: 20px;
|
|
height: auto;
|
|
}
|
|
|
|
.toctogglelabel {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: @width-breakpoint-tablet ) {
|
|
.toc {
|
|
// Reset the rule for mobile mode
|
|
display: table;
|
|
|
|
.toctitle {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|