mediawiki-skins-Vector/resources/skins.vector.styles/components/MainMenu.less
bwang 4efafaf374 Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb

- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width

Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
2023-01-10 17:21:26 -06:00

143 lines
3.6 KiB
Plaintext

@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';
// Ensure there is only 1 main menu landmark at anytime
.vector-main-menu-landmark {
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-enabled .vector-header-start &,
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-main-menu-container & {
display: none;
}
}
.vector-main-menu {
box-sizing: border-box;
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
.vector-feature-page-tools-enabled .vector-main-menu {
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
.mixin-vector-dropdown-menu-item();
}
.vector-main-menu-action-opt-out a {
font-weight: bold;
}
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-top: 0;
}
.vector-language-sidebar-alert {
// Override default .mw-message-box styles
padding: 8px;
margin: 0;
}
}
// Main menu when pinned in the sidebar
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
// Align the left edge of the text with the page container
margin-left: -@padding-horizontal-dropdown-menu-item;
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
background-color: @background-color-secondary--modern;
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-left: 0;
padding-right: 0;
}
}
// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
// TODO: Standardize dropdown min and max width
width: 250px;
.vector-language-sidebar-alert {
margin-bottom: 6px;
}
}
.vector-feature-page-tools-disabled {
@media ( max-width: @max-width-tablet ) {
.vector-main-menu {
// Makes the sidebar full screen at lower resolutions.
width: 100%;
}
}
// Hide sidebar entirely when the checkbox is disabled
@{selector-main-menu-closed} ~ .vector-main-menu-container .vector-main-menu {
display: none;
}
}
.vector-feature-page-tools-disabled .vector-main-menu {
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-color: @background-color-secondary--modern;
@media ( min-width: @min-width-desktop ) {
// Magic number from the edge of the main menu to the start of the main menu text.
margin-left: -28px;
}
}
.vector-feature-page-tools-disabled .vector-main-menu-action {
// Styles for MainMenuAction template.
.vector-main-menu-action-item {
// Align with the portal heading/links
// `.portal` + `.portal .body`
margin-top: 4px;
margin-bottom: 4px;
.vector-main-menu-action-heading {
margin-bottom: 0.75em;
}
.vector-main-menu-action-content {
> * {
font-size: @font-size-portal-list-item;
}
> a {
font-weight: bold;
}
}
// T295555 style overrides for temporary language switch alert (can be removed later ).
.vector-language-sidebar-alert {
padding: 0.75em;
}
}
}
#mw-sidebar-button {
&:before {
/* @embed */
.vector-feature-page-tools-disabled & {
background-image: url( images/chevronHorizontal-ltr.svg );
}
.vector-feature-page-tools-disabled @{selector-main-menu-closed} ~ .mw-header & {
/* @embed */
background-image: url( images/menu.svg );
}
}
&:hover {
&:before {
opacity: 1;
}
}
}