jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Enable collapsible TOC sections for user with preferred reduced motion"

This commit is contained in:
jenkins-bot 2022-04-27 14:48:51 +00:00 committed by Gerrit Code Review
parent 3e1f96a163 ea64b86f33
commit b06aba7619
1 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -102,32 +102,30 @@
cursor: pointer;
}
// Collapse ToC sections by default, excluding no-js or prefers-reduced-motion
@media ( prefers-reduced-motion: no-preference ) {
.client-js .sidebar-toc {
.sidebar-toc-level-1 .sidebar-toc-list-item {
display: none;
}
// Collapse ToC sections by default, excluding no-js
.client-js .sidebar-toc {
.sidebar-toc-level-1 .sidebar-toc-list-item {
display: none;
}
.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-list-item {
display: block;
}
.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-list-item {
display: block;
}
.sidebar-toc-toggle {
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{toggle-icon-size} - 1px )'; // leaves 6px between icon + text
display: block;
width: @toggle-icon-size; // ~22px @ 12
height: @toggle-icon-size;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
transform: rotate( -90deg );
transition: 100ms;
}
.sidebar-toc-toggle {
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{toggle-icon-size} - 1px )'; // leaves 6px between icon + text
display: block;
width: @toggle-icon-size; // ~22px @ 12
height: @toggle-icon-size;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
transform: rotate( -90deg );
transition: @transition-duration-base;
}
.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle {
transform: rotate( 0deg );
}
.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle {
transform: rotate( 0deg );
}
}