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

Merge "TOC: CSS clean up and spacing fix"

This commit is contained in:
jenkins-bot 2022-07-11 21:05:05 +00:00 committed by Gerrit Code Review
parent a3905e9acd 42f863a936
commit 1be236aa5a
2 changed files with 33 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
@import '../../common/variables.less'; @import '../../common/variables.less';
@fade-height: 40px; @sidebar-toc-fade-height: 30px;
@vertical-padding: 20px; @sidebar-toc-vertical-padding: 20px;
@right-padding: 12px; @sidebar-toc-right-padding: 12px;
@toggle-icon-size: 1.834em; @toc-subsection-toggle-icon-size: 1.834em;
.sidebar-toc { .sidebar-toc {
display: none;
max-height: 75vh; max-height: 75vh;
padding: @vertical-padding @right-padding @vertical-padding 32px; padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding 32px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
background-color: @border-color-sidebar; background-color: @border-color-sidebar;
@ -29,11 +28,29 @@
display: none; display: none;
} }
.sidebar-toc-toggle {
// For no-js users, toggling is disabled and icon is hidden
display: none;
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{toc-subsection-toggle-icon-size} - 1px )'; // leaves 6px between icon + text
width: @toc-subsection-toggle-icon-size; // ~22px @ 12
height: @toc-subsection-toggle-icon-size;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
transition: @transition-duration-base;
cursor: pointer;
}
.sidebar-toc-link { .sidebar-toc-link {
word-break: break-word; word-break: break-word;
color: @color-link; color: @color-link;
} }
.sidebar-toc-list-item-active > .sidebar-toc-link {
// Highlight active section
color: @color-base;
}
.sidebar-toc-text { .sidebar-toc-text {
padding: 4px 0; padding: 4px 0;
} }
@ -45,24 +62,20 @@
line-height: 18px; line-height: 18px;
} }
.sidebar-toc-contents {
padding-bottom: ~'calc( @{vertical-padding} / 2 )';
}
.sidebar-toc-list-item { .sidebar-toc-list-item {
display: block; display: block;
position: relative; position: relative;
list-style-type: none; list-style-type: none;
padding-left: 8px; padding-left: 8px;
&.sidebar-toc-level-1 {
padding-left: 0;
}
a { a {
font-size: @font-size-base; font-size: @font-size-base;
} }
} }
.sidebar-toc-list-item.sidebar-toc-level-1 {
padding-left: 0;
}
} }
// T302076 Add scrollable indicator as fade // T302076 Add scrollable indicator as fade
@ -73,24 +86,13 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: @fade-height; height: @sidebar-toc-fade-height;
background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar ); background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: -@right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
pointer-events: none; // Make the link below the fade clickable pointer-events: none; // Make the link below the fade clickable
} }
// Highlight active section
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
color: @color-base;
}
.sidebar-toc .sidebar-toc-toggle {
// For no-js users, toggling is disabled and icon is hidden
display: none;
cursor: pointer;
}
// Collapse ToC sections by default, excluding no-js // Collapse ToC sections by default, excluding no-js
.client-js .sidebar-toc { .client-js .sidebar-toc {
.sidebar-toc-level-1 .sidebar-toc-list-item { .sidebar-toc-level-1 .sidebar-toc-list-item {
@ -102,14 +104,7 @@
} }
.sidebar-toc-toggle { .sidebar-toc-toggle {
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{toggle-icon-size} - 1px )'; // leaves 6px between icon + text
display: block; display: block;
width: @toggle-icon-size; // ~22px @ 12
height: @toggle-icon-size;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
transition: @transition-duration-base;
} }
.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle { .sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle {
@ -125,12 +120,6 @@
transform: rotate( 90deg ); transform: rotate( 90deg );
} }
@media ( min-width: @min-width-desktop ) {
.sidebar-toc {
display: block;
}
}
// T300975 following media query for TOC experiment treatment // T300975 following media query for TOC experiment treatment
// class can be removed once associated A/B test is over. // class can be removed once associated A/B test is over.
@media ( max-width: @max-width-tablet ) { @media ( max-width: @max-width-tablet ) {

8
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -1,6 +1,6 @@
@import '../../common/variables.less'; @import '../../common/variables.less';
@selector-collapsed-toc-button-checked: ~'#vector-toc-collapsed-checkbox:checked'; @selector-collapsed-toc-closed: ~'#vector-toc-collapsed-checkbox:not( :checked )';
#vector-toc-collapsed-button { #vector-toc-collapsed-button {
display: none; display: none;
@ -56,9 +56,9 @@
} }
} }
@{selector-collapsed-toc-button-checked} ~ .mw-table-of-contents-container .sidebar-toc { @{selector-collapsed-toc-closed} ~ .mw-table-of-contents-container .sidebar-toc {
// Unhide the TOC when the button is checked // Hide the TOC when the button is not checked
display: block; display: none;
} }
.vector-below-page-title { .vector-below-page-title {