mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 09:55:42 +00:00
7e81c26712
Previously, we relied on setting pointer-events:none on all child elements of ToC links. This propagated the click event up to the link itself in Javascript and allowed us check if an element with the class `.sidebar-toc-link` was clicked. Unfortunately as of Chromium 101 this approach causes the entire link in the sidebar to be unclickable. Instead, this patch checks if the ToC link or any of it's children have been clicked (using the less efficient `Element.closest()` ). Bug: T307271 Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
139 lines
2.9 KiB
Plaintext
139 lines
2.9 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
@subcategory-padding: 8px;
|
|
@fade-height: 40px;
|
|
@vertical-padding: 20px;
|
|
@toggle-icon-size: 1.834em;
|
|
|
|
.sidebar-toc {
|
|
display: none;
|
|
width: @width-sidebar;
|
|
max-height: 75vh;
|
|
padding: @vertical-padding @subcategory-padding @vertical-padding ~'calc( @{subcategory-padding} * 4 )';
|
|
.box-sizing( border-box );
|
|
overflow: auto;
|
|
background-color: @border-color-sidebar;
|
|
|
|
.sidebar-toc-header {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.sidebar-toc-title {
|
|
color: @color-base--subtle;
|
|
font-size: @font-size-base;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.sidebar-toc-numb {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-toc-link {
|
|
word-break: break-word;
|
|
color: @color-link;
|
|
}
|
|
|
|
.sidebar-toc-text {
|
|
padding: ~'calc( @{subcategory-padding} / 2 )' 0;
|
|
}
|
|
|
|
.sidebar-toc-contents,
|
|
.sidebar-toc-list {
|
|
margin: 0;
|
|
list-style: none;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.sidebar-toc-contents {
|
|
padding-bottom: ~'calc( @{vertical-padding} / 2 )';
|
|
}
|
|
|
|
.sidebar-toc-list-item {
|
|
display: block;
|
|
position: relative;
|
|
list-style-type: none;
|
|
padding-left: @subcategory-padding;
|
|
|
|
a {
|
|
font-size: @font-size-base;
|
|
}
|
|
}
|
|
|
|
.sidebar-toc-list-item.sidebar-toc-level-1 {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
// Hide scrollbar but allow scrolling for Chrome, Safari, and Opera
|
|
.sidebar-toc::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
// T302076 Add scrollable indicator as fade
|
|
.sidebar-toc:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: @fade-height;
|
|
background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
|
|
pointer-events: none; // Make the link below the fade clickable
|
|
margin: 0 @border-width-base;
|
|
}
|
|
|
|
// 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
|
|
.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-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 );
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
.sidebar-toc {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// T300975 following media query for TOC experiment treatment
|
|
// class can be removed once associated A/B test is over.
|
|
@media ( max-width: @width-breakpoint-desktop ) {
|
|
.skin-vector-toc-experiment-treatment #toc {
|
|
display: table;
|
|
}
|
|
}
|