mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-11 16:59:09 +00:00
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:
parent
5184bb24ca
commit
e2c9a585e4
|
@ -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 |
|
@ -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 |
|
@ -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
BIN
images/arrow-down.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 144 B |
4
images/arrow-down.svg
Normal file
4
images/arrow-down.svg
Normal 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 |
|
@ -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' );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
|
Loading…
Reference in a new issue