mediawiki-skins-Vector/resources/skins.vector.styles/components/MainMenu.less
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00

98 lines
2.4 KiB
Plaintext

@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';
// Match styles between TOC and fade element to ensure the fade covers the correct area
// This is expressed in pixels to support different font sizes since our layout is currently
// expressed in pixels. See T313817.
.sidebar-toc:after,
.sidebar-toc,
.vector-main-menu {
// T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide;
}
}
.vector-main-menu {
box-sizing: border-box;
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-image: none;
background-color: @background-color-secondary--modern;
@media ( max-width: @max-width-tablet ) {
// Makes the sidebar full screen at lower resolutions.
width: 100%;
}
//FIXME: This media query will be replaced with the pinned menu class in T317897
@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;
}
// Hide sidebar entirely when the checkbox is disabled
@{selector-main-menu-closed} ~ .vector-main-menu-container & {
display: none;
}
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
.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 */
background-image: url( images/chevronHorizontal-ltr.svg );
@{selector-main-menu-closed} ~ .mw-header & {
/* @embed */
background-image: url( images/menu.svg );
}
}
&:hover {
&:before {
opacity: 1;
}
}
}