mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/toc.less
Volker E 38ca243e39 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-*` and
  `transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
  'minderva.variables.less' file. Those should be replaced in mid-future
  by Codex design tokens

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
2023-04-24 16:08:27 +00:00

116 lines
2.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;
}
}
.tocnumber {
display: none;
}
.toctogglelabel {
position: absolute;
left: 0;
top: 0;
right: 0;
height: @toc-large-icon;
z-index: @z-indexAboveContent;
}
// 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;
.toctitle {
// Reserve space for icons
padding: 0 @toc-small-icon 0 @toc-large-icon;
.mw-ui-icon {
position: absolute;
left: 0;
}
.toctogglespan + .mw-ui-icon {
top: (@toc-large-icon - @toc-small-icon) / 2;
right: 0;
left: auto;
}
}
> 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;
}
}
}