mediawiki-skins-Vector/resources/skins.vector.styles/components/MainMenu.less
Jon Robson a7f008b9bc Page tools: Main menu is a dropdown
This is an incomplete styling of the menu.

This should be enough to start an initial design
review and unblock other work on the dropdown.

Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)

This should cause no visual regressions in Pixel.

Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
2022-12-07 23:19:29 +00:00

88 lines
2 KiB
Plaintext

@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';
.vector-main-menu {
box-sizing: border-box;
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
.vector-feature-page-tools-disabled & {
background-color: @background-color-secondary--modern;
}
@media ( max-width: @max-width-tablet ) {
.vector-feature-page-tools-disabled & {
// 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 */
.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;
}
}
}