mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 00:25:40 +00:00
4ab2b1bff1
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
44 lines
918 B
Plaintext
44 lines
918 B
Plaintext
@import '../../common/variables.less';
|
|
|
|
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
|
|
|
.mw-article-toolbar-container {
|
|
// clearfix for #left-navigation and #right-navigation
|
|
display: flow-root;
|
|
border-bottom: @border-bottom-tabs;
|
|
|
|
/* Targets #left-navigation and #right-navigation */
|
|
& > div {
|
|
font-size: @font-size-tabs;
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
padding-right: @padding-horizontal-tabs - 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;
|
|
}
|
|
}
|
|
}
|