mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 08:05:51 +00:00
68239ae344
Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
75 lines
2.1 KiB
Plaintext
75 lines
2.1 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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( );
|
|
}
|
|
|
|
// Prevent icon buttons in the page toolbar from automatically increasing padding on small viewports
|
|
.cdx-button--icon-only {
|
|
// !important needed to override 'responsive' button styles on smaller viewports defined in Button.less
|
|
min-width: 32px !important; /* stylelint-disable-line declaration-no-important */
|
|
min-height: 32px !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
|
|
// FIXME: Remove selector after caching
|
|
.mw-ui-icon-element {
|
|
// Override icon styles to apply .mw-ui-icon-small styles
|
|
.mw-ui-icon {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
&::before {
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|