mediawiki-skins-Vector/resources/skins.vector.styles/components/MainMenu.less
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00

111 lines
2.9 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,
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
.mw-sidebar {
// T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
}
// 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-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
}
}
.vector-main-menu,
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
.mw-sidebar {
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%;
}
// Hide sidebar entirely when the checkbox is disabled
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
@{selector-main-menu-closed} ~ .vector-sidebar-container &,
@{selector-main-menu-closed} ~ .vector-main-menu-container & {
display: none;
}
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
/* FIXME: Remove mw prefixed selectors after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
.mw-sidebar-action,
.vector-main-menu-action {
// Styles for MainMenuAction template.
.mw-sidebar-action-item,
.vector-main-menu-action-item {
// Align with the portal heading/links
// `.portal` + `.portal .body`
margin-top: 4px;
margin-bottom: 4px;
.mw-sidebar-action-heading,
.vector-main-menu-action-heading {
margin-bottom: 0.75em;
}
.mw-sidebar-action-content,
.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;
}
}
}