Fix misconception on icon coloring
It's advisable to rely on default icon color and set it's color by opacity. With that we've got a better playing field to respond to user interaction with icon color changes, not relying on several icons at once for different states and also being backwards-compatible for a variety of browsers. Change-Id: Iaff869774007ed962104d704103f0392a3516f4f Bug: T246419
This commit is contained in:
parent
ba05e760b9
commit
fd250975c4
|
@ -26,8 +26,8 @@
|
|||
mw-checkbox-hack-button
|
||||
mw-ui-icon
|
||||
mw-ui-icon-element
|
||||
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal-base20{{/sidebar-visible}}
|
||||
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu-base20{{/sidebar-visible}}
|
||||
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
|
||||
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
|
||||
"
|
||||
for="mw-sidebar-checkbox"
|
||||
data-event-name="ui.sidebar">
|
||||
|
|
|
@ -12,13 +12,13 @@ var vector = require( '../skins.vector.legacy.js/vector.js' );
|
|||
function updateMenuIcon( checkbox, button ) {
|
||||
button.classList.remove(
|
||||
checkbox.checked ?
|
||||
'mw-ui-icon-wikimedia-menu-base20' :
|
||||
'mw-ui-icon-wikimedia-collapseHorizontal-base20'
|
||||
'mw-ui-icon-wikimedia-menu' :
|
||||
'mw-ui-icon-wikimedia-collapseHorizontal'
|
||||
);
|
||||
button.classList.add(
|
||||
checkbox.checked ?
|
||||
'mw-ui-icon-wikimedia-collapseHorizontal-base20' :
|
||||
'mw-ui-icon-wikimedia-menu-base20'
|
||||
'mw-ui-icon-wikimedia-collapseHorizontal' :
|
||||
'mw-ui-icon-wikimedia-menu'
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@
|
|||
height: @size-sidebar-button;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base;
|
||||
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base, opacity @transition-duration-base; );
|
||||
|
||||
&:before {
|
||||
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
||||
|
@ -45,14 +46,17 @@
|
|||
height: 100%;
|
||||
// Center it horizontally.
|
||||
margin: 0 12px;
|
||||
opacity: 0.87;
|
||||
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
||||
opacity: 0.67;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @background-color-frameless--hover;
|
||||
}
|
||||
|
||||
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base; );
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {
|
||||
|
|
|
@ -60,8 +60,7 @@
|
|||
},
|
||||
"skins.vector.icons": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".mw-ui-icon-wikimedia-{name}-base20:before",
|
||||
"defaultColor": "#54595d",
|
||||
"selector": ".mw-ui-icon-wikimedia-{name}:before",
|
||||
"images": {
|
||||
"menu": "resources/skins.vector.icons/menu.svg",
|
||||
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
|
||||
|
|
Loading…
Reference in New Issue