mediawiki-skins-Vector/resources/skins.vector.styles/components/PageToolbar.less
bwang d150131561 Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet

Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-30 17:17:20 -06:00

44 lines
1.2 KiB
Plaintext

@import '../../common/variables.less';
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
.vector-page-toolbar-container {
display: flex;
font-size: @font-size-tabs;
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
box-shadow: 0 1px @border-color-portal-heading;
// Add bottom margin to account for box-shadow
margin-bottom: 1px;
.mw-portlet-views {
display: none;
@media ( min-width: @min-width-tablet ) {
&:not( .emptyPortlet ) {
display: block;
}
}
}
}
// ID Selectors outside of .vector-page-toolbar-container to avoid over-specificity.
#left-navigation {
// flex ensures all child elements align on one line.
display: flex;
margin-left: -@padding-horizontal-tabs;
// pushes #right-navigation to the end of the line.
flex-grow: 1;
}
#right-navigation {
// flex ensures all child elements align on one line.
display: flex;
margin-right: -@padding-horizontal-tabs;
// Any dropdowns inside the right navigation in modern Vector (e.g. "more" menu).
// should be right-aligned to prevent horizontal scrolling.
.vector-menu-content {
left: auto;
right: -@border-width-base;
}
}