mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-09-23 02:08:40 +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-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )';
|
||||
font-size: var( --font-size-small );
|
||||
line-height: var( --line-height-xs );
|
||||
|
||||
|
@ -36,6 +37,11 @@
|
|||
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 {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -73,6 +90,8 @@
|
|||
}
|
||||
|
||||
&-list-item {
|
||||
position: relative;
|
||||
|
||||
&--active {
|
||||
> .citizen-toc-link {
|
||||
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
|
||||
.citizen-page-header--sticky {
|
||||
.citizen-toc-top.citizen-toc-link {
|
||||
|
|
|
@ -13,6 +13,12 @@
|
|||
{{#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">
|
||||
{{#array-sections}}
|
||||
{{>TableOfContents__line}}
|
||||
|
|
Loading…
Reference in a new issue