mediawiki-skins-Vector/resources/skins.vector.styles/components/ArticleToolbar.less
Jan Drewniak c5cfd4dce8 Restyle Vector tabs in modern Vector
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.

Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
2022-06-08 11:26:17 -07:00

71 lines
1.8 KiB
Plaintext

@import '../../common/variables.less';
.mw-article-toolbar-container {
border-bottom: @border-tabs;
.mw-portlet-views {
display: none;
@media ( min-width: @width-breakpoint-tablet ) {
&:not( .emptyPortlet ) {
display: block;
}
}
}
.vector-more-collapsible-item {
display: none;
@media ( max-width: @width-breakpoint-tablet ) {
display: block;
}
}
// Make sure pcactions is displayed (even if .emptyPortlet present)
.vector-has-collapsible-items {
@media ( max-width: @width-breakpoint-tablet ) {
display: block;
}
}
}
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
.vector-article-toolbar .mw-article-toolbar-container {
display: flex;
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
@media ( min-width: @width-breakpoint-desktop-wide ) {
padding-right: @padding-horizontal-tabs - 1px;
}
#right-navigation {
display: flex;
flex-grow: 1;
justify-content: end;
// Layout correction - as it was before introduce of flex box.
margin-right: -1px;
@media ( min-width: @width-breakpoint-desktop-wide ) {
margin-right: -@border-base-ems * 3;
}
}
#left-navigation {
display: flex;
// Layout correction - as it was before introduce of flex box.
@media ( min-width: @width-breakpoint-desktop-wide ) {
margin-left: @border-base-ems * 3;
}
}
}
// Currently when right navigation is empty and sidebar is open no
// border is shown. This can intentionally be removed at a later date but
// is preserved to reduce number of UI regressions in current release.
@media ( max-width: @width-breakpoint-tablet ) {
#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
border-bottom: 0;
}
}