mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-09-23 10:19:43 +00:00
feat(toc): ✨ allow ToC to be collapsible
Using the same implementation as Vector 2022 Closes: #556
This commit is contained in:
parent
ca1f31d789
commit
257673a588
|
@ -1,4 +1,5 @@
|
||||||
.citizen-toc {
|
.citizen-toc {
|
||||||
|
--citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )';
|
||||||
font-size: var( --font-size-small );
|
font-size: var( --font-size-small );
|
||||||
line-height: var( --line-height-xs );
|
line-height: var( --line-height-xs );
|
||||||
|
|
||||||
|
@ -36,6 +37,11 @@
|
||||||
transition-property: opacity, height, padding !important;
|
transition-property: opacity, height, padding !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:has( + .citizen-toc-toggle ) {
|
||||||
|
/* Make space for toggle */
|
||||||
|
padding-right: ~'calc( var( --space-xs ) + var( --citizen-toc-toggle-size ) )';
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var( --background-color-button-quiet--hover );
|
background-color: var( --background-color-button-quiet--hover );
|
||||||
}
|
}
|
||||||
|
@ -50,6 +56,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-toggle {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
width: var( --citizen-toc-toggle-size );
|
||||||
|
height: var( --citizen-toc-toggle-size );
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
&-indicator {
|
&-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -73,6 +90,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-list-item {
|
&-list-item {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
> .citizen-toc-link {
|
> .citizen-toc-link {
|
||||||
color: var( --color-progressive );
|
color: var( --color-progressive );
|
||||||
|
@ -85,6 +104,45 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Collapse ToC sections by default, excluding no-js
|
||||||
|
.client-js .citizen-toc {
|
||||||
|
.citizen-toc-level-1 .citizen-toc-list-item {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.citizen-toc-toggle {
|
||||||
|
--size-icon: var( --font-size-small );
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var( --border-radius--small );
|
||||||
|
|
||||||
|
.citizen-ui-icon {
|
||||||
|
&::before {
|
||||||
|
transition: var( --transition-hover );
|
||||||
|
transition-property: transform;
|
||||||
|
transform: rotate3d( 1, 0, 0, 180deg );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var( --background-color-button-quiet--hover );
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: var( --background-color-button-quiet--active );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Sticky header styles
|
// Sticky header styles
|
||||||
.citizen-page-header--sticky {
|
.citizen-page-header--sticky {
|
||||||
.citizen-toc-top.citizen-toc-link {
|
.citizen-toc-top.citizen-toc-link {
|
||||||
|
|
|
@ -13,6 +13,12 @@
|
||||||
{{#html-summary}}
|
{{#html-summary}}
|
||||||
{{{.}}}
|
{{{.}}}
|
||||||
{{/html-summary}}
|
{{/html-summary}}
|
||||||
|
{{#is-top-level-section}}{{#is-parent-section}}
|
||||||
|
<button aria-controls="toc-{{anchor}}-sublist" class="citizen-toc-toggle">
|
||||||
|
<span class="citizen-ui-icon mw-ui-icon-wikimedia-collapse"></span>
|
||||||
|
<span>{{{citizen-button-label}}}</span>
|
||||||
|
</button>
|
||||||
|
{{/is-parent-section}}{{/is-top-level-section}}
|
||||||
<ul id="toc-{{anchor}}-sublist" class="citizen-toc-list">
|
<ul id="toc-{{anchor}}-sublist" class="citizen-toc-list">
|
||||||
{{#array-sections}}
|
{{#array-sections}}
|
||||||
{{>TableOfContents__line}}
|
{{>TableOfContents__line}}
|
||||||
|
|
Loading…
Reference in a new issue