mediawiki-skins-Vector/resources/skins.vector.styles/components/PageToolbar.less
Volker E 783d67e077 Replace border-color-portal-heading with Codex border-color-subtle
Replacing Vector specific variable with standard token that is meant
for exactly the applied use cases.
Note, I've left `border-color-subtle-transparent` because of that
extra engineering leg. I assume it was meant for animating the property,
which is not there. It seems better to me to replace this variable too
with `border-color-transparent`.

Change-Id: If264e04e576f044b98ec0d61b085f65af0110b6d
2024-05-28 14:29:20 -05:00

52 lines
1.5 KiB
Plaintext

@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
.vector-page-toolbar-container {
display: flex;
font-size: unit( @font-size-small, rem );
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
box-shadow: 0 1px @border-color-subtle;
// Add bottom margin to account for box-shadow
margin-bottom: 1px;
.mw-portlet-views {
display: none;
@media ( min-width: @min-width-breakpoint-tablet ) {
&:not( .emptyPortlet ) {
display: block;
}
}
}
// Reduce icon size for icon buttons in the page toolbar (i.e. watchstar, wikilove)
.vector-icon {
.cdx-mixin-css-icon-background( @size-icon-small );
.cdx-mixin-css-icon-size( @size-icon-small );
.cdx-mixin-css-icon-alignment( );
// Temporary fix for https://phabricator.wikimedia.org/T356540
background-size: ~'calc( max( @{size-icon-small}, @{min-size-icon-small} ) )';
}
}
// 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-dropdown-content {
.mixin-vector-dropdown-content-flip();
}
}