Replace deprecated classes with modern ones
Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465 it's now time to settle on `.vector-menu*` classes. Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
This commit is contained in:
parent
a6dd9b25c5
commit
7e7bdb4f54
@ -6,7 +6,7 @@
|
||||
<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" role="navigation" {{{html-tooltip}}}
|
||||
{{{html-userlangattributes}}}>
|
||||
{{#is-dropdown}}
|
||||
<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
|
||||
<input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
|
||||
{{/is-dropdown}}
|
||||
<h3 id="{{label-id}}">
|
||||
<span>{{label}}</span>
|
||||
|
@ -108,9 +108,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// FIXME: Drop .menu class after cache has cleared.
|
||||
.vectorMenu .menu,
|
||||
.vectorMenu .vector-menu-content-list {
|
||||
.vector-menu-dropdown .vector-menu-content-list {
|
||||
left: inherit;
|
||||
right: -1px;
|
||||
}
|
||||
|
@ -2,8 +2,6 @@
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/* Variants and Actions */
|
||||
// FIXME: For cached HTML
|
||||
.vectorMenu,
|
||||
.vector-menu-dropdown {
|
||||
direction: ltr;
|
||||
float: left;
|
||||
@ -47,7 +45,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
// The menu itself.
|
||||
.vector-menu-content-list {
|
||||
background-color: @background-color-base;
|
||||
list-style: none none;
|
||||
// Match the width of the dropdown "heading" (the tab)
|
||||
@ -67,8 +66,6 @@
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
// FIXME: Drop .menu class after cache has cleared.
|
||||
&:hover .menu,
|
||||
&:hover .vector-menu-content-list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@ -76,8 +73,6 @@
|
||||
|
||||
// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
|
||||
// Support: IE8
|
||||
// FIXME: drop .menu selector when cache has cleared
|
||||
.vectorMenuCheckbox:checked ~ .menu,
|
||||
.vector-menu-checkbox:checked ~ .vector-menu-content-list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@ -106,26 +101,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
#mw-head .vectorMenu h3 {
|
||||
#mw-head .vector-menu-dropdown h3 {
|
||||
// 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 `.vectorMenu .menu` dropdown to align well.
|
||||
// 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 `.vectorMenu h3 a`
|
||||
// `padding-left` in `.vector-menu-dropdown h3 a`
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
}
|
||||
|
||||
// Tab Separators
|
||||
// `.vectorTabs`: Outer start border (left in LTR) of tab row.
|
||||
// `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
|
||||
// `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
.vectorTabs,
|
||||
.vectorTabs a,
|
||||
#mw-head .vectorMenu h3 {
|
||||
// `#mw-head .vector-menu-dropdown h3`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
.vector-menu-tabs,
|
||||
.vector-menu-tabs a,
|
||||
#mw-head .vector-menu-dropdown h3 {
|
||||
background-image: url( images/tab-separator.png );
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
@ -134,7 +129,7 @@
|
||||
}
|
||||
|
||||
// Invisible checkbox covering the dropdown menu handle
|
||||
.vectorMenuCheckbox {
|
||||
.vector-menu-checkbox {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -6,8 +6,6 @@
|
||||
*/
|
||||
|
||||
/* Namespaces and Views */
|
||||
// FIXME: For cached HTML
|
||||
.vectorTabs,
|
||||
.vector-menu-tabs {
|
||||
// Tab separator: Outer start border (left in LTR) of tab row.
|
||||
background-position: left bottom;
|
||||
|
@ -15,15 +15,15 @@
|
||||
@ie8-media-start: ~'@media \0screen {';
|
||||
@ie8-media-end: ~'} after';
|
||||
@{ie8-media-start}
|
||||
.vectorTabs .mw-watchlink.icon a {
|
||||
.vector-tabs .mw-watchlink.icon a {
|
||||
width: auto;
|
||||
height: auto;
|
||||
// Copied from 'VectorTabs.less'.
|
||||
// Copied from 'MenuTabs.less'.
|
||||
padding: 1.25em 8px 0 8px;
|
||||
}
|
||||
|
||||
// LESS nesting doesn't work in this hack.
|
||||
.vectorTabs .mw-watchlink.icon a:before {
|
||||
.vector-tabs .mw-watchlink.icon a:before {
|
||||
display: none;
|
||||
}
|
||||
// Bogus extra rule for LESS compiler to render `@media` ending bracket.
|
||||
|
@ -4,8 +4,8 @@
|
||||
|
||||
/* Watch/Unwatch Icon Styling */
|
||||
/* Only use icon if the menu item is not collapsed into the "More" dropdown
|
||||
* (in which case it is inside .vectorMenu instead of .vectorTabs). */
|
||||
.vectorTabs {
|
||||
* (in which case it is inside `.vector-menu-dropdown` instead of `.vector-tabs`). */
|
||||
.vector-tabs {
|
||||
// `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well.
|
||||
@width-watchlink: unit( 28 / @font-size-tabs / @font-size-browser, em );
|
||||
@height-watchlink: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||||
|
@ -5,7 +5,7 @@
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
// Modern layout variables
|
||||
@height-tabs: 2.5em; // Keep in sync with .vectorTabs height
|
||||
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
||||
@margin-top-sidebar: 0.5em;
|
||||
|
||||
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
||||
|
Loading…
Reference in New Issue
Block a user