mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-30 02:15:49 +00:00
8c63ac7c55
Instead of aligning the edge of the main menu and ToC with the edge of the main menu button, this aligns the text of those sidebar items with the edge of the main menu button. NOTE: Currently not working with the vectorvisualenhancementnext feature flag enabled. This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06 Bug: T317583 Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
109 lines
2.9 KiB
Plaintext
109 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;
|
|
|
|
//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;
|
|
}
|
|
|
|
// 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,
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|