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