mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-06 13:09:14 +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
63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
@import '../../common/variables.less';
|
||
@import 'mediawiki.mixins.less';
|
||
|
||
// Extends the common MenuDropdown, but allows it to be opened via hover.
|
||
|
||
.vector-menu-dropdown:not( .vector-user-menu ) {
|
||
&:hover .vector-menu-content {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
.vector-menu-checkbox {
|
||
&:checked + .vector-menu-heading:after {
|
||
transform: scaleY( -1 );
|
||
}
|
||
}
|
||
|
||
.vector-menu-dropdown {
|
||
line-height: 1.125em;
|
||
|
||
li {
|
||
span:not( .mw-ui-icon ) {
|
||
font-size: @font-size-tabs;
|
||
}
|
||
|
||
a {
|
||
// Historic value.
|
||
padding: unit( ( 8.125px / @font-size-browser ), em );
|
||
}
|
||
}
|
||
|
||
.vector-menu-heading {
|
||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||
background-repeat: no-repeat;
|
||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||
background-size: @border-width-base 100%;
|
||
background-position: right bottom;
|
||
height: 100%;
|
||
}
|
||
|
||
.vector-menu-content {
|
||
border-top-width: 0;
|
||
}
|
||
}
|
||
|
||
.vector-menu-dropdown-noicon .vector-menu-heading {
|
||
font-size: @font-size-tabs;
|
||
}
|
||
|
||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||
background-position: right bottom;
|
||
float: left;
|
||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||
margin: 0 -@border-width-base 0 0;
|
||
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
|
||
// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
|
||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||
// `padding-left` in `.vector-menu-dropdown .vector-menu-heading a`
|
||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||
}
|