mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 08:35:42 +00:00
98068d9598
Adds landmarks to the article toolbar - Namespace navigation - View navigation - More options navigation Removes the "tools" landmark and associated aria-label (and translation message). Makes the #left-navigation and #right-navigation flexbox to ensure the new <nav> elements, along with gadgets, align on one line. Moves the styles for these elements from screen.less to ArticleToolbar.less. Bug: T317440 Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
59 lines
1.5 KiB
Plaintext
59 lines
1.5 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
|
|
|
.mw-article-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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vector-more-collapsible-item {
|
|
display: block;
|
|
|
|
@media ( min-width: @min-width-tablet ) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Make sure pcactions is displayed (even if .emptyPortlet present)
|
|
.vector-has-collapsible-items {
|
|
@media ( max-width: @max-width-mobile ) {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ID Selectors outside of .mw-article-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;
|
|
}
|
|
}
|