Bring menu tab appearance closer to standard widgets

Bringing appearance and behaviour closer to standard widget like
DropdownWidget:
- Amending color to be (closest) aligned to WikimediaUI color
  palette, but switch normal and `:hover`/`:focus` state in order not
  to be too disruptive of a change and align with rest of Vector tabs,
- removing obsolete JS functionality as IE 6 as only major browser
  affected does receive the menu items as tabs nonetheless and replacing
  with simple CSS selector,
- removing unnecessary and obsolete images and
- Lessifying selector

Bug: T153043
Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de
This commit is contained in:
Volker E 2017-07-20 22:50:23 +02:00 committed by Krinkle
parent 5184bb24ca
commit e2c9a585e4
8 changed files with 25 additions and 26 deletions

View file

@ -153,9 +153,9 @@ div#mw-head div.vectorMenu h3 {
background-position: bottom right;
font-size: 1em;
height: 2.5em;
// This effectively moves the "background border" outside of the element to act like a real
// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
padding-right: 1px;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real
// border. It is necessary for `div.vectorMenu div.menu` dropdown to align well.
padding-right: 0.5em; // equals `8px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
margin-right: -1px;
.vector-nav-directionality & {
@ -163,21 +163,25 @@ div#mw-head div.vectorMenu h3 {
}
}
div.vectorMenu h3 span {
display: block;
font-size: 0.8em;
padding-left: 0.7em;
padding-top: 1.25em;
padding-right: 20px;
font-weight: normal;
color: @menu-main-heading-color;
.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
div.vectorMenu h3 {
span {
display: block;
font-size: 0.8em;
padding-left: 0.7em;
padding-top: 1.25em;
padding-right: 16px;
font-weight: normal;
color: @content-font-color;
.background-image-svg('images/arrow-down.svg', 'images/arrow-down.png');
background-position: 100% 87%;
background-repeat: no-repeat;
opacity: 0.85; // equals `#434343` on `#fff` background, closest to `#444`
}
div.vectorMenuFocus h3 span {
.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
&:hover span,
&:focus span {
opacity: 1;
}
}
div.vectorMenu div.menu {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 B

View file

@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#929292"/></svg>

Before

Width:  |  Height:  |  Size: 165 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 B

View file

@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#797979"/></svg>

Before

Width:  |  Height:  |  Size: 165 B

BIN
images/arrow-down.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 B

4
images/arrow-down.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5" fill="#222"/>
</svg>

After

Width:  |  Height:  |  Size: 221 B

View file

@ -38,13 +38,6 @@ jQuery( function ( $ ) {
$el.toggleClass( 'menuForceShow' );
e.preventDefault();
}
} )
// When the heading has focus, also set a class that will change the arrow icon
.focus( function () {
$el.addClass( 'vectorMenuFocus' );
} )
.blur( function () {
$el.removeClass( 'vectorMenuFocus' );
} );
} );