mediawiki-skins-Vector/resources/skins.vector.styles/components/MenuTabs.less

66 lines
1.5 KiB
Plaintext
Raw Normal View History

@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
/**
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
*/
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
/* Tab list items */
.vector-menu-tabs {
float: left;
padding-left: @border-width-base;
li {
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
display: inline-block;
vertical-align: middle;
white-space: nowrap;
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
margin: 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
// Make first and last elements flush with edge of header.
&:first-child {
margin-left: -8px;
}
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
&:last-child {
margin-right: -8px;
}
}
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
/* focus and hover have outlines. Text underline interferes with bottom border */
li a:focus,
li a:hover {
text-decoration: none;
border-bottom: @border-width-base @border-style-base;
}
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
.new a,
.new a:visited {
color: @color-link-new;
}
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
.selected a,
.selected a:visited {
color: @color-link-selected;
border-bottom: @border-width-base @border-style-base;
}
}
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
/**
* Tab link appearance, applies to
* - <a> inside vector-menu-tabs (e.g. read, edit, view, history)
* - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
*/
.vector-menu-tabs li a,
.vector-article-toolbar .vector-menu-heading {
display: block;
position: relative;
// Top bottom padding to increase clickable area.
padding-top: 18px;
padding-bottom: 7px;
// left & right margin separate bottom border between words,
// bottom margin makes link border overlap toolbar border.
margin: 0 8px -1px 8px;
cursor: pointer;
border-bottom: @border-width-base @border-style-base transparent;
}