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

Enable collapsible TOC sections for user with preferred reduced motion 

Bug: T306652
Change-Id: Ia94b9dd32484f5f8b4c8bfe28d7c5b1f303855bf
This commit is contained in:
bwang 2022-04-21 11:51:47 -05:00 committed by Jdlrobson
parent c269419af3
commit ea64b86f33
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 );
}
}