mediawiki-skins-Vector/resources/skins.vector.styles.legacy/components/MenuDropdown.less

57 lines
1.3 KiB
Plaintext
Raw Normal View History

@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 {
Refactor Vector tabs layout for reduced size & complexity 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
2022-07-04 18:05:03 +00:00
line-height: 1.125em;
li {
a:not( .mw-ui-icon ) {
Refactor Vector tabs layout for reduced size & complexity 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
2022-07-04 18:05:03 +00:00
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;
}
}
Refactor Vector tabs layout for reduced size & complexity 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
2022-07-04 18:05:03 +00:00
.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;
margin: 0 -@border-width-base 0 0;
float: left;
}